12種JavaScript中最常用的數(shù)組操作整理匯總
數(shù)組是最常見的數(shù)據(jù)結(jié)構(gòu)之一，我們需要絕對自信地使用它。在這里，我將列出 JavaScript 中最重要的幾個(gè)數(shù)組常用操作片段，包括數(shù)組長度、替換元素、去重以及許多其他內(nèi)容。
1、數(shù)組長度
大多數(shù)人都知道可以像這樣得到數(shù)組的長度：
const arr = [1, 2, 3];
console.log(arr.length); // 3有趣的是，我們可以手動(dòng)修改長度。這就是我所說的：
const arr = [1, 2, 3];
arr.length = 2;
arr.forEach(i => console.log(i)); // 1 2甚至創(chuàng)建指定長度的新數(shù)組：
const arr = [];
arr.length = 100;
console.log(arr) // [undefined, undefined, undefined ...]這不是一個(gè)很好的實(shí)踐，但是值得了解。
我們常常需要清空數(shù)組時(shí)候會(huì)使用：
const arr = [1, 2];
arr.length = 0;
console.log(arr) // []如果 arr 的值是共享的，并且所有參與者都必須看到清除的效果，那么這就是你需要采取的方法。
但是，JavaScript 語義規(guī)定，如果減少數(shù)組的長度，則必須刪除新長度及以上的所有元素。
而且這需要花費(fèi)時(shí)間(除非引擎對設(shè)置長度為零的特殊情況進(jìn)行了優(yōu)化)。實(shí)際上，一個(gè)性能測試表明，在所有當(dāng)前的 JavaScript 引擎上，這種清除方法更快。
2、替換數(shù)組元素
有幾種方法可以解決這個(gè)問題。如果需要替換指定索引處的元素，請使用 splice：
const arr = [1, 2, 3];
arr.splice(2, 1, 4); // 將索引 2 開始的 1 元素更改為 4
console.log(arr); // [1, 2, 4]
arr.splice(0, 2, 5, 6) // 將索引 0 開始的 2 個(gè)元素更改為 5 和 6
console.log(arr); // [5, 6, 4]splice 在數(shù)組刪除有更多的說明
如果你需要根據(jù)項(xiàng)目的內(nèi)容替換項(xiàng)目，或者必須創(chuàng)建一個(gè)新數(shù)組，請使用 map：
const arr = [1, 2, 3, 4, 5, 6];
// 所有奇數(shù)的平方
const arr2 = arr.map(item => item % 2 == 0 ? item : item*item);
console.log(arr2); // [1, 2, 9, 4, 25, 6];map 接受函數(shù)作為其參數(shù)。它將對數(shù)組中的每個(gè)元素調(diào)用該函數(shù)一次，并生成一個(gè)新的函數(shù)返回的項(xiàng)數(shù)組。
關(guān)于 map 有個(gè)經(jīng)典的面試題：['1', '2', '3', '4', '5'].map(parseInt) => ?
3、過濾數(shù)組
在某些情況下，你需要?jiǎng)h除數(shù)組中的某些元素，然后創(chuàng)建一個(gè)新的元素。在這種情況下，使用在ES5中引入的很棒的 filter 方法:
const arr = [1, 2, 3, 4, 5, 6, 7];
// 過濾掉所有奇數(shù)
const arr2 = arr.filter(item => item % 2 == 0);
console.log(arr2); // [2, 4, 6];filter 的工作原理與 map 非常相似。向它提供一個(gè)函數(shù)，filter 將在數(shù)組的每個(gè)元素上調(diào)用它。如果要在新數(shù)組中包含此特定元素，則函數(shù)必須返回 true，否則返回 false。
4、 合并數(shù)組
如果你想將多個(gè)數(shù)組合并為一個(gè)數(shù)組，有兩種方法。
Array 提供了 concat 方法：
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = arr1.concat(arr2);
console.log(arr3 ); // [1, 2, 3, 4, 5, 6]ES6 中引入了 spread operator，一種更方便的方法:
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2];
console.log(arr3 ); // [1, 2, 3, 4, 5, 6]還有一種比較奇特方法：
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
Array.prototype.push.apply(arr1, arr2);
console.log(arr1); // [1, 2, 3, 4, 5, 6]上面 2 種通用的方法，都不會(huì)改變原數(shù)組，最后一種奇特方法，會(huì)改變 push 的原數(shù)組，謹(jǐn)慎使用。
Array.prototype.push.apply 和 concat 對比：
- 數(shù)據(jù)上萬情況下，兩者性能相差毫秒個(gè)位數(shù)級(jí)別
- Array.prototype.push.apply 數(shù)組長度有限制，不同瀏覽器不同，一般不能超過十萬， concat 無限制
- Array.prototype.push.apply 會(huì)改變原數(shù)組， concat 不會(huì)
正常情況下我們都應(yīng)該使用 concat 和 spread operator，有種情況下可以使用，如果頻繁合并數(shù)組可以用 Array.prototype.push.apply。
5、復(fù)制數(shù)組
總所周知，定義數(shù)組變量存儲(chǔ)不是數(shù)組值，而只是存儲(chǔ)引用。 這是我的意思：
const arr1 = [1, 2, 3];
const arr2 = arr1;
arr2[0] = 4;
arr2[1] = 2;
arr2[2] = 0;
console.log(arr1); // [4, 2, 0]因?yàn)?arr2 持有對 arr1 的引用，所以對 arr2 的任何更改都是對 arr1 的更改。
const arr1 = [1, 2, 3];
const arr2 = arr1.slice(0);
arr2[0] = 4;
arr2[1] = 2;
arr2[2] = 0;
console.log(arr1); // [1, 2, 3]
console.log(arr2); // [4, 2, 0]我們也可以使用 ES6 的 spread operator：
const arr1 = [1, 2, 3];
const arr2 = [...arr1];
arr2[0] = 4;
arr2[1] = 2;
arr2[2] = 0;
console.log(arr1); // [1, 2, 3]
console.log(arr2); // [4, 2, 0]也可以使用前面合并使用的 concat 方法
const arr1 = [1, 2, 3];
const arr2 = [].concat(arr1);
arr2[0] = 4;
arr2[1] = 2;
arr2[2] = 0;
console.log(arr1); // [1, 2, 3]
console.log(arr2); // [4, 2, 0]注意：如果想要了解更多的數(shù)組復(fù)制，請查詢 數(shù)組深拷貝和淺拷貝 相關(guān)資料，這里只實(shí)現(xiàn)了淺拷貝。
6、數(shù)組去重
數(shù)組去重是面試經(jīng)常問的，數(shù)組去重方式很多，這里介紹比較簡單直白的三種方法：
可以使用 filter 方法幫助我們刪除重復(fù)數(shù)組元素。filter 將接受一個(gè)函數(shù)并傳遞 3 個(gè)參數(shù)：當(dāng)前項(xiàng)、索引和當(dāng)前數(shù)組。
const arr1 = [1, 1, 2, 3, 1, 5, 9, 4, 2];
const arr2 = arr1.filter((item, index, arr) => arr.indexOf(item) == index);
console.log(arr2); // [1, 2, 3, 5, 9, 4]可以使用 reduce 方法從數(shù)組中刪除所有重復(fù)項(xiàng)。然而，這有點(diǎn)棘手。reduce 將接受一個(gè)函數(shù)并傳遞 2 個(gè)參數(shù)：數(shù)組的當(dāng)前值和累加器。
累加器在項(xiàng)目之間保持相同，并最終返回:
const arr1 = [1, 1, 2, 3, 1, 5, 9, 4, 2];
const arr2 = arr1.reduce(
(acc, item) => acc.indexOf(item) == -1 ? [...acc, item]: acc,
[] // 初始化當(dāng)前值
);
console.log(arr2); // [1, 2, 3, 5, 9, 4]可以使用 ES6 中引入的新數(shù)據(jù)結(jié)構(gòu) set 和 spread operator:
const arr1 = [1, 1, 2, 3, 1, 5, 9, 4, 2];
const arr2 = [...(new Set(arr1))];
console.log(arr2); // [1, 2, 3, 5, 9, 4]還有很多其他去重方式，比如使用 {} + for。
7、轉(zhuǎn)換為數(shù)組
有時(shí)我們必須將一些其它數(shù)據(jù)結(jié)構(gòu)，如集合或字符串轉(zhuǎn)換為數(shù)組。
類數(shù)組：函數(shù)參數(shù)，dom 集合
Array.prototype.slice.call(arguments);
Array.prototype.concat.apply([], arguments);字符串：
console.log('string'.split('')); // ["s", "t", "r", "i", "n", "g"]
console.log(Array.from('string')); // ["s", "t", "r", "i", "n", "g"]集合：
console.log(Array.from(new Set(1,2,3))); // [1,2,3]
console.log([...(new Set(1,2,3))]); // [1,2,3]8、數(shù)組遍歷
數(shù)組遍歷方式很多，有底層的，有高階函數(shù)式，我們就來介紹幾種：
for：
const arr = [1, 2, 3];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
// 1 2 3for-in：
const arr = [1, 2, 3];
for (let i in arr) {
if(arr.hasOwnProperty(i)) {
console.log(arr[i]);
}
}
// 1 2 3for-of:
const arr = [1, 2, 3];
for (let i of arr) {
console.log(i);
}
// 1 2 3forEach:
[1, 2, 3].forEach(i => console.log(i))
// 1 2 3while：
const arr = [1,2,3];
let i = -1;
const length = arr.length;
while(++i < length) {
console.log(arr[i])
}
// 1 2 3迭代輔助語句：break 和 continue
- break 語句是跳出當(dāng)前循環(huán)，并執(zhí)行當(dāng)前循環(huán)之后的語句
- continue 語句是終止當(dāng)前循環(huán)，并繼續(xù)執(zhí)行下一次循環(huán)
上面方式中，除了 forEach 不支持跳出循環(huán)體，其他都支持。高階函數(shù)式方式都類似 forEach 。
性能對比：
while > for > for-of > forEach > for-in如果是編寫一些庫或者大量數(shù)據(jù)遍歷，推薦使用 while。有名的工具庫 lodash 里面遍歷全是 while。正常操作，for-of 或者 forEach 已經(jīng)完全滿足需求。
下面介紹幾種高級(jí)函數(shù)式，滿足條件為 true 立即終止循環(huán)，否則繼續(xù)遍歷到整個(gè)數(shù)組完成的方法：
// ES5
[1, 2, 3].some((i) => i == 1);
// ES6
[1, 2, 3].find((i) => i == 1);
[1, 2, 3].findIndex((i) => i == 1);其他高階函數(shù)式方法，例如 forEach map filter reduce reduceRight every sort 等，都是把整個(gè)數(shù)組遍歷。
9、扁平化多維數(shù)組
這個(gè)功能說不是很常用，但是有時(shí)候又會(huì)用到：
二維數(shù)組：
const arr1 = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
const arr2 = [].concat.apply([], arr1);
console.log(arr2); // [1, 2, 3, 4, 5, 6, 7, 8, 9]三維數(shù)組：
const arr1 = [[1, 2, 3], [4, 5, 6], [7, 8, 9], [[1, 2, 3], [4, 5, 6], [7, 8, 9]]];
const arr2 = [].concat.apply([], arr1);
console.log(arr2); // [1, 2, 3, 4, 5, 6, 7, 8, 9, [1, 2, 3], [4, 5, 6], [7, 8, 9]]concat.apply 方式只能扁平化二維數(shù)組，在多了就需要遞歸操作。
function flatten(arr) {
return arr.reduce((flat, toFlatten) => {
return flat.concat(Array.isArray(toFlatten) ? flatten(toFlatten) : toFlatten);
}, []);
}
const arr1 = [[1, 2, 3], [4, 5, 6], [7, 8, 9], [[1, 2, 3], [4, 5, 6], [7, 8, 9]]];
const arr2 = flatten(arr1);
console.log(arr2); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 2, 3, 4, 5, 6, 7, 8, 9]ES6+(ES2019) 給我們提供一個(gè) flat 方法：
const arr1 = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
const arr2 = arr1.flat();
console.log(arr2); // [[1, 2, 3], [4, 5, 6], [7, 8, 9]]默認(rèn)只是扁平化二維數(shù)組，如果想要扁平化多維，它接受一個(gè)參數(shù) depth，如果想要展開無限的深度使用 Infinity:
const arr1 = [[1, 2, 3], [4, 5, 6], [7, 8, 9], [[1, 2, 3], [4, 5, 6], [7, 8, 9]]];
const arr2 = arr1.flat(Infinity);
console.log(arr2); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 2, 3, 4, 5, 6, 7, 8, 9]還有一種面試扁平化二維數(shù)組方式：
const arr1 = [[1, 2, 3], [4, 5, 6], [7, 8, 9], [[1, 2, 3], [4, 5, 6], [7, 8, 9]]];
const arr2 = arr1.toString().split(',').map(n => parseInt(n, 10));
console.log(arr2); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 2, 3, 4, 5, 6, 7, 8, 9]10、數(shù)組添加
如何從數(shù)組中添加元素？
我們可以使用 push 從數(shù)組末尾添加元素，使用 unshift 從開頭添加元素，或者使用 splice 從中間添加元素。concat 方法可創(chuàng)建帶有所需項(xiàng)目的新數(shù)組，這是一種添加元素的更高級(jí)的方法。
從數(shù)組的末尾添加元素：
const arr = [1, 2, 3, 4, 5, 6];
arr.push(7)
console.log( arr ); // [1, 2, 3, 4, 5, 6, 7]從數(shù)組的開頭添加元素：
const arr = [1, 2, 3, 4, 5, 6];
arr.unshift(0)
console.log( arr ); // [0, 1, 2, 3, 4, 5, 6]push 方法的工作原理與 unshift 方法非常相似，方法都沒有參數(shù)，都是返回?cái)?shù)組更新的 length 屬性。它修改調(diào)用它的數(shù)組。
使用 splice 添加數(shù)組元素：
只需要把 splice，第二個(gè)參數(shù)設(shè)為 0 即可，splice 在數(shù)組刪除有更多的說明
const arr = [1, 2, 3, 4, 5];
arr.splice(1, 0, 10)
console.log(arr); // [1, 10, 2, 3, 4, 5]使用 concat 添加數(shù)組元素：
const arr1 = [1, 2, 3, 4, 5];
const arr2 = arr1.concat(6);
console.log(arr2); // [1, 2, 3, 4, 5, 6]11、數(shù)組刪除
數(shù)組允許我們對值進(jìn)行分組并對其進(jìn)行遍歷。 我們可以通過不同的方式添加和刪除數(shù)組元素。 不幸的是，沒有簡單的 Array.remove 方法。
那么，如何從數(shù)組中刪除元素？
除了 delete 方式外，JavaScript 數(shù)組還提供了多種清除數(shù)組值的方法。
我們可以使用 pop 從數(shù)組末尾刪除元素，使用 shift 從開頭刪除元素，或者使用 splice 從中間刪除元素。
filter 方法可創(chuàng)建帶有所需項(xiàng)目的新數(shù)組，這是一種刪除不需要的元素的更高級(jí)的方法。
從數(shù)組的末尾刪除元素：
通過將 length 屬性設(shè)置為小于當(dāng)前數(shù)組長度，可以從數(shù)組末尾刪除數(shù)組元素。 索引大于或等于新長度的任何元素都將被刪除。
const arr = [1, 2, 3, 4, 5, 6];
arr.length = 4;
console.log( arr ); // [1, 2, 3, 4]pop 方法刪除數(shù)組的最后一個(gè)元素，返回該元素，并更新length屬性。pop 方法會(huì)修改調(diào)用它的數(shù)組，這意味著與使用 delete 不同，最后一個(gè)元素被完全刪除并且數(shù)組長度減小。
const arr = [1, 2, 3, 4, 5, 6];
arr.pop();
console.log( arr ); // [1, 2, 3, 4, 5]從數(shù)組的開頭刪除元素：
shift 方法的工作原理與 pop 方法非常相似，只是它刪除了數(shù)組的第一個(gè)元素而不是最后一個(gè)元素。
const arr = [1, 2, 3, 4, 5, 6];
arr.shift();
console.log( arr ); // [2, 3, 4, 5, 6]shift 和 pop 方法都沒有參數(shù)，都是返回已刪除的元素，更新剩余元素的索引，并更新 length 屬性。它修改調(diào)用它的數(shù)組。如果沒有元素，或者數(shù)組長度為 0，該方法返回 undefined。
使用 splice 刪除數(shù)組元素：
splice 方法可用于從數(shù)組中添加、替換或刪除元素。
splice 方法接收至少三個(gè)參數(shù)：
- start：在數(shù)組中開始刪除元素的位置
- deleteCount：刪除多少個(gè)元素（可選）
- items...：添加元素（可選）
splice 可以實(shí)現(xiàn)添加、替換或刪除。
刪除：
如果 deleteCount 大于 start 之后的元素的總數(shù)，則從 start 后面的元素都將被刪除（含第 start 位）。
如果 deleteCount 被省略了，或者它的值大于等于array.length - start(也就是說，如果它大于或者等于start之后的所有元素的數(shù)量)，那么start之后數(shù)組的所有元素都會(huì)被刪除。
如果 deleteCount 是 0 或者負(fù)數(shù)，則不移除元素。這種情況下，至少應(yīng)添加一個(gè)新元素。
const arr1 = [1, 2, 3, 4, 5];
arr1.splice(1);
console.log(arr1); // [1];
const arr2 = [1, 2, 3, 4, 5];
arr2.splice(1, 2)
console.log(arr2); // [1, 4, 5]
const arr3 = [1, 2, 3, 4, 5];
arr3.splice(1, 1)
console.log(arr3); // [1,3, 4, 5]添加:
添加只需要把 deleteCount 設(shè)置為 0，items 就是要添加的元素。
const arr = [1, 2, 3, 4, 5];
arr.splice(1, 0, 10)
console.log(arr); // [1, 10, 2, 3, 4, 5]替換：
添加只需要把 deleteCount 設(shè)置為和 items 個(gè)數(shù)一樣即可，items 就是要添加的元素。
const arr = [1, 2, 3, 4, 5];
arr.splice(1, 1, 10)
console.log(arr); // [1, 10, 3, 4, 5]注意：splice 方法實(shí)際上返回兩個(gè)數(shù)組，即原始數(shù)組（現(xiàn)在缺少已刪除的元素）和僅包含已刪除的元素的數(shù)組。如果循環(huán)刪除元素或者多個(gè)相同元素，最好使用倒序遍歷。
使用 delete 刪除單個(gè)數(shù)組元素：
使用 delete 運(yùn)算符不會(huì)影響 length 屬性。它也不會(huì)影響后續(xù)數(shù)組元素的索引。數(shù)組變得稀疏，這是說刪除的項(xiàng)目沒有被刪除而是變成 undefined 的一種奇特的方式。
const arr = [1, 2, 3, 4, 5];
delete arr[1]
console.log(arr); // [1, empty, 3, 4, 5]實(shí)際上沒有將元素從數(shù)組中刪除的原因是 delete 運(yùn)算符更多的是釋放內(nèi)存，而不是刪除元素。 當(dāng)不再有對該值的引用時(shí)，將釋放內(nèi)存。
使用數(shù)組 filter 方法刪除匹配的元素：
與 splice 方法不同，filter 創(chuàng)建一個(gè)新數(shù)組。
filter 接收一個(gè)回調(diào)方法，回調(diào)返回 true 或 false。返回 true 的元素被添加到新的經(jīng)過篩選的數(shù)組中。
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
const filtered = arr.filter((value, index, arr) => value > 5);
console.log(filtered); // [6, 7, 8, 9]
console.log(arr); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]清除或重置數(shù)組：
最簡單和最快的技術(shù)是將數(shù)組變量設(shè)置為空數(shù)組
let arr = [1,2,3];
arr = [];清除數(shù)組的一個(gè)簡單技巧是將其 length 屬性設(shè)置為 0。
let arr = [1,2,3];
arr.length = 0;使用 splice 方法，不傳遞第二個(gè)參數(shù)。這將返回原始元素的一個(gè)副本，這對于我們的有些場景可能很方便。也是一種數(shù)組復(fù)制方法技巧。
let arr = [1,2,3];
arr.splice(0);使用 while 循環(huán)，這不是一種常用清除數(shù)組的方法，但它確實(shí)有效，而且可讀性強(qiáng)。一些性能測試也顯示這是最快的技術(shù)。
const arr = [1, 2, 3, 4, 5, 6];
while (arr.length) { arr.pop(); }
console.log(arr); // []12、其他方法
剔除假值：
[1, false, '', NaN, 0, [], {}, '123'].filter(Boolean) // [1, [], {}, '123']是否有一個(gè)真值：
[1, false, '', NaN, 0, [], {}, '123'].some(Boolean) // true是否全部都是真值：
[1, false, '', NaN, 0, [], {}, '123'].every(Boolean) // false補(bǔ)零：
Array(6).join('0'); // '00000' 注意：如果要補(bǔ)5個(gè)0，要寫6，而不是5。
Array(5).fill('0').join('') // '00000'數(shù)組最大值和最小值：
Math.max.apply(null, [1, 2, 3, 4, 5]) // 5
Math.min.apply(null, [1, 2, 3, 4, 5]) // 1判斷回文字符串：
const str1 = 'string';
const str2 = str1.split('').reverse().join('');
console.log(str1 === str2); // false數(shù)組模擬隊(duì)列：
隊(duì)列先進(jìn)先出：
const arr = [1];
// 入隊(duì)
arr.push(2);
console.log('入隊(duì)元素：', arr[arr.length -1]); // 2
// 出隊(duì)
console.log('出隊(duì)元素：', arr.shift()); // 1獲取數(shù)組最后一個(gè)元素：
像我們平常都是這樣來獲?。?/span>
const arr = [1, 2, 3, 4, 5];
console.log(arr[arr.length - 1]); // 5感覺很麻煩，不過 ES 有了提案，未來可以通過 arr[-1] 這種方式來獲取，Python 也有這種風(fēng)騷的操作：
目前我們可以借助 ES6 的 Proxy 對象來實(shí)現(xiàn)：
const arr1 = [1, 2, 3, 4, 5];
function createNegativeArrayProxy(array) {
if (!Array.isArray(array)) {
throw new TypeError('Expected an array');
}
return new Proxy(array, {
get: (target, prop, receiver) => {
prop = +prop;
return Reflect.get(target, prop < 0 ? target.length + prop : prop, receiver);;
}
})
}
const arr2 = createNegativeArrayProxy(arr1);
console.log(arr1[-1]) // undefined
console.log(arr1[-2]) // undefined
console.log(arr2[-1]) // 5
console.log(arr2[-2]) // 4注意：這樣方式雖然有趣，但是會(huì)引起性能問題，50萬次循環(huán)下，在Chrome瀏覽器，代理數(shù)組的執(zhí)行時(shí)間大約為正常數(shù)組的50倍，在Firefox瀏覽器大約為20倍。在大量循環(huán)情況下，請慎用。無論是面試還是學(xué)習(xí)，你都應(yīng)該掌握 Proxy 用法。
