英文 | https://javascript.plainenglish.io/17-must-know-array-methods-in-javascript-37f7033ee721

翻譯 | 小愛

1、 Array.find()

const cars = [  {brand: "Porsche", price: 105000},  {brand: "BMW", price: 32000},  {brand: "Skoda", price: 15000},  {brand: "Toyota", price: 11500}];const affordableCar = cars.find(car => car.price <= 20000);console.log(affordableCar)

輸出：

{ brand:"Skoda", price:15000}

2、Array.concat()

你可以使用.concat()方法將兩個(gè)或多個(gè)數(shù)組合并在一起。例如：

const nums1 = [1,2,3];const nums2 = [4,5,6];const merged = nums1.concat(nums2);console.log(merged);

3、 Array.findIndex（）

使用.findIndex()方法獲取第一個(gè)滿足條件的元素的索引。例如，讓我們找到列表中的第一個(gè)數(shù)字 3：

const nums = [1,2,3,3,3,2,1]const idx = nums.findIndex( num => num == 3 )console.log(idx)

輸出：

2

如果不存在與條件匹配的此類元素，則該.findIndex()方法返回-1。

4、Array.forEach()

這個(gè)超級(jí)好用，它可以讓你擺脫有時(shí)可能合適的常規(guī) for 循環(huán)。

正如其名稱.forEach()表明，它被用于執(zhí)行一個(gè)動(dòng)作的陣列的每個(gè)元件。例如，讓我們打印數(shù)組的所有數(shù)字：

const nums = [1, 2, 3]; nums.forEach( num => console.log(num) );

輸出：

1 2 3

5、 Array.join()

你可以使用該.join()方法連接一組字符串以形成一個(gè)字符串。

例如，讓我們將單詞合并成一個(gè)句子。要形成一個(gè)句子，你需要用空格分隔每個(gè)單詞。這可以通過將空格作為參數(shù)傳遞給.join()方法來完成：

const words = ["This", "is", "a test"];const sentence = words.join(" "); // separate words by blank spacesconsole.log(sentence)

輸出：

This is a test

6、 Array.map（）

你可以使用.map()method 對(duì)每個(gè)元素執(zhí)行一個(gè)操作（即運(yùn)行一個(gè)函數(shù)）并將結(jié)果放入一個(gè)新數(shù)組中。

例如，讓我們將一個(gè)數(shù)字?jǐn)?shù)組轉(zhuǎn)換為一個(gè)新的平方數(shù)數(shù)組：

const nums = [1,2,3,4,5];const squaredNums = nums.map( number => number * number );console.log(squaredNums);

輸出：

[1, 4, 9, 16, 25]

7、Array.reduce()

該.reduce()方法通過為數(shù)組的每個(gè)元素執(zhí)行一個(gè)函數(shù)并累加結(jié)果，將數(shù)組縮減為單個(gè)值。

例如，讓我們計(jì)算數(shù)組中數(shù)字的總和：

const nums = [1,2,3,4,5,6];const numSum = nums.reduce((sum, num) => sum + num);console.log(numSum);

輸出：

21

如果你不熟悉 reduce，讓我們檢查一下上面的代碼。該.reduce()方法為你提供了兩個(gè)值：

• 第一個(gè)值是累積的“總”值。在這種情況下，它被稱為sum。隨著該.reduce()方法通過數(shù)字工作，該值逐漸增加。

• 第二個(gè)值是 reduce 操作的當(dāng)前元素。在這種情況下，它被稱為num。

• 簡而言之，所有.reduce()要做的就是遍歷數(shù)組的每個(gè)元素，并將每個(gè)值添加到 中sum以獲得數(shù)字的總和。

請注意，.reduce()可以選擇采用初始值。例如，你可以出于某種原因開始計(jì)算以下數(shù)字的總和：

const nums = [1,2,3,4,5,6];const numSum = nums.reduce((sum, num) => sum + num, 1000);console.log(numSum);

輸出：

1021

8、 Array.flat()

當(dāng)你有一個(gè)多維數(shù)組時(shí)，你可以使用該.flat()方法將其展平。例如：

const nums = [0，1，2，[3，4]];console.log(nums.flat());

