15個你應該知道的JavaScript的重要數組方法

英文 | https://blog.devgenius.io/15-important-javascript-array-methods-you-should-know-5e74578191a3

翻譯 | 楊小愛

我們會在建構的每個應用程式中使用數組。它有幾種方法，其中一些非常令人困惑。我列出了 15 種，我們應該掌握的數組方法，因為它們經常派上用場。

數組方法的重要一點是有些是可變的，有些是不可變的。在決定針對特定問題使用哪種方法時，務必牢記這一點。

此清單中的大多數數組方法都采用類似的回調作為參數。第一個參數是目前項，第二個參數是索引，第三個是整個數組。現在我們已經解決了這個問題，讓我們從清單開始：

1、ForEach

循環周遊數組中的每個元素并執行回調函數。

const arr = [1, 2, 3];
arr.forEach(num => console.log(num));
// Console: 1, 2, 3      

2、Map

循環周遊數組中的每個元素并執行回調函數。使用回調函數的傳回值建立一個新數組。

const arr = [1, 2, 3, 4, 5];
const areEven = arr.map(num => num % 2 === 0);
console.log(areEven); // Console: [false, true, false, true, false]      

3、Filter

循環周遊數組中的每個元素，并僅選擇符合條件的元素。根據所選元素傳回一個新數組。

const arr = [1, 2, 3, 4, 5];
const evenNumbers = arr.filter(num => num % 2 === 0);
console.log(evenNumbers); // Console [2, 4]      

4、Find

查找數組中滿足條件的第一個元素。如果沒有找到，将傳回 undefined。

const arr = [1, 2, 3, 4, 5];


const firstEvenNumber = arr.find(num => num % 2 === 0);


console.log(firstEvenNumber); // Console [2]      

5、FindIndex

與前面的方法類似，它傳回滿足給定條件的第一個元素的索引。如果沒有找到，則傳回 -1。

const arr = [1, 2, 3, 4, 5];


const firstEvenNumberIdx = arr.findIndex(num => num % 2 === 0);


console.log(firstEvenNumberIdx);      

6、Reduce

這是一種進階方法，可用于組合數組的元素。主要差別在于回調将累加器作為第一個參數。回調的傳回值成為下一次疊代的累加器。

const arr = [1, 2, 3, 4, 5];


// `acc` is the value of the accumulator
// the acccumulator is return value of the previous callback
// the second argument i.e `0` is the default value
const sum = arr.reduce((acc, num) => acc + num, 0);


console.log(sum); // Console: 15      

7、Every

此方法接受一個傳回布爾值的回調。如果條件對數組中的所有元素都有效，那麼 Every() 将傳回 true。

const arr = [1, 2, 3, 4, 5];


const areAllEven = arr.every(num => num % 2 === 0);


console.log(areAllEven); // Console: false      

8、Some

像前面的方法一樣，這個方法也接受一個傳回布爾值的回調。如果條件對至少一個元素有效，Some() 将傳回 true。

const arr = [1, 2, 3, 4, 5];


const isOneEven = arr.some(num % 2 === 0);


console.log(isOneEven); // true      

9、 Sort

這是一種用于對數組中的元素進行排序的方法。

預設情況下，它按升序對數組進行排序。它需要一個回調函數，有兩個元素——a 和 b。如果 a 小于 b，則傳回 -1，否則傳回 1。

如果它們相等，則傳回 0。

const arr = [1, 2, 3, 4, 5];


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


console.log(descendingArr);      

請記住，與其他數組方法不同，sort 會改變數組。

10、Flat

Flat 用于将嵌套數組展平為單個數組。您可以指定将數組展平的深度。

const arr = [[[1, 2], [3]], [4, 5]];


const flattenedArr = arr.flat(4);


console.log(flattenedArr); // Console [1, 2, 3, 4, 5]      

11、 Reverse

反轉數組中元素的順序。

const arr = [1, 2, 3, 4, 5];


const reversedArr = arr.reverse();


console.log(reversedArr); // Console [5, 4, 3, 2, 1]      

12、Include

如果數組中存在元素，則此方法傳回 true。

const arr = [1, 2, 3, 4, 5];


console.log(arr.includes(5)); // true
console.log(arr.includes(10)); // false      

13、Fill

fill 方法将數組的元素設定為給定值。當我想使用 map/forEach 方法特定次數時，我喜歡使用此方法。

const emptyArr = new Array(5);
// The problem with this is that you get `[empty x 10]`
// You need real values to map over it.


const filledArr = emptyArr.fill(3); // Console [3, 3, 3, 3, 3]      

14、At

此方法傳回給定索引的元素。這與通路（即 arr[1]）元素的傳統方式之間的差別在于它也支援負索引。

const arr = [1, 2, 3, 4, 5];
console.log(arr.at(1)); // 2
console.log(arr.at(-1)); // 5
// Important: Negative indices start from `1`, positive indices start from `0`.      

15、 Concat

此方法用于組合兩個數組。

const arr1 = [1, 2, 3, 4, 5];
const arr2 = [6, 7, 8, 9, 10];


console.log(arr1.concat(arr2)); // Console [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]      

總結

以上就是我今天跟大家分享的15個關于JavaScript的重要數組的方法。

希望對你有幫助，如果你喜歡它的話，請記得分享給你身邊做開發的朋友。

最後，感謝你的閱讀，祝程式設計愉快！

學習更多技能

請點選下方公衆号

​