15個你應該掌握的JavaScript數組方法

英文 | https://medium.com/@sujeetmishraofficial/15-javascript-array-methods-you-should-master-today-1f21a14cfc8a

翻譯 | 楊小二

什麼是數組方法？

數組方法是 JavaScript 内置的函數，可以應用于數組。每種方法都有一個獨特的函數，可以對數組執行更改或計算，進而使你無需從頭開始編寫常用函數。

JavaScript 中的數組方法使用附加到數組變量的點符号運作。因為它們隻是 JavaScript 函數，是以它們總是以括号結尾，括号可以容納可選參數。

這是一個附加到名為 myArray 的簡單數組的方法。

這些示例将假設你知道 javascript 是什麼以及它是如何工作的這些基礎知識。如果你不知道也沒關系，我們都在這裡學習和成長。

現在就讓我們深入挖掘這15種強大的數組方法吧！

1、Array.push()

它的作用：push() 擷取你的數組并将一個或多個元素添加到數組的末尾，然後傳回數組的新長度。此方法将修改你現有的數組。

通過運作 push() 将數字 20 添加到數組中，使用 20 作為參數。

let myArray = [2,4,5,7,9,12,14];
myArray.push(20);      

檢查它是否有效：

console.log(myArray);
[2,4,5,7,9,12,14,20]      

在 myArray 上運作 push() 方法将參數中給定的值添加到數組中。在本例中為 20。當你在控制台中檢查 myArray 時，你将看到該值現在已添加到數組的末尾。

2、Array.concat()

它的作用：concat() 可以将兩個或多個數組合并為一個新數組。它不會修改現有數組，而是建立一個新數組。

取 myArray 并将名為 newArray 的數組合并到其中。

let myArray = [2,4,5,7,9,12,14];
let newArray = [1,2,3];
let result = myArray.concat(newArray);
console.log(result);
[2,4,5,7,9,12,14,1,2,3]      

在處理需要組合的多個數組或值時，此方法非常有效，在使用變量時隻需一個非常簡單的步驟。

3、 Array.join()

它的作用：join() 接受一個數組并連接配接數組的内容，用逗号分隔。結果放在一個字元串中。如果要使用逗号的替代方法，可以指定分隔符。

看看它是如何使用 myArray 工作的。首先使用沒有分隔符參數的預設方法，它将使用逗号。

let myArray = [2,4,5,7,9,12,14];
myArray.join();
"2,4,5,7,9,12,14"      

JavaScript 将輸出一個字元串，數組中的每個值用逗号分隔。你可以在函數中使用參數來更改分隔符。用兩個參數觀察它：一個空格和一個字元串。

myArray.join(' ');
"2 4 5 7 9 12 14"
myArray.join(' and ');
"2 and 4 and 5 and 7 and 9 and 12 and 14"      

第一個示例是一個空格，它是一個你可以輕松閱讀的字元串。

第二個示例使用 (‘ 和 ‘)，這裡有兩件事需要了解。

首先，我們使用單詞“and”來分隔值。其次，“and”字兩邊各有一個空格。在使用 join() 時要記住這一點很重要。

JavaScript 從字面上讀取參數；是以如果這個空間被遺漏了，所有的東西都會被壓縮在一起（即“2and4and5...”等）不是一個非常可讀的輸出！

4、 Array.forEach()

它的作用：forEach() （區分大小寫！）對數組中的每個項目執行一個函數。此函數是你建立的任何函數，類似于使用“for”循環将函數應用于數組，但代碼工作量要少得多。

forEach(); 還有一點。看文法，然後執行一個簡單的函數來示範。

myArray.forEach(function(item){
//code
});      

我們使用的是 myArray，forEach() 使用點符号。你将希望使用的函數放在參數括号内，在示例中為 function(item)。

看看功能（項目）。這是在 forEach() 内部執行的函數，它有自己的參數。我們正在調用參數項。關于這個論點，有兩件事需要了解：

當 forEach() 周遊你的數組時，它會将代碼應用于此參數。将其視為儲存目前元素的臨時變量。

你選擇參數的名稱，它可以命名為你想要的任何名稱。通常，這将命名為更易于了解的名稱，例如“項目”或“元素”。

考慮到這兩件事，請檢視這個簡單的示例。将每個值加 15，并讓控制台顯示結果。

myArray.forEach(function(item){
    console.log(item + 15);
});      

