https://devsmitra.medium.com/28-javascript-array-hacks-a-cheat-sheet-for-developer-ba7d30a5fed9

翻譯 | 楊小愛

數(shù)組，是JavaScript中常用的數(shù)據(jù)類型，是JavaScript程序設(shè)計(jì)中的重要內(nèi)容，因此，今天我總結(jié)了28個(gè)JavaScript數(shù)組方法的實(shí)用清單，希望這些內(nèi)容，能夠?qū)δ銓W(xué)習(xí)JavaScript有所幫助。

好了，我們現(xiàn)在就開始今天的內(nèi)容吧。

01、Array.map()

返回一個(gè)新數(shù)組，其中包含對(duì)該數(shù)組中每個(gè)元素調(diào)用提供的函數(shù)的結(jié)果。

const list = [??, ??, ??, ??];list.map((??) => ??); // [??, ??, ??, ??]// Codeconst list = [1, 2, 3, 4];list.map((el) => el * 2); // [2, 4, 6, 8]

02、Array.filter()

返回一個(gè)新數(shù)組，其中包含通過所提供函數(shù)實(shí)現(xiàn)的測(cè)試的所有元素。

const list = [??, ??, ??, ??];list.filter((??) => ?? === ??); // [??, ??]// Codeconst list = [1, 2, 3, 4];list.filter((el) => el % 2 === 0); // [2, 4]

03、Array.reduce()

將數(shù)組減少為單個(gè)值，函數(shù)返回的值存儲(chǔ)在累加器中（結(jié)果/總計(jì)）。

const list = [??, ??, ??, ??, ??];list.reduce((??, ??) => ?? + ??); // ?? + ?? + ?? + ?? + ??// ORconst list = [1, 2, 3, 4, 5];list.reduce((total, item) => total + item, 0); // 15

04、Array.reduceRight()

對(duì)數(shù)組的每個(gè)元素執(zhí)行一個(gè) reducer 函數(shù)（需要您提供），從而產(chǎn)生一個(gè)輸出值（從右到左）。

const list = [??, ??, ??, ??, ??];list.reduceRight((??, ??) => ?? + ??); // ?? + ?? + ?? + ?? + ??// Codeconst list = [1, 2, 3, 4, 5];list.reduceRight((total, item) => total + item, 0); // 15

05、Array.fill()

用靜態(tài)值填充數(shù)組中的元素。

const list = [??, ??, ??, ??, ??];list.fill(??); // [??, ??, ??, ??, ??]// Codeconst list = [1, 2, 3, 4, 5];list.fill(0); // [0, 0, 0, 0, 0]

06、Array.find()

返回?cái)?shù)組中滿足提供的測(cè)試函數(shù)的第一個(gè)元素的值，否則返回未定義。

const list = [??, ??, ??, ??, ??];list.find((??) => ?? === ??); // ??list.find((??) => ?? === ??); // undefined// Codeconst list = [1, 2, 3, 4, 5];list.find((el) => el === 3); // 3list.find((el) => el === 6); // undefined

07、Array.indexOf()

返回可以在數(shù)組中找到給定元素的第一個(gè)索引，如果不存在則返回 -1。

const list = [??, ??, ??, ??, ??];list.indexOf(??); // 0list.indexOf(??); // -1// Codeconst list = [1, 2, 3, 4, 5];list.indexOf(3); // 2list.indexOf(6); // -1

08、Array.lastIndexOf()

返回可以在數(shù)組中找到給定元素的最后一個(gè)索引，如果不存在，則返回 -1。從 fromIndex 開始向后搜索數(shù)組。

const list = [??, ??, ??, ??, ??];list.lastIndexOf(??); // 3list.lastIndexOf(??, 1); // 0// Codeconst list = [1, 2, 3, 4, 5];list.lastIndexOf(3); // 2list.lastIndexOf(3, 1); // -1

09、Array.findIndex()

返回?cái)?shù)組中滿足提供的測(cè)試函數(shù)的第一個(gè)元素的索引。否則，返回 -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// ORconst array = [{  id: ??}, {  id: ??}, {  id: ??}];array.findIndex((element) => element.id === ??); // 2

