27個重要的JavaScript數組函數整理彙總

英文 | https://javascript.plainenglish.io/27-javascript-array-methods-needed-by-every-developer-759f25a30138

翻譯 | 楊小愛

在本文中，我将分享27 個每個開發人員在日常工作中所需的JavaScript 數組方法。在 JavaScript 中，數組是一個變量，用于存儲多個相同或多種類型的項目。

JavaScript 數組方法是内置的 JavaScript 數組函數，可應用于數組。這些内置方法中的每一個都有一個獨特的功能，可以生成一個數組，并使我們無需從頭開始編寫常用函數。

1、Array.isArray()

我們清單中的第一項是 JavaScript 中的 isArray 方法，它确定傳遞的輸入是否為數組。

文法：

在下面的代碼中， arr 将是我們要檢查的輸入，是否為數組。isArray() 函數的結果将是一個布爾值。

​

​Array.isArray(arr)​

​

示例：

Array.isArray([1, 'something', true]);  
// true
Array.isArray({anything: 123}); 
// false
Array.isArray('some string');   
// false
Array.isArray(undefined);  
// false      

2 、length

清單中的第二項不是方法，而是數組的一個重要屬性。我認為它也必須在清單中。從屬性名稱可以清楚地看出，它傳回數組中項目的長度（總數）。

文法：

在下面的代碼中 arr 是我們的輸入數組，我們将通過使用 length 屬性擷取其項目數。

​

​arr.length;​

​

示例：

[].length;
// 0
[1, 'something', true].length;
// 3      

3、forEach()

forEach 方法的行為類似于 for 循環。但是您不必定義它将執行多少次疊代，因為它将執行與輸入數組中的項目數相等的疊代。

文法：

在下面的代碼中， arr 将是我們的輸入數組，forEach() 方法将在該數組上執行。

forEach 方法包含一個回調函數 callbackFn 作為 forEach 方法的參數。

callbackFn 是一個 ES6 箭頭函數。

但是您也可以使用傳統樣式函數。此 callbackFn 将執行與輸入數組中存在的項目數等效的疊代。

在每次疊代中，都會在 callbackFn 的範圍内執行一些代碼。同樣在 callbackFn 的每次疊代參數中，arrItem 和 index 将使用連續的數組項和增量索引值進行更新。

arr.forEach(callbackFn);
const callbackFn = (arrItem, index) => {callbackFn Scope Code Exec}
// combining above statements together into one line of code
arr.forEach((arrItem, index) => {callbackFn Scope Code Exec});      

如果您還不明白，别着急，讓我們看看下面的例子。

例子：

在下面的例子中，我們有一個輸入數組 [‘apple’, ‘banana’, ‘carrot’]，它在 forEach callbackFn 中疊代。

在 callbackFn 的範圍内，我們正在列印 callbackFn 的參數。callbackFn 有 2 個參數，arrItem 和 index。

第二個參數 index 是可選的，如果你不需要它，你可以簡單地省略它。由于 arr 有 3 個項目，是以 callbackFn 将疊代 3 次并在每次疊代時列印 callbackFn 的參數。

['apple', 'banana', 'carrot'].forEach((arrItem, index) => {
  console.log(index + ' => ' + arrItem);
});
// 0 => apple
// 1 => banana
// 2 => carrot      

4、map( )

map() 方法的行為類似于 forEach，但主要差別在于，它傳回一個新數組作為結果。

您在一個數組上執行map()，在map方法callbackFn的範圍内（如果您對callbackFn不清楚，檢視forEach()方法解釋），您執行一些語句。

callbackFn 的每次疊代都會為結果數組傳回一個項目。

文法：

arr 是我們的輸入數組，map 方法将在其上執行，并且在每次疊代時，都會将一個新項目添加到結果數組中，該數組将作為 resultIteration 傳回。

arr.map((arrItem, index) => { return resultIteration });      

例子：

我們對 arr [2, 4, 6, 8, 16] 執行 map 方法，并将結果儲存在變量 mapResult 中。mapResult 将是一個數組，該數組将填充 map 方法每次疊代的結果。

在 map 方法 callbackFn 作用域中，我們将 arr 的每一項乘以 2，并将每次疊代的結果附加到 mapResult 中。

5 次疊代後我們的最終 mapResult 數組将是 [4, 8, 12, 16, 32]。

const arr = [2, 4, 6, 8, 16];
const mapResult = arr.map(arrItem => arrItem * 2);
console.log(mapResult);
// [4, 8, 12, 16, 32]      

