數組，是JavaScript中常用的數據類型，是JavaScript程序設計中的重要內容，因此，今天我總結了28個JavaScript數組方法的實用清單，希望這些內容，能夠對你學習JavaScript有所幫助。
數組，是JavaScript中常用的數據類型，是JavaScript程序設計中的重要內容，因此，今天我總結了28個JavaScript數組方法的實用清單，希望這些內容，能夠對你學習JavaScript有所幫助。
好了，我們現在就開始今天的內容吧。
01、Array.map()
返回一個新數組，其中包含對該數組中每個元素調用提供的函數的結果。
const list = [??, ??, ??, ??];
list.map((??) => ??); // [??, ??, ??, ??]
// Code
const list = [1, 2, 3, 4];
list.map((el) => el * 2); // [2, 4, 6, 8]
02、Array.filter()
返回一個新數組，其中包含通過所提供函數實現的測試的所有元素。
const list = [??, ??, ??, ??];
list.filter((??) => ?? === ??); // [??, ??]
// Code
const list = [1, 2, 3, 4];
list.filter((el) => el % 2 === 0); // [2, 4]
03、Array.reduce()
將數組減少為單個值，函數返回的值存儲在累加器中（結果/總計）。
const list = [??, ??, ??, ??, ??];
list.reduce((??, ??) => ?? + ??); // ?? + ?? + ?? + ?? + ??
// OR
const list = [1, 2, 3, 4, 5];
list.reduce((total, item) => total + item, 0); // 15
04、Array.reduceRight()
對數組的每個元素執行一個 reducer 函數（需要您提供），從而產生一個輸出值（從右到左）。
const list = [??, ??, ??, ??, ??];
list.reduceRight((??, ??) => ?? + ??); // ?? + ?? + ?? + ?? + ??
// Code
const list = [1, 2, 3, 4, 5];
list.reduceRight((total, item) => total + item, 0); // 15
05、Array.fill()
用靜態值填充數組中的元素。
const list = [??, ??, ??, ??, ??];
list.fill(??); // [??, ??, ??, ??, ??]
// Code
const list = [1, 2, 3, 4, 5];
list.fill(0); // [0, 0, 0, 0, 0]
06、Array.find()
返回數組中滿足提供的測試函數的第一個元素的值，否則返回未定義。
const list = [??, ??, ??, ??, ??];
list.find((??) => ?? === ??); // ??
list.find((??) => ?? === ??); // undefined
// Code
const list = [1, 2, 3, 4, 5];
list.find((el) => el === 3); // 3
list.find((el) => el === 6); // undefined
07、Array.indexOf()
返回可以在數組中找到給定元素的第一個索引，如果不存在則返回 -1。
const list = [??, ??, ??, ??, ??];
list.indexOf(??); // 0
list.indexOf(??); // -1
// Code
const list = [1, 2, 3, 4, 5];
list.indexOf(3); // 2
list.indexOf(6); // -1
08、Array.lastIndexOf()
返回可以在數組中找到給定元素的最后一個索引，如果不存在，則返回 -1。從 fromIndex 開始向后搜索數組。
const list = [??, ??, ??, ??, ??];
list.lastIndexOf(??); // 3
list.lastIndexOf(??, 1); // 0
// Code
const list = [1, 2, 3, 4, 5];
list.lastIndexOf(3); // 2
list.lastIndexOf(3, 1); // -1
09、Array.findIndex()
返回數組中滿足提供的測試函數的第一個元素的索引。否則，返回 -1。
const list = [??, ??, ??, ??, ??];
list.findIndex((??) => ?? === ??); // 0
// You might be thinking how it's different from `indexOf` ??
const array = [5, 12, 8, 130, 44];
array.findIndex((element) => element > 13); // 3
// OR
const array = [{
id: ??
}, {
id: ??
}, {
id: ??
}];
array.findIndex((element) => element.id === ??); // 2
10、Array.includes()
如果給定元素存在于數組中，則返回 true。
const list = [??, ??, ??, ??, ??];
list.includes(??); // true
// Code
const list = [1, 2, 3, 4, 5];
list.includes(3); // true
list.includes(6); // false
11、Array.pop()
刪除并返回數組的最后一個元素。
const list = [??, ??, ??, ??, ??];
list.pop(); // ??
list; // [??, ??, ??, ??]
// Code
const list = [1, 2, 3, 4, 5];
list.pop(); // 5
list; // [1, 2, 3, 4]
12、Array.push()
向數組的末尾添加一個或多個元素，并返回新的長度。
const list = [??, ??, ??, ??, ??];
list.push(??); // 5
list; // [??, ??, ??, ??, ??, ??]
// Code
const list = [1, 2, 3, 4, 5];
list.push(6); // 6
list; // [1, 2, 3, 4, 5, 6]
13、Array.shift()
刪除并返回數組的第一個元素。
const list = [??, ??, ??, ??, ??];
list.shift(); // ??
list; // [??, ??, ??, ??]
// Code
const list = [1, 2, 3, 4, 5];
list.shift(); // 1
list; // [2, 3, 4, 5]
14、Array.unshift()
向數組的開頭添加一個或者多個元素，并返回新的長度。
const list = [??, ??, ??, ??, ??];
list.unshift(??); // 6
list; // [??, ??, ??, ??, ??, ??]
// Code
const list = [1, 2, 3, 4, 5];
list.unshift(0); // 6
list; // [0, 1, 2, 3, 4, 5]
15、Array.splice()
通過刪除或替換現有元素，或在適當位置添加新元素來更改數組的內容。
const list = [??, ??, ??, ??, ??];
list.splice(1, 2); // [??, ??]
list; // [??, ??, ??]
// Code
const list = [1, 2, 3, 4, 5];
list.splice(1, 2); // [2, 3]
list; // [1, 4, 5]
16、Array.slice()
將數組的一部分淺拷貝返回到從開始到結束（不包括結束）選擇的新數組對象中，原始數組不會被修改。
const list = [??, ??, ??, ??, ??];
list.slice(1, 3); // [??, ??]
list; // [??, ??, ??, ??, ??]
// Code
const list = [1, 2, 3, 4, 5];
list.slice(1, 3); // [2, 3]
list; // [1, 2, 3, 4, 5]
17、Array.join()
將數組的所有元素連接成一個字符串。
const list = [??, ??, ??, ??, ??];
list.reverse(); // [??, ??, ??, ??, ??]
list; // [??, ??, ??, ??, ??]
// Code
const list = [1, 2, 3, 4, 5];
list.reverse(); // [5, 4, 3, 2, 1]
list; // [5, 4, 3, 2, 1]
18、Array.reverse()
此數組可以反轉數組中元素的順序。
const list = [??, ??, ??, ??, ??];
list.sort(); // [??, ??, ??, ??, ??]
// This make more sense ??
const array = ['D', 'B', 'A', 'C'];
array.sort(); // ?? ['A', 'B', 'C', 'D']
// OR
const array = [4, 1, 3, 2, 10];
array.sort(); // ?? [1, 10, 2, 3, 4]
array.sort((a, b) => a - b); // ?? [1, 2, 3, 4, 10]
19、Array.sort()
對數組的元素進行就地排序并返回該數組，默認排序順序是根據字符串 Unicode 代碼點。
const list = [??, ??, ??, ??, ??];
list.some((??) => ?? === ??); // true
list.some((??) => ?? === ??); // false
// Code
const list = [1, 2, 3, 4, 5];
list.some((el) => el === 3); // true
list.some((el) => el === 6); // false
20、Array.some()
如果數組中至少有一個元素通過了提供的函數實現的測試，則返回 true。
const list = [??, ??, ??, ??, ??];
list.some((??) => ?? === ??); // true
list.some((??) => ?? === ??); // false
// Code
const list = [1, 2, 3, 4, 5];
list.some((el) => el === 3); // true
list.some((el) => el === 6); // false
21、Array.every()
如果數組中的所有元素都通過了提供的函數實現的測試，則返回 true。
const list = [??, ??, ??, ??, ??];
list.every((??) => ?? === ??); // false
const list = [??, ??, ??, ??, ??];
list.every((??) => ?? === ??); // true
// Code
const list = [1, 2, 3, 4, 5];
list.every((el) => el === 3); // false
const list = [2, 4, 6, 8, 10];
list.every((el) => el%2 === 0); // true
22、Array.from()
從類數組或可迭代對象創建一個新數組。
const list = ??????????;
Array.from(list); // [??, ??, ??, ??, ??]
const set = new Set(['??', '??', '??', '??', '??']);
Array.from(set); // [??, ??, ??]
const range = (n) => Array.from({ length: n }, (_, i) => i + 1);
console.log(range(10)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
23、Array.of()
使用可變數量的參數創建一個新數組，而不管參數的數量或類型。
const list = Array.of(??, ??, ??, ??, ??);
list; // [??, ??, ??, ??, ??]
// Code
const list = Array.of(1, 2, 3, 4, 5);
list; // [1, 2, 3, 4, 5]
24、Array.isArray()
如果給定值是一個數組，則返回 true。
Array.isArray([??, ??, ??, ??, ??]); // true
Array.isArray(??); // false
// Code
Array.isArray([1, 2, 3, 4, 5]); // true
Array.isArray(5); // false
25、Array.at()
返回指定索引處的值。
const list = [??, ??, ??, ??, ??];
list.at(1); // ??
// Return from last ??
list.at(-1); // ??
list.at(-2); // ??
// Code
const list = [1, 2, 3, 4, 5];
list.at(1); // 2
list.at(-1); // 5
list.at(-2); // 4
26、Array.copyWithin()
復制數組中的數組元素，并返回修改后的新數組。
const list = [??, ??, ??, ??, ??];
list.copyWithin(1, 3); // [??, ??, ??, ??, ??]
const list = [??, ??, ??, ??, ??];
list.copyWithin(0, 3, 4); // [??, ??, ??, ??, ??]
// Code
const list = [1, 2, 3, 4, 5];
list.copyWithin(0, 3, 4); // [4, 2, 3, 4, 5]
注意：
第一個參數是開始復制元素的目標。
第二個參數是開始復制元素的索引。
第三個參數是停止復制元素的索引。
27、Array.flat()
返回一個新數組，其中所有子數組元素遞歸連接到指定深度。
const list = [??, ??, [??, ??, ??]];
list.flat(Infinity); // [??, ??, ??, ??, ??]
// Code
const list = [1, 2, [3, 4, [5, 6]]];
list.flat(Infinity); // [1, 2, 3, 4, 5, 6]
28、Array.flatMap()
返回通過將給定的回調函數應用于數組的每個元素而形成的新數組，
const list = [??, ??, [??, ??, ??]];
list.flatMap((??) => [??, ?? + ?? ]); // [??, ????, ??, ????, ??, ????, ??, ????, ??, ????]
// Code
const list = [1, 2, 3];
list.flatMap((el) => [el, el * el]); // [1, 1, 2, 4, 3, 9]
總結
以上就是我今天想跟你分享的28個JavaScript的數組方法，希望這些方法可以幫助你快速的學習JavaScript數組方法的知識，從而可以有效的提高開發效率，改善程序編寫的方式。
如果你覺得我今天的內容，對你有幫助的話，請點贊我，關注我，并將此文與你的朋友們一起來分享它，也許能夠幫助到他。
最后，感謝你的閱讀，編程愉快！
