[第四週] JavaScript — 陣列 Array 與 物件 object

學習目標：了解陣列及物件的使用方法。

關於學習 JavaScript 的心得，主要源自於以下學習資源：

• [CS101] 初心者的計概與 coding 火球術
• [JS101] 用 JavaScript 一步步打造程式基礎
• 現代 JavaScript 教程：数组
• 現代 JavaScript 教程：Object（对象）：基础知识

在 JavaScript 基本知識 — 變數、常數、資料型別 中我們有談到稍稍提到第八種的資料型別「物件」，此篇將再深入說明並說明物件底下的型別分類，因為它非常非常非常重要。

在 JavaScript 中，除了七種純值外，其他資料型別都是物件，物件型別又分以下子類型

• 陣列（array）
• 函式（function）#請參考 [第四週] JavaScript — function
• 日期（date）

陣列（Array）

• 是包含許多值的集合，是有順序性的物件。

[補充說明] 陣列可以放入沒有順序性或沒有關聯性的資料嗎？
可以，但就失去了陣列的意義。
大部分的程式語言，陣列可以包含一連串相同型別的東西(例如：數字陣列、字串陣列、物件陣列)，JS 的陣列與其他語言不太相同的是，因為動態型別的關係，他會立刻知道東西的型別，因此他可以放入不相同型別的東西。

• 陣列在記憶體中是 索引/值 的配對。
• 舉例來說：儲存全班同學的數學成績，資料是有順序性及關聯性的（有序集合、列隊），因此就適合用陣列儲存。
• 通常會搭配迴（loop）使用。
• 用中括號表示[]。

創造陣列

方法1. 創造一個空陣列(常見用法) ： let score = []

方法2. 利用函式建構式創造一個空物件： let score = new Array()

• 語法：

let score = [ value, value, value, value, …]

• 語法說明：
  1. 索引 index ：從 0 開始。
  2. 值 value ：可以是任何型態，但通常會放純值。
• 範例：

let score = [ 94, 80, 60, 75, …]

將值放入陣列

方法1. 直接創造一個有值的陣列

• 範例：

let array = [ 1, 2, 3, 4]

方法2. 利用 []： array[index]

• 範例：將新值放入「第四個位置」

let array = [ 1, 2, 3, 4]
array[3] = 100
console.log(array) //[ 1, 2, 3, 100]

方法3. 利用內建函式 .push()： array.push(value)

• 會放在陣列的最末端
• 最常見的使用方式
• 變化型：
  1. 利用 , 添加多個值：array.push(value, value, value, ….)
• 範例：

let array = [ 1, 2, 3, 4]
array.push(100);
console.log(array) // [ 1, 2, 3, 4, 100]

取出陣列裡的值

方法1. 利用 []： array[index]

多維陣列

• 陣列內再放入陣列
• 舉例

array = [
 [1, 2, 3],
 [4, 5, 6],
 [7, 8, 9]
]
console.log(array[1][1]) //5

陣列經常搭配使用的內建函式

length

• 回傳陣列的長度
• 語法： array.length
• 變化型
  1. 可用來取最後一個值：array[score.length — 1]。
  2. 將陣列清空：array.length = 0

toString

• 回傳字串
• 語法： String(array)
• 舉例

array = [1, 2, 3]
String(array) //'1,2,3'

其他不常使用的內建函式

shift

• 取出第一個值並回傳，同時也改變陣列
• 語法： array.shift()
• 範例

let array = [1, 2, 3, 4]
array.shift(); // return 1
console.log(array) // [2, 3, 4]

unshift

• 在陣列的首端增加值
• 語法： array.unshift(value)
• 變化型
  1. 利用 , 添加多個值：array.unshift(value, value, value, ….)
• 範例

let array = [ 1, 2, 3, 4]
array.unshift(100);
console.log(array) // [ 100, 1, 2, 3, 4]

物件（Object）

• 陣列通常用於「相似、有順序性」的資料，而物件，就是什麼東西都可以放。
• 物件是被賦予值的名稱之組合，在記憶體中是 名稱/值 的配對。
• 語法

let person = { 
   key : value, 
   key : value,
   key : value, 
}

• 語法說明：
  1. 名稱 key ：盡量避免使用「數字開頭」、「帶有空格的字串」、「帶有特殊字元」
  2. 值 value ：可以是任何東西，例如：純值、函式、陣列、物件等。 ＃對，物件可以再放入物件喔！
• 範例

let person = {
   firstName: "Tony",
   lastName: "Alicia",
   scores: [1, 2, 3]
   age: 20,
   food: {
      breakfast: "banana",
      lunch: :有轉彎的雞腿便當",
      dinner: "McDonald’s"
   },
   method: function() {
      ….
   },
}

創造物件

方法1. 創造一個空物件（常見的方式）：let person = {}

方法2. 利用函式建構式創造一個空物件：let person = new Object()

方法3. 創造物件並放入組合

將組合（名稱/值）放入物件

方法1. 直接創造一個有組合的物件

let person = {
   firstName: "Tony",
   lastName: "Alicia",
}

方法2. 利用 .： person.firstName = Tony

方法3. 利用[]：person['firstName'] = Tony

[補充說明] 使用 [] 一定要加上引號，告訴 JavaScrip 這是一個字串

取出物件裡的值

方法1. 利用 .： person.firstName

方法2. 利用[]：person['firstName']

兩者的差異在於，用 . 是直接對應 name ；用 [] 則可以為一個變數賦予物件名稱，並用 [] 取出，以下範例說明：

let person = {
   firstName: "Tony",
}
console.log(person.key); //undefined
console.log(person[key]); //Tony 這時候裡面是變數，因此就不用加引號囉！

將組合（名稱/值）從物件刪除

• 配合 . 、 [] 使用
• 範例

delete person.firstName;
delete person['firstName'];

重點整理

• 在 JavaScript 中，除了七種純值外，其他資料型別都是物件型別。
• 陣列（array）以[]中括號表示，可以想像成是有順序的箱子之集合。

1. 宣告陣列： let arr = []
2. 放入值： arr.push(value)
3. 取得值：arr[index]
4. 取得陣列長度： arr.length

• 物件（object）以{}大括號表示，是被賦予值的名稱之組合，在記憶體中是 名稱/值 的配對。
• 物件裡的值：可以是任何東西（例如：純值、函式、陣列等。）

1. 宣告物件： let obj = {}
2. 放入組合： obj.name = 'mia' or obj[name] = 'mia'
3. 取出值：obj.name or obj[name]
4. 將組合從物件刪除：delete obj.name