陣列的方法

原生 JS 內所有陣列方法的統整。

以下會記錄目前用到並且融會貫通的方法:

  1. every()
  2. filter()
  3. find()
  4. forEach()
  5. map()
  6. reduce()
  7. some()
  8. sort()

# 1. every()

當其中一個條件不滿足,即會回傳 false。

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

const result = arr.every((item) => item > 1);

console.log(result); //	false

# 2. filter()

只回傳滿足條件的值,並創造新的陣列

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

const result = arr.filter((item) => item > 1);

arr[1] = 5;

console.log(arr); //	[1, 5, 3, 4, 5, 6, 7, 8, 9]
console.log(result); //	[2, 3, 4, 5, 6, 7, 8, 9]

# 3. find()

只會回傳第一次滿足條件為 true 的

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

const result = arr.find((item) => item > 8);

console.log(result); //	9

# 4. forEach()

像寫法較為簡單的 for 迴圈,不會額外回傳值,單純執行每個陣列內的物件。

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

arr.forEach((item) => console.log(item));

# 5. map()

對陣列裡的每一個值進行操作,可以運算也可以判斷,並創造新的陣列

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

const result = arr.map((item) => item * 2);

console.log(result); //	[2, 4, 6, 8, 10, 12, 14, 16, 18]
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

const result = arr.map((item) => item > 5);

console.log(result); //	[false, false, false, false, false, true, true, true, true]

# 6. reduce()

陣列累加器,於此文章有更詳細的解釋。

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

const result = arr.reduce((a, b) => a + b);

console.log(result); //	45

# 7. some()

every()很像,但不同之處在於,即便只有一個條件滿足,也會回傳 true。

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

const result = arr.some((item) => item > 8);

console.log(result); //	true

# 8. sort()

陣列排序,於此文章有更詳細的解釋。

const arr = [5, 10, 6, 3, 2, 5, 6, 8, 95];

arr.sort((a, b) => a - b);

console.log(arr);