這篇文章最初發佈在我的部落格上。
在這篇文章中，我將分享 10 個你應該知道的 JavaScript 陣列方法。
如果你對陣列一無所知，可以點選這裡查看陣列介紹。
這裡有 10 個你至少應該知道的 javascript 陣列方法
1. forEach()
此方法可以幫助您循環陣列。
const arr = [1, 2, 3, 4, 5, 6];
arr.forEach(item => {
console.log(item); // output: 1 2 3 4 5 6
});
2. includes()
此方法檢查陣列是否包含在方法中傳遞的專案。
const arr = [1, 2, 3, 4, 5, 6];
arr.includes(2); // output: true
arr.includes(7); // output: false
3. filter()
此方法會建立新陣列，其中僅包含在提供的函數內傳遞條件的元素。
const arr = [1, 2, 3, 4, 5, 6];
// item(s) greater than 3
const filtered = arr.filter(num => num > 3);
console.log(filtered); // output: [4, 5, 6]
console.log(arr); // output: [1, 2, 3, 4, 5, 6]
4. map()
此方法透過在每個元素中呼叫提供的函數來建立新陣列。
const arr = [1, 2, 3, 4, 5, 6];
// add one to every element
const oneAdded = arr.map(num => num + 1);
console.log(oneAdded); // output [2, 3, 4, 5, 6, 7]
console.log(arr); // output: [1, 2, 3, 4, 5, 6]
5. reduce()
reduce() 方法對累加器和陣列中的每個元素（從左到右）套用函數，將其減少為單一值 - MDN
const arr = [1, 2, 3, 4, 5, 6];
const sum = arr.reduce((total, value) => total + value, 0);
console.log(sum); // 21
6. some()
此方法檢查陣列的至少一項是否符合條件。如果通過，則傳回“true”，否則傳回“false”。
const arr = [1, 2, 3, 4, 5, 6];
// at least one element is greater than 4?
const largeNum = arr.some(num => num > 4);
console.log(largeNum); // output: true
// at least one element is less than or equal to 0?
const smallNum = arr.some(num => num <= 0);
console.log(smallNum); // output: false
7. every()
此方法檢查所有陣列的專案是否都符合條件。如果通過，則傳回“true”，否則傳回“false”。
const arr = [1, 2, 3, 4, 5, 6];
// all elements are greater than 4
const greaterFour = arr.every(num => num > 4);
console.log(greaterFour); // output: false
// all elements are less than 10
const lessTen = arr.every(num => num < 10);
console.log(lessTen); // output: true
8. sort()
此方法用於按升序或降序排列/排序陣列的專案。
const arr = [1, 2, 3, 4, 5, 6];
const alpha = ['e', 'a', 'c', 'u', 'y'];
// sort in descending order
descOrder = arr.sort((a, b) => a > b ? -1 : 1);
console.log(descOrder); // output: [6, 5, 4, 3, 2, 1]
// sort in ascending order
ascOrder = alpha.sort((a, b) => a > b ? 1 : -1);
console.log(ascOrder); // output: ['a', 'c', 'e', 'u', 'y']
9. Array.from()
這會將所有類似陣列或可迭代的內容變更為真正的陣列，尤其是在使用 DOM 時，這樣您就可以使用其他陣列方法，如reduce、map、filter 等。
const name = 'frugence';
const nameArray = Array.from(name);
console.log(name); // output: frugence
console.log(nameArray); // output: ['f', 'r', 'u', 'g', 'e', 'n', 'c', 'e']
使用 DOM
// I assume that you have created unorder list of items in our html file.
const lis = document.querySelectorAll('li');
const lisArray = Array.from(document.querySelectorAll('li'));
// is true array?
console.log(Array.isArray(lis)); // output: false
console.log(Array.isArray(lisArray)); // output: true
10. Array.of()
這會根據傳入的每個參數建立陣列。
const nums = Array.of(1, 2, 3, 4, 5, 6);
console.log(nums); // output: [1, 2, 3, 4, 5, 6]
原文出處：https://dev.to/frugencefidel/10-javascript-array-methods-you-should-know-4lk3
共有 0 則留言
文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
熱門文章