輸出：

[0, 1, 2, 3, 4]

你還可以指定要將數(shù)組維度壓縮到的深度。例如，讓我們將這個(gè) 4 維數(shù)組展平為 2 維：

const nums = [0, 1, 2, [[[[[3, 4]]]]]];console.log(nums.flat(2));

輸出：

[0，1，2，[3，4]]

9、Array.push()

使用.push()方法將新項(xiàng)目添加到數(shù)組中。例如：

let nums = [1, 2, 3]
nums.push(4)nums.push(5, 6)
console.log(nums)

輸出：

[1, 2, 3, 4, 5, 6]

10、 Array.pop()

使用方法刪除并返回?cái)?shù)組的最后一個(gè)元素.pop()。例如：

let nums = [1, 2, 3, 4, 5, 6]const lastNum = nums.pop()console.log(`Removed ${lastNum}, now the numbers are ${nums}`)

輸出：

Removed 6, now the numbers are 1,2,3,4,5

11、 Array.shift()

要?jiǎng)h除數(shù)組的第一個(gè)元素，你可以使用 .shift() 方法。例如：

const nums = [1, 2, 3, 4];const first = nums.shift();
console.log(nums);console.log(first);

輸出：

[2, 3, 4] 1

12、 Array.unshift（）

該.unshift()方法將元素添加到數(shù)組的開頭+ 返回?cái)?shù)組的新長度。例如：

const nums = [1, 2, 3];nums.unshift(4, 5);console.log(nums);

輸出：

[4, 5, 1, 2, 3]

13、 Array.filter()

顧名思義，你可以根據(jù)條件過濾數(shù)組的元素。結(jié)果，在過濾元素所在的位置創(chuàng)建了一個(gè)新數(shù)組。

例如，讓我們從數(shù)字列表中過濾所有偶數(shù)：

const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];const evenNums = nums.filter( num => num % 2 == 0);console.log(evenNums);

輸出：

[2, 4, 6, 8, 10]

14、 Array.sort()

按.sort()原樣使用方法對(duì)字符串?dāng)?shù)組進(jìn)行排序：

const fruits = ["Banana", "Apple", "Clementine"]const sorted = fruits.sort()console.log(sorted)

輸出：

["Apple", "Banana", "Clementine"]

請注意，你不能只.sort()按原樣對(duì)數(shù)字?jǐn)?shù)組進(jìn)行排序！相反，你必須為該.sort()方法提供一個(gè)比較函數(shù)，以便它知道如何對(duì)數(shù)字進(jìn)行實(shí)際排序。

例如，讓我們按升序?qū)?shù)字列表進(jìn)行排序：

const nums = [1, 2, 3, 4]const sorted = nums.sort((a, b) => a - b)console.log(sorted)

15、 Array.reverse()

要反轉(zhuǎn)數(shù)組，你可以簡單地使用該.reverse()方法。舉個(gè)例子：

const nums = [1, 2, 3, 4]const reversed = nums.reverse()console.log(reversed)

輸出：

[4, 3, 2, 1]

16、Array.every()

你可以使用.every()method 來檢查數(shù)組的每個(gè)元素是否都通過了條件。如果有，則該方法返回true，否則返回false。

例如，讓我們檢查是否所有人都餓了：

const moods = ["hungry", "hungry", "hungry"];const allHungry = moods.every(mood => mood === "hungry");
console.log(allHungry);

輸出：

true

17、Array.some()

該.some()方法與前面的.every()方法類似。不同之處在于，如果數(shù)組中的一個(gè)或多個(gè)元素滿足條件，則.some()返回true，false否則返回。

例如，讓我們檢查是否所有人都餓了：

const moods = ["hungry", "sleepy", "thirsty"];const someHungry = moods.some(mood => mood === "hungry");
console.log(someHungry);

輸出：

true

總結(jié)

希望我今天分享的內(nèi)容，能夠?qū)δ愕膶W(xué)習(xí)與工作有所啟發(fā)，也希望你今天學(xué)到了新東西。

謝謝你的閱讀，祝你編碼愉快！

學(xué)習(xí)更多技能

請點(diǎn)擊下方公眾號(hào)