原生 JS 內所有陣列方法的統整。
以下會記錄目前用到並且融會貫通的方法:
every()
filter()
find()
forEach()
map()
reduce()
some()
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);