我們在這個例子中使用 item 作為變量，是以函數被編寫為通過 item 為每個值添加 15。然後控制台列印結果。這就是結果的樣子。

16
 17
 18
undefined      

結果是數組中的每個數字，但添加了 15！

5、Array.map()

它的作用：map() 對數組中的每個元素執行一個函數，并将結果放入一個新數組中。

在每個元素上運作一個函數聽起來像 forEach()。這裡的差別是 map() 在運作時建立一個新數組。forEach() 不會自動建立新數組，你必須編寫特定函數才能這樣做。

使用 map() 将 myArray 中每個元素的值加倍，并将它們放入一個新數組中。你将看到相同的 function(item) 文法以進行更多練習。

let myArray = [2,4,5,7,9,12,14];
let doubleArray = myArray.map(function(item){
return item * 2;
});      

在控制台中檢查結果。

console.log(doubleArray);
[4,8,10,14,18,24,28]      

myArray 不變：

console.log(myArray);
[2,4,5,7,9,12,14]      

6、Array.unshift()

它的作用：與 push() 方法的工作方式類似，unshift() 方法接受你的數組并将一個或多個元素添加到數組的開頭而不是結尾，并傳回數組的新長度。此方法将修改你現有的數組。

let myArray = [2,4,5,7,9,12,14];
myArray.unshift(0);      

在将數組記錄到控制台時，你應該會在數組的開頭看到數字 0。

console.log(myArray);
[0, 2,4,5,7,9,12,14]      

7、Array.sort()

它的作用：排序是對數組執行的最常見操作之一，非常有用。JavaScript 的 sort() 數組方法可用于僅用一行代碼對數字，甚至字元串數組進行排序。這個操作到位，通過修改初始數組傳回排序後的數組。這次為 myArray 取一組不同的數字。

let myArray = [12, 55, 34, 65, 10];
myArray.sort((a,b) => a - b);      

由于排序是就地完成的，是以，你不必為排序數組聲明單獨的變量。

console.log(myArray);
[10, 12, 34, 55, 65]      

預設情況下，數組按升序排序，但你可以選擇将自定義函數傳遞給 sort() 方法，以按所需方式對數組進行排序。在這種情況下，我傳遞了一個自定義箭頭函數來按數字升序對數組進行排序。

8、Array.reverse()

它的作用：顧名思義，reverse() 方法用于反轉數組中元素的順序。請注意，這不會反轉數組的内容，而隻會反轉順序本身。這是一個可以更好地了解此方法的示例：

let myArray = [2,4,5,7,9,12,14];
myArray.reverse()      

将輸出記錄到控制台以驗證操作。

console.log(myArray);
[14, 12, 9, 7, 5, 4, 2]      

如你所見，元素的順序已颠倒。以前，最後一個索引處的元素（索引 6 處的元素 14）現在是第0個索引處的元素，依此類推。

9、 Array.slice()

它的作用：slice() 用于檢索數組一部分的淺拷貝。簡單來說，此方法允許你通過索引從數組中選擇特定元素。你可以傳遞要從中檢索的元素的起始索引和元素以及可選的結束索引。

如果不提供結束索引，則将檢索從開始索引到數組末尾的所有元素。此方法傳回一個新數組并且不會修改現有數組。

let myArray = [2,4,5,7,9,12,14];
let slicedArray = myArray.slice(2);      

在上面的代碼中，由于沒有傳遞結束索引參數，是以檢索了從第二個索引到最後一個索引的所有元素。将兩個陣列都記錄到控制台。

console.log(myArray);
console.log(slicedArray);
[2, 4, 5, 7, 9, 12, 14]
[5, 7, 9, 12, 14]      

顯然，slice() 方法沒有修改初始數組，而是傳回一個存儲在 slicedArray 變量中的新數組。這是一個示例，其中結束索引參數也傳遞給 slice() 方法。

let myArray = [2,4,5,7,9,12,14];
let slicedArray = myArray.slice(1, 3);
console.log(slicedArray);
[4, 5]      

10、Array.splice()

它的作用：splice() 是一種有用的數組方法，用于删除或替換數組中的元素。通過指定要删除的元素的索引和數量，它修改了數組。

let myArray = [2,4,5,7,9,12,14];
myArray.splice(2, 3);
console.log(myArray);      

在上面的例子中，myArray 數組是從索引 2 拼接而成的，并且從中删除了 3 個元素。該數組現在包括：

[2, 4, 12, 14]      

