今天是JavaScript學習紀錄的Day6
陣列是 JavaScript 中超常用的資料結構之一！
從清單、購物車、留言列表，到資料查詢結果，幾乎都少不了它的身影喔

今日的目標：

• 理解陣列的用途與基本建立方式
• 學會取值與修改
• 熟悉常見的操作方法（push、pop、shift、unshift、slice、splice）
• 學會用 for...of 與 forEach 來遍歷資料

1. 建立與取值

建立陣列

const fruits = ['apple', 'banana', 'cherry']
console.log(fruits) // ['apple', 'banana', 'cherry']

取值與修改

console.log(fruits[0]) // apple
console.log(fruits[2]) // cherry

// 修改值
fruits[1] = 'mango'
console.log(fruits) // ['apple', 'mango', 'cherry']

二、常見的操作方法

這邊要提一下slice跟splice的差別～

首先是slice()
他會回傳「從 start 到 end（不含 end）」的新陣列；但不會更改原陣列。
而「不含 end」的意思是：slice(0, 2) 只會拿到索引 0,1，索引2是不會拿到的。

舉例來說：

const fruits = ['kiwi', 'mango', 'cherry', 'orange']
console.log(fruits.slice(0, 2)) // ['kiwi', 'mango']
console.log(fruits)             // ['kiwi', 'mango', 'cherry', 'orange']原陣列不變

另外 start 跟 end 索引都可以是負值，只要看到「負值」就是代表從尾端倒數～

• slice(-2) → 取最後兩個
• slice(1, -1) → 從索引 1 取到「倒數第一個之前」

接下來是splice()～
他可以在任意位置刪除 / 插入 / 取代元素，但要注意是會改原陣列的！
而回傳值會是：被刪除的元素陣列
語法：arr.splice(start, deleteCount, ...itemsToInsert)

1) 刪除

const arr = ['a', 'b', 'c', 'd']
const removed = arr.splice(1, 2) // 從索引1刪掉2個 → 刪 b, c
console.log(arr)     // ['a', 'd']
console.log(removed) // ['b', 'c']

2) 插入（不刪）

const arr = ['a', 'd']
arr.splice(1, 0, 'b', 'c') // 在索引1插入 b,c；因為deleteCount=0 所以沒有刪東西
console.log(arr) // ['a', 'b', 'c', 'd']

3) 取代（刪 + 插）

const fruits = ['kiwi', 'mango', 'cherry']
fruits.splice(1, 1, 'grape') // 索引1刪1個，插入 'grape'
console.log(fruits) // ['kiwi', 'grape', 'cherry']

三、遍歷陣列

for...of
最直覺的寫法，用來逐一取出陣列中的值。

let pets = ['dog', 'cat', 'fish']
for (let pet of pets) {
  console.log(pet)
}
// dog
// cat
// fish

forEach()
forEach() 是陣列（Array）內建的方法，用來對陣列的每一個元素依序執行指定的「函式（callback function）」
另外，也不能在 forEach 裡用 break 或 continue 中斷。
若要中斷迴圈，要改用 for...of～

pets.forEach(function(pet, index) {
  console.log(index, pet)
})
// 0 dog
// 1 cat
// 2 fish

JavaScript 看到 pets.forEach(...) → 意思是「 對 pets 陣列的每個元素，執行我給你的這個函式」
上面這段也可以簡化成箭頭函式版本～結果是完全一樣的喔！

pets.forEach((pet, index) => {
  console.log(index, pet)
})

要注意forEach() 不會回傳新陣列，它只是「逐一執行動作」而已～
如果你想轉換成新陣列，要用 map()！
map()就是把「每個元素」映射成另一個值，回傳新陣列（不改原陣列）。

map()常見的用法
1) 數值轉換

const nums = [1, 2, 3]
const doubled = nums.map(n => n * 2)
console.log(doubled) // [2, 4, 6]
console.log(nums)    // 原陣列不變 [1, 2, 3]

2) 取出物件的某欄位

const users = [{id: 1, name: 'A'}, {id: 2, name: 'B'}]
const names = users.map(u => u.name)
console.log(names) // ['A', 'B']