10、Array.includes()

如果給定元素存在于數(shù)組中，則返回 true。

const list = [??, ??, ??, ??, ??];list.includes(??); // true// Codeconst list = [1, 2, 3, 4, 5];list.includes(3); // truelist.includes(6); // false

11、Array.pop()

刪除并返回?cái)?shù)組的最后一個(gè)元素。

const list = [??, ??, ??, ??, ??];list.pop(); // ??list; // [??, ??, ??, ??]// Codeconst list = [1, 2, 3, 4, 5];list.pop(); // 5list; // [1, 2, 3, 4]

12、Array.push()

向數(shù)組的末尾添加一個(gè)或多個(gè)元素，并返回新的長(zhǎng)度。

const list = [??, ??, ??, ??, ??];list.push(??); // 5list; // [??, ??, ??, ??, ??, ??]// Codeconst list = [1, 2, 3, 4, 5];list.push(6); // 6list; // [1, 2, 3, 4, 5, 6]

13、Array.shift()

刪除并返回?cái)?shù)組的第一個(gè)元素。

const list = [??, ??, ??, ??, ??];list.shift(); // ??list; // [??, ??, ??, ??]// Codeconst list = [1, 2, 3, 4, 5];list.shift(); // 1list; // [2, 3, 4, 5]

14、Array.unshift()

向數(shù)組的開頭添加一個(gè)或者多個(gè)元素，并返回新的長(zhǎng)度。

const list = [??, ??, ??, ??, ??];list.unshift(??); // 6list; // [??, ??, ??, ??, ??, ??]// Codeconst list = [1, 2, 3, 4, 5];list.unshift(0); // 6list; // [0, 1, 2, 3, 4, 5]

15、Array.splice()

通過刪除或替換現(xiàn)有元素，或在適當(dāng)位置添加新元素來更改數(shù)組的內(nèi)容。

const list = [??, ??, ??, ??, ??];list.splice(1, 2); // [??, ??]list; // [??, ??, ??]// Codeconst list = [1, 2, 3, 4, 5];list.splice(1, 2); // [2, 3]list; // [1, 4, 5]

16、Array.slice()

將數(shù)組的一部分淺拷貝返回到從開始到結(jié)束（不包括結(jié)束）選擇的新數(shù)組對(duì)象中，原始數(shù)組不會(huì)被修改。

const list = [??, ??, ??, ??, ??];list.slice(1, 3); // [??, ??]list; // [??, ??, ??, ??, ??]// Codeconst list = [1, 2, 3, 4, 5];list.slice(1, 3); // [2, 3]list; // [1, 2, 3, 4, 5]

17、Array.join()

將數(shù)組的所有元素連接成一個(gè)字符串。

const list = [??, ??, ??, ??, ??];list.join('??'); // "??????????????????"// Codeconst list = [1, 2, 3, 4, 5];list.join(', '); // "1, 2, 3, 4, 5"

18、Array.reverse()

此數(shù)組可以反轉(zhuǎn)數(shù)組中元素的順序。

const list = [??, ??, ??, ??, ??];list.reverse(); // [??, ??, ??, ??, ??]list; // [??, ??, ??, ??, ??]// Codeconst list = [1, 2, 3, 4, 5];list.reverse(); // [5, 4, 3, 2, 1]list; // [5, 4, 3, 2, 1]

19、Array.sort()

對(duì)數(shù)組的元素進(jìn)行就地排序并返回該數(shù)組，默認(rèn)排序順序是根據(jù)字符串 Unicode 代碼點(diǎn)。

const list = [??, ??, ??, ??, ??];list.sort(); // [??, ??, ??, ??, ??]// This make more sense ??const array = ['D', 'B', 'A', 'C'];array.sort(); // ?? ['A', 'B', 'C', 'D']// ORconst array = [4, 1, 3, 2, 10];array.sort(); // ?? [1, 10, 2, 3, 4]array.sort((a, b) => a - b); // ?? [1, 2, 3, 4, 10]

20、Array.some()

如果數(shù)組中至少有一個(gè)元素通過了提供的函數(shù)實(shí)現(xiàn)的測(cè)試，則返回 true。

