陣列、物件、JSON

📌 學習目標
✅ 了解 陣列 (Array) 與 物件 (Object) 的基本概念與操作
✅ 學會使用 JSON 格式傳遞與儲存資料
✅ 熟悉 陣列的常見方法 (map、filter、reduce、forEach)
✅ 透過 API 串接學習 資料處理與篩選技巧

教學錄影

陣列 (Array) 基礎

🔹 陣列是 JavaScript 的「有序資料集合」

let fruits = ["蘋果", "香蕉", "橘子"]
console.log(fruits[0]) // 蘋果
console.log(fruits.length) // 3

🔹 陣列的基本操作

方法	說明
push(value)	新增元素到 陣列最後
pop()	刪除陣列最後一個元素
unshift(value)	新增元素到 陣列最前
shift()	刪除陣列第一個元素
splice(index, count, newItem)	刪除/插入元素
indexOf(value)	找出某個值的索引
includes(value)	判斷是否包含某值

📌 範例：基本操作

let fruits = ["蘋果", "香蕉", "橘子"]

fruits.push("葡萄") // 加到最後
console.log(fruits) // ["蘋果", "香蕉", "橘子", "葡萄"]

fruits.pop() // 移除最後一個
console.log(fruits) // ["蘋果", "香蕉", "橘子"]

console.log(fruits.indexOf("香蕉")) // 1
console.log(fruits.includes("鳳梨")) // false

🎯 練習

1. 建立一個包含 5 個數字的陣列，新增一個數字到最後，然後刪除第一個數字。
2. 使用 indexOf() 找出 "JavaScript" 在 ["HTML", "CSS", "JavaScript", "React"] 陣列中的索引。

物件 (Object)

🔹 物件 (Object) 是「無序的 key-value 配對」

let person = {
  name: "Alice",
  age: 25,
  isStudent: true,
}

console.log(person.name) // "Alice"
console.log(person["age"]) // 25

🔹 修改物件內容

person.age = 26 // 修改
person.city = "台北" // 新增
delete person.isStudent // 刪除
console.log(person)

JSON

🔹 JSON (JavaScript Object Notation) 是一種資料交換格式

{
  "name": "Alice",
  "age": 25,
  "skills": ["JavaScript", "HTML", "CSS"]
}

🔹 JSON 與 JavaScript 物件互轉

方法	說明
JSON.stringify(obj)	物件轉 JSON 字串
JSON.parse(jsonString)	JSON 字串轉物件

📌 範例：轉換 JSON

let student = { name: "Alice", age: 25 }
let jsonStr = JSON.stringify(student)
console.log(jsonStr) // '{"name":"Alice","age":25}'

let jsonObj = JSON.parse(jsonStr)
console.log(jsonObj.name) // "Alice"

🎯 練習

1. 定義一個 person 物件，包含 name、age、city，然後轉成 JSON。
2. 嘗試將 JSON 格式的字串轉回物件，並印出 name。

陣列方法 (map, filter, reduce, forEach)

🔹 map()：陣列中的每個元素進行運算，回傳新的陣列

let numbers = [1, 2, 3, 4]
let squared = numbers.map((num) => num * num)
console.log(squared) // [1, 4, 9, 16]

🔹 filter()：篩選符合條件的元素

let ages = [18, 22, 15, 30, 17]
let adults = ages.filter((age) => age >= 18)
console.log(adults) // [18, 22, 30]

🔹 reduce()：累加陣列所有值

let prices = [100, 200, 300]
let total = prices.reduce((sum, price) => sum + price, 0)
console.log(total) // 600

🔹 forEach()：迭代陣列，不回傳值

let names = ["Alice", "Bob", "Charlie"]
names.forEach((name) => console.log(name))

🎯 練習

1. 使用 map() 將 [1, 2, 3] 轉換為 [2, 4, 6]。
2. 使用 filter() 從 [10, 25, 30, 5] 過濾出大於 20 的數字。