5、filter() 

filter() 方法的行為類似于 map() 并傳回一個數組作為結果。但正如名稱所描述的，它傳回一個過濾後的結果數組。

您可以使用過濾器 callbackFn 範圍内的條件來過濾結果數組。

文法：

arr 将是 filter 方法将執行的數組，并且在每次疊代時，都會将一個新項目添加到結果數組中，該結果數組将作為 resultIteration 傳回。

arr.filter((arrItem, index) => { condition to return arrItem });      

例子：

我們對 arr [2, 4, 6, 8, 16] 執行 filter 方法，并将結果儲存在變量 filterResult 中。

我們過濾輸入數組的條件是（ arrItem < 5 OR arrItem > 10 ）。

mapResult 将是一個數組，它将填充符合條件的 arr 項目。

在 map 方法函數代碼塊中，我們将 arr 的每一項乘以 2，并将每次疊代的結果附加到 mapResult 中。

const arr = [2, 4, 6, 8, 16];
const filterResult = 
  arr.filter(arrItem => arrItem < 5 || arrItem > 10);
console.log(mapResult);
// [2, 4, 16]      

6、sort( )

JavaScript 中的 sort() 方法按字母順序對輸入數組進行排序。預設情況下，sort() 函數将值作為字元串進行排序。

const arr = ['banana', 'orange', 'apple', 'mango'];
arr.sort();
// ['apple', 'banana', 'mango', 'orange']      

如果我們嘗試對數字數組進行排序，那麼預設的排序方法結果會有點混亂。

const arr = [22, 14, 0, 100, 89, 201];arr.sort();
// [0, 100, 14, 201, 22, 89]      

如果使用 sort() 方法對數字數組進行排序，則預設情況下将其視為字元串數組。

是以“22”會在“100”之後，因為“22”的2比“100”的1大。我們可以通過提供一個比較函數 (compareFn) 來解決這個問題。

// compareFn for ascending order
const compareFnAsc = (a, b) => a - b;
// compareFn for descending order
const compareFnDes = (a, b) => b - a;
const arr = [22, 14, 0, 100, 89, 201];
arr.sort(compareFnAsc);
// [0, 14, 22, 89, 100, 201]
arr.sort(compareFnDes);
// [201, 100, 89, 22, 14, 0]      

有關一些進階排序示例，請檢視此處：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

7、concat( )

concat() 方法用于合并兩個或多個數組。它不會更改現有數組，而是傳回一個新的結果數組。

文法：

您可以在 concat 方法中将 1 到 N 個值作為參數傳遞。每個值可以是任何類型。結果 concat 方法将這些所有值合并到一個結果數組中。

arr.concat(value);arr.concat(value0, value1, ... , valueN);      

例子：

讓我們看一下 concat 方法的 2 個示例。

// Example 1 
// Concat 2 arrays of string and number type
const letters = ['a', 'b', 'c'];
const numbers = [1, 2, 3];


letters.concat(numbers);
// ['a', 'b', 'c', 1, 2, 3]
// Example 2 
// Concat a string array with 2 values (number and number array)
const letters = ['a', 'b', 'c'];


const alphaNumeric = letters.concat(1, [2, 3]);


console.log(alphaNumeric);
// ['a', 'b', 'c', 1, 2, 3]      

8、every( )

我們清單中的下一個有用的數組方法是every()。該方法測試輸入數組中的所有元素是否都通過了實作的條件。它傳回一個布爾值。

文法：

arr.every(callbackFn);
const callbackFn = (arrItem, index) => {
  condition to check on every arrItem
}      

例子：

在下面的示例中，我們有帶有數字值的 arr1 和 arr2 數組。我們要檢查它們的兩個數組值是否都大于或等于 0。

對于 arr1，結果将為假，因為它包含 -4 和 -1。

是以我們的條件将在那裡失敗，但 arr2 将在每個數組項上傳遞條件，我們将獲得真實的結果。

const arr1 = [89, 0, -4, 34, -1, 10];
const arr2 = [89, 0, 45, 34, 1, 100];
arr1.every(arrItem => arrItem >= 0);
// false
arr2.every(arrItem => arrItem >= 0);
// true      

9、some()

我們清單中的下一個方法是 some()。這個方法和every()完全一樣。不同之處在于我們檢查輸入數組的所有元素的條件，如果有任何元素滿足條件，則傳回 true。

