01、Array.map()
返回一個(gè)新數(shù)組，其中包含對(duì)該數(shù)組中每個(gè)元素調(diào)用提供的函數(shù)的結(jié)果。
const list = [ , , , ];
list.map((??) => ); // [ , , , ]
// Code
const 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((??) => ?? === ); // [ , ]
// Code
const 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((??, ??) => ?? + ??); // + + + +
// OR
const 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((??, ??) => ?? + ??); // + + + +
// Code
const list = [1, 2, 3, 4, 5];
list.reduceRight((total, item) => total + item, 0); // 15
05、Array.fill()
用靜態(tài)值填充數(shù)組中的元素。
const list = [ , , , , ];
list.fill( ); // [ , , , , ]
// Code
const 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
// Code
const list = [1, 2, 3, 4, 5];
list.find((el) => el === 3); // 3
list.find((el) => el === 6); // undefined
07、Array.indexOf()
返回可以在數(shù)組中找到給定元素的第一個(gè)索引，如果不存在則返回 -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()
返回可以在數(shù)組中找到給定元素的最后一個(gè)索引，如果不存在，則返回 -1。從 fromIndex 開始向后搜索數(shù)組。
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()
返回?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
// OR
const array = [{
id:
}, {
id:
}, {
id:
}];
array.findIndex((element) => element.id === ); // 2
10、Array.includes()
如果給定元素存在于數(shù)組中，則返回 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()
從數(shù)組中刪除最后一個(gè)元素并返回該元素。
const list = [ , , , , ];
list.pop(); //
list; // [ , , , ]
// Code
const list = [1, 2, 3, 4, 5];
list.pop(); // 5
list; // [1, 2, 3, 4]
12、Array.push()
將新元素追加到數(shù)組的末尾，并返回新的長(zhǎng)度。
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()
從數(shù)組中刪除第一個(gè)元素并返回該元素。
const list = [ , , , , ];
list.shift(); //
list; // [ , , , ]
// Code
const list = [1, 2, 3, 4, 5];
list.shift(); // 1
list; // [2, 3, 4, 5]
14、Array.unshift()
將新元素添加到數(shù)組的開頭，并返回新長(zhǎng)度。
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()
通過刪除或替換現(xiàn)有元素和/或在適當(dāng)位置添加新元素來更改數(shù)組的內(nèi)容。
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()
將數(shù)組的一部分的淺拷貝返回到從開始到結(jié)束(不包括結(jié)束)選擇的新數(shù)組對(duì)象中，原始數(shù)組不會(huì)被修改。
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()
將數(shù)組的所有元素連接成一個(gè)字符串。
const list = [ , , , , ];
list.join('??'); // " ?? ?? ?? ?? "
// Code
const list = [1, 2, 3, 4, 5];
list.join(', '); // "1, 2, 3, 4, 5"
18、Array.reverse()
反轉(zhuǎn)數(shù)組中元素的順序。
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]
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']
// 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]
20、Array.some()
如果數(shù)組中至少有一個(gè)元素通過了提供的函數(shù)實(shí)現(xiàn)的測(cè)試，則返回 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()
如果數(shù)組中的所有元素都通過了提供的函數(shù)實(shí)現(xiàn)的測(cè)試，則返回 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()
從類數(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; // [ , , , , ]
// Code
const list = Array.of(1, 2, 3, 4, 5);
list; // [1, 2, 3, 4, 5]
24、Array.isArray()
如果給定值是一個(gè)數(shù)組，則返回 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()
復(fù)制數(shù)組中的數(shù)組元素。返回修改后的數(shù)組。
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]
注意：第一個(gè)參數(shù)是開始復(fù)制元素的目標(biāo)。第二個(gè)參數(shù)是開始復(fù)制元素的索引。第三個(gè)參數(shù)是停止復(fù)制元素的索引。
27、Array.flat()
返回一個(gè)新數(shù)組，其中所有子數(shù)組元素遞歸連接到指定深度。
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()
返回通過將給定的回調(diào)函數(shù)應(yīng)用于數(shù)組的每個(gè)元素而形成的新數(shù)組，
const list = [ , , [ , , ]];
list.flatMap((??) => [??, ?? + ?? ]); // [ , , , , , , , , , ]
// Code
const list = [1, 2, 3];
list.flatMap((el) => [el, el * el]); // [1, 1, 2, 4, 3, 9]
總結(jié)
以上就是我今天跟你分享的28個(gè)Javascript 數(shù)組方法，希望對(duì)你有幫助。如果你覺得有用的話，請(qǐng)記得點(diǎn)贊我，關(guān)注我，并將其分享給你身邊的朋友，也許能夠幫助到他。
- End -
京公網(wǎng)安備 11010802030320號(hào)