const list = [??, ??, ??, ??, ??];list.some((??) => ?? === ??); // truelist.some((??) => ?? === ??); // false// Codeconst list = [1, 2, 3, 4, 5];list.some((el) => el === 3); // truelist.some((el) => el === 6); // false

21、Array.every()

如果數(shù)組中的所有元素都通過了提供的函數(shù)實(shí)現(xiàn)的測(cè)試，則返回 true。

const list = [??, ??, ??, ??, ??];list.every((??) => ?? === ??); // falseconst list = [??, ??, ??, ??, ??];list.every((??) => ?? === ??); // true// Codeconst 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()

從類數(shù)組或可迭代對(duì)象創(chuàng)建一個(gè)新數(shù)組。

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()

使用可變數(shù)量的參數(shù)創(chuàng)建一個(gè)新數(shù)組，而不管參數(shù)的數(shù)量或類型。

const list = Array.of(??, ??, ??, ??, ??);list; // [??, ??, ??, ??, ??]// Codeconst list = Array.of(1, 2, 3, 4, 5);list; // [1, 2, 3, 4, 5]

24、Array.isArray()

如果給定值是一個(gè)數(shù)組，則返回 true。

Array.isArray([??, ??, ??, ??, ??]); // trueArray.isArray(??); // false// CodeArray.isArray([1, 2, 3, 4, 5]); // trueArray.isArray(5); // false

25、Array.at()

返回指定索引處的值。

const list = [??, ??, ??, ??, ??];list.at(1); // ??// Return from last ??list.at(-1); // ??list.at(-2); // ??// Codeconst list = [1, 2, 3, 4, 5];list.at(1); // 2list.at(-1); // 5list.at(-2); // 4

26、Array.copyWithin()

復(fù)制數(shù)組中的數(shù)組元素，并返回修改后的新數(shù)組。

const list = [??, ??, ??, ??, ??];list.copyWithin(1, 3); // [??, ??, ??, ??, ??]const list = [??, ??, ??, ??, ??];list.copyWithin(0, 3, 4); // [??, ??, ??, ??, ??]// Codeconst list = [1, 2, 3, 4, 5];list.copyWithin(0, 3, 4); // [4, 2, 3, 4, 5]

注意：

第一個(gè)參數(shù)是開始復(fù)制元素的目標(biāo)。

第二個(gè)參數(shù)是開始復(fù)制元素的索引。

第三個(gè)參數(shù)是停止復(fù)制元素的索引。

27、Array.flat()

返回一個(gè)新數(shù)組，其中所有子數(shù)組元素遞歸連接到指定深度。

const list = [??, ??, [??, ??, ??]];list.flat(Infinity); // [??, ??, ??, ??, ??]// Codeconst list = [1, 2, [3, 4, [5, 6]]];list.flat(Infinity); // [1, 2, 3, 4, 5, 6]

28、Array.flatMap()

返回通過將給定的回調(diào)函數(shù)應(yīng)用于數(shù)組的每個(gè)元素而形成的新數(shù)組，

const list = [??, ??, [??, ??, ??]];list.flatMap((??) => [??, ?? + ?? ]); // [??, ????, ??, ????, ??, ????, ??, ????, ??, ????]// Codeconst list = [1, 2, 3];list.flatMap((el) => [el, el * el]); // [1, 1, 2, 4, 3, 9]

總結(jié)

以上就是我今天想跟你分享的28個(gè)JavaScript的數(shù)組方法，希望這些方法可以幫助你快速的學(xué)習(xí)JavaScript數(shù)組方法的知識(shí)，從而可以有效的提高開發(fā)效率，改善程序編寫的方式。

如果你覺得我今天的內(nèi)容，對(duì)你有幫助的話，請(qǐng)點(diǎn)贊我，關(guān)注我，并將此文與你的朋友們一起來分享它，也許能夠幫助到他。

最后，感謝你的閱讀，編程愉快！

學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)

28 個(gè)Javascript 數(shù)組方法清單列表

學(xué)習(xí)更多技能請(qǐng)點(diǎn)擊下方公眾號(hào)

學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)