如果輸入數組的元素都沒有通過條件，則傳回 false。文法與 every() 方法相同。

例子：

在這個例子中，我們有 2 個類型為 number 的數組。我們正在檢查的條件與 every() 方法中的最後一個示例相同，任何大于或等于 0 的 arrayItem 值。

這裡因為我們使用 some() 方法，是以，如果任何項目将滿足我們的條件，則為真，否則為假。

const arr1 = [89, 0, 44, 34, -1, 10];
const arr2 = [-8, -45, -1, -100, -9];
arr1.some(arrItem => arrItem >= 0);
// true
arr2.some(arrItem => arrItem >= 0);
// false      

10、includes( )

include() 方法檢查輸入數組是否在其條目中包含某個值，并傳回一個布爾值。

例子：

const arr = [1, "2", 3, 4, 5];
// Type of matching argument should match with the array entry
// In the code below 2 is of type number but in arr "2" is stringconsole.log(arr.includes(2));
// false
console.log(arr.includes("2"));
// true      

11、join( )

join() 方法通過連接配接輸入數組中的所有條目來傳回一個新字元串。如果數組隻有一項，則該項将在不使用分隔符的情況下傳回。

将分隔符參數傳遞給 join 方法是可選的。無論您将在 join 方法中傳遞什麼參數字元串，輸入數組的所有條目都将使用該字元串連接配接起來。

文法：

arr.join();arr.join(separator);      

示例：

const arr = ['Hello', 'World', '!'];
arr.join();      
// 'Hello,World,!'
arr.join(', ');  
// 'Hello, World, !'
arr.join(' + '); 
// 'Hello + World + !'
arr.join('');    
// 'HelloWorld!'
arr.join(' ');    
// 'Hello World !'      

12、reduce() 

reduce() 方法執行一個 reducer 功能，由使用者應用于輸入數組的項目。在數組的所有項目上運作 reducer 的最終結果傳回一個值。

我認為了解 reduce() 方法案例的最簡單方法是傳回數組中所有項目的總和。

這裡的reducer函數會周遊每一個數組項，在每一步都将目前數組項的值加到上一步的結果中（這個結果是前面所有步驟的運作總和），直到沒有更多的項要添加。

文法：

輸入數組 arr 對其執行 reduce() 方法。reduce() 方法有一個回調函數 (callbackFn) 作為參數。

這個 callbackFn 基本上是 reducer 函數，它累加輸入 arr 的所有值并傳回單個值。

reduce() 方法的第二個參數是初始值 (initVal)，這是一個可選參數。

現在 reducer 函數/回調函數 (callbackFn) 有 4 個參數。

第一個參數 total 是上一次調用 callbackFn 的值。

第二個參數是目前數組項 (currArrItem) 的值。

第三個參數是索引，它是可選的。

最後一個參數是輸入數組（ arr ），它也是可選的。

const callbackFn = (total, currArrItem, index, arr) => { ... }
arr.reduce(callbackFn, initVal)
// Combining above statements into one statement
arr.reduce((total, currArrItem, index, arr) => { ... }, initVal)      

讓我們看一下示例以更好地了解 reduce() 方法。

例子：

在下面的示例中，我們使用 reduce() 方法來累積輸入 arr。

const arr = [1, 2, 3, 4];
const reducer = (prevVal, currVal) => prevVal + currVal;
arr.reduce(reducer);
// 10
// In the code below initVal is set to 5, which means that we have // to init the sum with initial value 5: 5 + 1 + 2 + 3 + 4 arr.reduce(reducer, 5);
// 15      

13、find()

清單中的下一個 JavaScript 數組方法是 find()。它傳回輸入數組中滿足 find 方法 callbackFn 中給定條件的第一個元素的值。

如果沒有值滿足 callbackFn 的條件，則傳回 undefined。

文法：

arr.find((arrItem) => condition to check on arrItem);      

示例：

const arr = [5, 10, 100, 12, 8, 130, 44];
const result = arr.find(arrItem => arrItem > 10);
console.log(result);
// 100      

14、findIndex( )

findIndex() 方法傳回輸入數組中滿足 find 方法 callbackFn 中給定條件的第一個元素的索引。否則傳回-1，表示沒有數組項通過條件檢查。文法将與 find() 方法保持相同，隻是傳回結果會有所不同。

例子：

const arr = [5, 10, 100, 12, 8, 130, 44];
const result1 = arr.findIndex(arrItem => arrItem > 10);
const result2 = arr.findIndex(arrItem => arrItem > 1000);
console.log(result1);
// 2
console.log(result2);
// -1      