要替換元素而不是僅僅删除它們，你可以使用要替換的元素傳遞任意數量的可選參數，如下所示：

let myArray = [2,4,5,7,9,12,14];
myArray.splice(2, 3, 1, 2, 3);
console.log(myArray);
[2, 4, 1, 2, 3, 12, 14]      

11、 Array.filter()

它的作用：filter() 方法是一個有用的數組方法，它接受一個包含測試的函數并傳回一個包含所有通過該測試的元素的新數組。

顧名思義，此方法用于從其他元素中過濾你需要的元素。過濾是使用傳回布爾值的函數完成的。

下面是一個 filter() 方法的示例，該方法用于僅從數組中擷取可被 2 整除的元素。

let myArray = [2,4,5,7,9,12,14];
let divisibleByTwo = myArray.filter((number) => number % 2 === 0);
console.log(divisibleByTwo);      

在上面的例子中，一個箭頭函數作為參數傳遞，它從原始數組中擷取每個數字，并使用除 (%) 和相等 (===) 運算符檢查它是否可以被 2 整除。輸出如下所示：

[2, 4, 12, 14]      

12、Array.reduce()

它的作用：reduce() 是一個數組方法，它接受一個 reducer 函數并在每個數組元素上執行它以在傳回時輸出單個值。

它需要一個帶有累加器變量和目前元素變量的 reducer 函數作為必需的參數。累加器的值在所有疊代中都會被記住，并最終在最後一次疊代後傳回。

此方法的一個流行用例是計算數組中所有元素的總和。該功能的實作如下：

let myArray = [2,4,5,7,9,12,14];
let sumOfNums = myArray.reduce((sum, currentNum) => sum + currentNum, 0);      

0 作為上面例子中的第二個參數傳遞，用作累加器變量的初始值。sumOfNums 變量将包含 reduce() 方法的傳回值，該值預計是數組中所有元素的總和。

console.log(sumOfNums);
53      

13、Array.includes()

它的作用：在數組中搜尋一個元素以檢查它是否存在是一個經常使用的操作，是以，JavaScript 有一個内置的方法，以 contains() 數組方法的形式。使用方法如下：

let myArray = [2,4,5,7,9,12,14];
console.log(myArray.includes(4));
console.log(myArray.includes(2, 1));
console.log(myArray.includes(12, 2));
console.log(myArray.includes(18));      

此方法接受一個必需參數（要搜尋的元素）和一個可選參數（從其開始搜尋的數組索引）。

根據該元素是否存在，它将分别傳回 true 或 false。是以，輸出将是：

true
false
true
false      

14、 Array.indexOf()

它的作用：indexOf() 方法用于找出可以在數組中找到第一次出現指定元素的索引。盡管它類似于includes() 方法，但如果元素不存在于數組中，則此方法傳回數字索引或-1。

let myArray = [2,4,5,7,9,12,14];
console.log(myArray.indexOf(4));
console.log(myArray.indexOf("4"));
console.log(myArray.indexOf(9, 2));      

indexOf() 方法使用嚴格相等來檢查元素是否存在，這意味着值以及資料類型應該相同。可選的第二個參數采用索引開始搜尋。根據這些标準，輸出将如下所示：

1
-1
4      

15、 Array.fill()

它的作用：通常，你可能需要将數組中的所有值設定為靜态值，例如 0。你可以嘗試使用 fill() 方法來代替循環，以達到相同目的。

你可以在具有 1 個必需參數的數組上調用此方法：用于填充數組的值和 2 個可選參數：要填充的開始和結束索引。此方法修改現有數組。

let myArray = [2,4,5,7,9,12,14];
let array1 = myArray.fill(0);
myArray = [2,4,5,7,9,12,14];
let array2 = myArray.fill(0, 2);
myArray = [2,4,5,7,9,12,14];
let array3 = myArray.fill(0, 1, 3);      

在将輸出記錄到控制台時，你将看到：

console.log(array1);
console.log(array2);
console.log(array3);
[0, 0, 0, 0, 0, 0, 0]
[2, 4, 0, 0, 0, 0, 0]
[2, 0, 0, 7, 9, 12, 14]      

JavaScript 之旅的後續步驟

數組是 JavaScript 語言的一個強大部分，這就是為什麼有這麼多内置方法可以讓你作為開發人員的生活更輕松。掌握這15種方法最好的方法就是練習。

如果你喜歡這篇文章，請給我我點個贊。

感謝你的時間，謝謝閱讀，祝程式設計快樂！