iT邦幫忙

2025 iThome 鐵人賽

DAY 25
0
Modern Web

網頁技術探索:30天的前端學習系列 第 25

DAY25 JS Array 陣列跟Object 物件的基本認識

  • 分享至 

  • xImage
  •  

今天進入下一個部分。陣列 (Array) 與物件 (Object)

Array 陣列

陣列內可以是原始的資料類型、其他陣列、函式等等。 要注意的是,陣列是個有順序性的集合,且只能透過 [] 來存取。

JavaScript 是從變數開始,然後用 console.log 做驗證。所以在陣列的觀念中也是從變數延伸,但如果變數很多的時候,不可能把所有的變數都一股腦丟給對方,這樣收到一堆變數會很崩潰。所以陣列的出現就是將相同的變數集合成一個數列,於是陣列就這樣出現了

陣列的寫法

一樣是用變數宣告,自定義陣列名稱,但陣列要用中括號 [] 呈現,結束要用分號 ; 收尾,寫法如下:

var array = ["a"];

所以椅子有四張,有紅色,有藍色可以這樣寫成陣列,有相同的名稱,有不同的參數,要用逗號 , 分開,呈現如下:

var chair =["red" , "blue"];

陣列的排序

一般排序的邏輯會從 1 開始,但陣列的是從 0 開始,所以今天如果家裡有四個地方要增加桌子,就要增加四個變數,但這樣太多行了,如果使用陣列,並且知道哪個房間有幾張桌子,可以這樣寫,目前實務上也比較常見這樣的寫法,要抓取陣列資料會這樣寫:

var desk = [4, 1, 2, 3];
console.log(desk[0]); // 因為排序第一是 4,所以結果會出現 4

以此類推,如果在 console 裡面的中括號,寫其他順序,會出現相對應的結果。

也可以這樣寫:

var desk = [4, 1, 2, 3];
var desk1 = desk[0];
console.log(desk1); // 結果會出現 4

length 長度

要查陣列的資料長度可以使用 length 這個語法,英文原意也是長度的意思。

var desk = [4, 1, 2, 3];
var desk1 = desk[0];
console.log(desk[0]); // 結果會出現 4

console.log(desk.length); //結果會出現 4,代表有陣列的長度有四個

.push 增加陣列元素的語法

若想要在陣列外新增元素時,可以透過 number.push() 這個語法增加,透過 . 代表要增加後面的屬性:

var number = [1, 2, 3];
number.length; // 會顯示 3,指有三個陣列資料

number.push(4);
console.log(number); // [1, 2, 3, 4] 新增第四個陣列資料

.splice 刪除陣列語法

有增加就有刪除,可以透過 number.splice(起始位置,資料數量) 這個語法刪除:

var number = [1, 2, 3];
number.length; // 會顯示 3,指有三個陣列資料

number.splice(0, 2); //從第一筆資料刪除,刪除兩筆資料
number; // [3]

Object 物件

一個物件可以是個零至多種屬性的集合,而屬性是鍵 (key) 與值 (value) 之間的關聯。 一個屬性的「值」可以是某個基本型別,也可以是另一個物件,甚至可以是一個函數。

物件的寫法

宣告一個變數 var ,自定義一個名稱,直接用一個大括號 {} 的方式來建立物件,資料結尾要用逗號 , ,也是 JSON 格式的核心語法,寫法如下:

var object ={};

有點像寫 CSS 格式的感覺,用這個聯想就滿好記的。

.header{};

在物件中加上屬性

在大括號裡面,會給物件一些內容,稱之為屬性跟值。
如果以一個家為例,家裡面有爸爸,名字叫做 Tim,那物件內容就會這樣寫:

var home ={
  dad: "Tim"
}

增加屬性內容要注意的地方是:給屬性一個自定義的名稱,加上冒號 :,後面一樣要按照變數的資料型態來寫,字串要加上引號,數字則不用,多個物件內容要用逗點 , ,但最後一個物件項目,無須逗點。如下方程式碼:

var home ={
  dad: "Tim",
  mom: "Min",
  son: "Joshua"
}

存取物件的屬性

物件本身不會被執行,要把物件中的屬性做存取的動作,才會被執行,假如要存取下方物件中的內容,要在物件名稱後加上點 .,才能取得屬性的值,程式碼可以這樣寫:

var home ={
  dad: "Tim",
  mom: "Min",
  son: ["Joshua","John"],
  chair:4
}
home.dad; //會得到 Tim 這個結果
home.son[0] //會得到 Joshua 這個結果
  1. 在 home 的物件中,找到 dad 屬性中裡面的值,所以結果會得到 Tim。
  2. 在 home 的物件中,找到 son 陣列裡的第一個值,所以結果會得到 Joshua。

新增物件屬性

如果要在物件外,直接新增屬性到物件內的話,可以這樣寫:

var home ={
  dad: "Tim",
  mom: "Min",
  son: ["Joshua","John"],
  chair:4
}
home.dog = 1; //增加屬性 dog,值為 1 的內容到物件內
home.dog; //存取值就會得到 1

刪除物件屬性

如果要在物件外,直接刪除物件內屬性,可以這樣寫:

var home ={
  dad: "Tim",
  mom: "Min",
  son: ["Joshua","John"],
  chair:4
}
home.dog = 1; //增加屬性 dog,值為 1 的內容到物件內
home.dog; //存取值就會得到 1
delete home.dog; //刪除物件 home 裡面的屬性 dog
home.dog; //存取值會得到 undefined

上一篇
DAY24 function 函式 Hoisting 提升觀念跟函式 function應用
下一篇
DAY26 Object & Array 物件與陣列的綜合應用
系列文
網頁技術探索:30天的前端學習26
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言