15、indexOf( )

這類似于 findIndex() 方法，但不同之處在于 indexOf() 方法傳回可以在輸入數組中找到給定元素（作為 indexOf() 方法的參數傳遞）的第一個索引。如果未找到，則傳回 -1。

示例：

const arr = [5, 10, 100, 12, 8, 130, 44];
arr.indexOf(12);
// 3
// As the input argument '12' is of type string and the input array // arr elements are of type number so there will be no match in 
// input arr
arr.indexOf('12');
// -1      

16、fill( )

fill() 方法使用靜态值更改輸入數組中的所有元素。此方法傳回修改後的數組。

文法：

傳遞給 fill() 方法需要第一個參數。如果我們沒有在 fill() 方法中傳遞第二個和第三個參數，那麼第二個參數将預設為 0 (startIndex)，第三個參數将是數組 (arr.length) 索引中的最後一項。

arr.fill(value)
// default startIndex = 0
arr.fill(value, startIndex)
// default endIndex is arr.length
arr.fill(value, startIndex, endIndex)      

示例：

const arr1 = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
arr1.fill(0);
// [0, 0, 0, 0, 0, 0, 0, 0]
const arr2 = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
arr2.fill(0, 5);
// ['A', 'B', 'C', 'D', 'E', 0, 0, 0]
const arr3 = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
arr3.fill(0, 5, 7);
// ['A', 'B', 'C', 'D', 'E', 0, 0, 'H']
const arr4 = [1, 2, 3, 4, 5];
arr4.fill();
//[undefined, undefined, undefined, undefined, undefined]      

17、slice()

slice() 方法是一個非常有用的 JavaScript 數組方法。它為 slice 方法中傳遞的給定參數制作原始數組的副本。

這些參數定義了新數組副本的開始和結束索引。不會修改原始數組。

文法：

arr.slice()
arr.slice(startIndex)
arr.slice(startIndex, endIndex)      

示例：

const arr = ['rats', 'sheep', 'cows', 'chickens', 'dogs', 1001];
arr.slice();
// ['rats', 'sheep', 'cows', 'chickens', 'dogs', 1001]
arr.slice(3);
// ['chickens', 'dogs', 1001]
arr.slice(2, 5);
// ['cows', 'chickens', 'dogs']
arr.slice(-4);
// ['cows', 'chickens', 'dogs', 1001]      

18、splice()

splice() 方法通過删除或替換現有項目和/或添加新項目來更改數組的内容。不會修改原始數組。

文法：

arr.splice(startIndex)
arr.splice(startIndex, deleteCount)
arr.splice(startIndex, deleteCount, item1)
arr.splice(startIndex, deleteCount, item1, ..., itemN)      

示例：

// Example 1
// Remove 0 items before index 2 & insert "drum"
let arr = ['angel', 'clown', 'mandarin', 'sturgeon'];
let removedArr = arr.splice(2, 0, 'drum');
// arr: ["angel", "clown", "drum", "mandarin", "sturgeon"]
// removedArr: []


// Example 2
// Remove 0 items before index 2 & insert "drum", "guitar"
let arr = ['angel', 'clown', 'mandarin', 'sturgeon'];
let removedArr = arr.splice(2, 0, 'drum', 'guitar');
// arr: ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"]
// removedArr: []


// Example 3
// Remove 1 element at index 3
let arr = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];
let removedArr = myFish.splice(3, 1);
// arr: ["angel", "clown", "drum", "sturgeon"]
// removedArr: ["mandarin"]


// Example 4
// Remove 1 element at index 2 & insert "trumpet"
let arr = ['angel', 'clown', 'drum', 'sturgeon'];
let removedArr = arr.splice(2, 1, 'trumpet');
// arr: ["angel", "clown", "trumpet", "sturgeon"]
// removedArr: ["drum"]


// Example 5
// Remove 2 items from index 0 & insert "parrot", "anemone", "blue"
let arr = ['angel', 'clown', 'trumpet', 'sturgeon'];
let removedArr = arr.splice(0, 2, 'parrot', 'anemone', 'blue');
// arr: ["parrot", "anemone", "blue", "trumpet", "sturgeon"]
// removedArr: ["angel", "clown"]      

19、reverse() 

顧名思義，reverse() 方法反轉輸入數組。

例子：

