撰寫Javascript的程式碼時，雖然可以用for迴圈或forEach方法來處理陣列的問題；但是面對內為許多方便的陣列方法，不使用它們，心裏總是癢癢的。回顧前面的程式，還是用到了一些陣列的方法，索性，今天就大開大闔的介紹一些陣列的方法。

陣列的方法可大致分為會改變原陣列的方法（Mutating methods）和不會改變原陣列的方法（Without mutating methods）。

以下是我們使用的陣列範例：

const geometryElements = ['point', 'line', 'segment', 'ray', 'circle']

改變原陣列的方法

Javascript具有雙端佇列（deque，全名double-ended queue）的結構，可以從頭尾雙端插入與刪除，可以同時作為堆疊（stack）和佇列（queue）的資料結構，使用的方法為push、pop、shift和unshift。

• push(元素) ：在陣列最後增加一個元素，並回傳陣列的長度。
• pop() ：在陣列最後刪除一個元素，並回傳此元素。
• unshift(元素) ：在陣列開頭增加一個元素，並回傳陣列的長度。
• shift() ：在陣列開頭刪除一個元素，並回傳此元素。

const people = [
  { name: 'John', age: 35 },
  { name: 'Eszter', age: 24 },
  { name: 'Mary', age: 14 },
]

// Mutating method

console.log(people.push({name: 'Oscar', age: 47})) // 4
console.log(people.shift()) // { name: 'John', age: 35 }
console.log(people.unshift({name: 'Lance', age: 53})) // 4
console.log(people.pop()) // { name: 'Mary', age: 14 }
console.log(people)
// 最後陣列內容為
// [
//   { name: 'Lance', age: 53 },
//   { name: 'Eszter', age: 24 },
//   { name: 'Mary', age: 14 }
// ]

splice則更具彈性，可以在任何位置刪除和插入元素。

• splice(索引值，刪除數量，插入元素1，插入元素2，…) 在索引值的位置刪除給定的數量，並插入第三個之後的元素，回傳值為被刪除元素所形成的陣列。

console.log(people.splice(1, 2, {name: 'Kermi', age: 25}, {name: 'Wanisha', age: 16})) 
// [ { name: 'Eszter', age: 24 }, { name: 'Mary', age: 14 } ]
console.log(people)
//[
//  { name: 'Lance', age: 53 },
//  { name: 'Kermi', age: 25 },
//  { name: 'Wanisha', age: 16 }
//]

不改變原陣列的方法

slice可以取得想要位置的元素所成陣列。

• slice(索引值1，索引值2） 可以回傳「索引值1」到「索引值2 - 1」的元素所成陣列。

console.log(people.slice(1, 3)) // [ { name: 'Kermi', age: 25 }, { name: 'Wanisha', age: 16 } ]

filter可以取得符合條件的元素所成陣列。

• filter(回呼函式) 回呼函式的傳回值為Boolean值。

const filteredPeople = people.filter(people => people.age > 20)
console.log(filteredPeople) // [ { name: 'Lance', age: 53 }, { name: 'Kermi', age: 25 } ]

map的回呼函式針對每一個元素進行運算後回傳新的值，並回傳由回呼函式回傳回值所形成的陣列。

const mappedPeople = people.map(people => {
  return {...people, age: people.age + 20}
})
console.log(mappedPeople)
// [
//   { name: 'Lance', age: 73 },
//   { name: 'Kermi', age: 45 },
//   { name: 'Wanisha', age: 36 }
// ]

findIndex和find則分別可以搜尋到滿足條件的元素索引值和元素。

const foundIndex = people.findIndex(people => people.name === 'Kermi')
const found = people.find(people => people.name === 'Kermi')
console.log(foundIndex, found) // 1 { name: 'Kermi', age: 25 }

reduce可以做累積性的工作

• ** reduce(回呼函式，起始值)** 回呼函式通常有兩個參數，即累積值和目前元素，可以回傳任何結果，存放到累積值內。

const sum = people.reduce((accumulate, current) => {
  result = accumulate + current.age
  return result
}, 0)
console.log(sum) // 94

程式原始碼

今日程式原始碼

今日小結

因為Javascript的陣列方法非常多，今天介紹了一些常用的常用方法或是未來可能用到的方法，供大家參考。而要熟練這些方法最好的途徑是不斷的使用它們，所謂「熟能生巧」就是如此，明天見！