const arr1 = [1, 2, 3];
arr1.reverse();
// [3, 2, 1]
const arr2 = ['1', '4', '3', 1, 'some string', 100];
arr2.reverse();
// [100, 'some string', 1, '3', '4', '1']      

20、push() 

JavaScript 中的 push() 方法将一個或多個（任何類型的）項目添加到數組的末尾，并傳回數組中項目的更新總數。

文法：

arr.push(value);arr.push(value0, value1, ... , valueN);      

示例：

const animals = ['cats', 'rats', 'sheep'];
animals.push('cows');
// 4
console.log(animals);
// ['cats', 'rats', 'sheep', 'cows']
animals.push('chickens', 'dogs', 1001);
// 7
console.log(animals);
// ['cats', 'rats', 'sheep', 'cows', 'chickens', 'dogs', 1001]      

21、pop()

pop() 方法從數組中删除最後一項并傳回該項。輸入數組的長度減1。

例子：

const arr = ['rats', 'sheep', 'cows', 'chickens', 'dogs', 1001];
arr.pop();
// 1001
console.log(arr);
// ['rats', 'sheep', 'cows', 'chickens', 'dogs']      

22、shift() 

JavaScript 的 shift() 方法從數組中删除第一項并傳回該項。 輸入數組的長度減1，和pop()方法一樣。

例子：

const arr = ['rats', 'sheep', 'cows', 'chickens', 'dogs', 1001];
arr.shift();
// 'rats'
console.log(arr);
// ['sheep', 'cows', 'chickens', 'dogs', 1001]      

23、unshift()

unshift() 方法将一項或多項添加到數組的開頭，并傳回數組的新長度。 文法與 push() 相同。 push() 方法隻是在數組的末尾，但 unshift() 方法在開頭添加。

例子：

const animals = ['cats', 'rats', 'sheep'];
animals.unshift('cows');
// 4
console.log(animals);
// ['cows', 'cats', 'rats', 'sheep']
animals.unshift('chickens', 'dogs', 1001);
// 7
console.log(animals);
// ['chickens', 'dogs', 1001, 'cows', 'cats', 'rats', 'sheep']      

24、Array.of( )

Array.of() 方法從可變數量的參數建立一個新的 Array 執行個體，而不管參數的數量或類型。

例子：

Array.of(1);         
// [1]
Array.of(1, 2, 3);   
// [1, 2, 3]
Array.of(undefined); 
// [undefined]      

25、Array.from( )

Array.from() 靜态方法從類數組或可疊代對象建立一個新的、淺複制的 Array 執行個體。

文法：

​

​Array.from(value, callbackFn)​

​

示例：

Array.from('hello');
// ['h', 'e', 'l', 'l', 'o']
Array.from([1, 2, 3], arrItem => arrItem * 4);
// [4, 8, 12]      

26、flat()

JavaScript 的 flat()方法建立一個新數組，其中所有子數組項以遞歸方式連接配接到指定深度。

句法：

指定嵌套數組結構應展平的深度的深度級别。 如果沒有參數傳遞給 flat() 方法，則預設深度為 1。 或者您可以傳遞任何深度參數。

​

​arr.flat()​

​​

​arr.flat(depth)​

​

示例：

讓我們看一些 JavaScript 中 flat() 方法的例子。

// Example 1
const arr1 = [0, 1, 2, [3, 4]];
console.log(arr1.flat());
// [0, 1, 2, 3, 4]
// Example 2
const arr2 = [0, 1, 2, [[[3, 4]]]];
console.log(arr2.flat(2));
// [0, 1, 2, [3, 4]]
console.log(arr2.flat(3));
// [0, 1, 2, 3, 4]      

27、at()

at() 方法将一個整數作為參數，并傳回輸入數組中該索引處的項目。 at() 方法的參數可以是正數或負數。 負整數從輸入數組的最後一項開始計數。

文法：

​

​arr.at(index)​

​

示例：

const arr = ['chickens', 'dogs', 1001, 'cows', 'cats', 'sheep']
arr.at(1);
// 'dogs'
arr.at(-1);
// 'sheep'
arr.at(2);
// 1001
arr.at(-2);
// 'cats'
arr.at(-100);
// undefined      

結論

如果您有擴充此函數清單的想法，請随時在留言區中分享您的想法。 我很樂意根據您的建議來增加并豐富此清單。 

最後，感謝您的閱讀，如果您覺得今天内容對您有用的話，也請您分享給您身邊的做開發的朋友。