12种JavaScript中最常用的数组操作整理汇总（1）

1、数组长度

大多数人都知道可以像这样得到数组的长度：

const arr = [1, 2, 3]; console.log(arr.length); // 3

有趣的是，我们可以手动修改长度。这就是我所说的：

const arr = [1, 2, 3]; arr.length = 2; arr.forEach(i => console.log(i)); // 1 2

甚至创建指定长度的新数组：

const arr = []; arr.length = 100; console.log(arr) // [undefined, undefined, undefined ...]

这不是一个很好的实践，但是值得了解。

我们常常需要清空数组时候会使用：​​​​​​​

const arr = [1, 2]; arr.length = 0; console.log(arr)  // []

如果 arr 的值是共享的，并且所有参与者都必须看到清除的效果，那么这就是你需要采取的方法。

但是，JavaScript 语义规定，如果减少数组的长度，则必须删除新长度及以上的所有元素。

而且这需要花费时间(除非引擎对设置长度为零的特殊情况进行了优化)。实际上，一个性能测试表明，在所有当前的 JavaScript 引擎上，这种清除方法更快。

2、替换数组元素

有几种方法可以解决这个问题。如果需要替换指定索引处的元素，请使用 splice：​​​​​​​

const arr = [1, 2, 3]; arr.splice(2, 1, 4); // 将索引 2 开始的 1 元素更改为 4console.log(arr); // [1, 2, 4] arr.splice(0, 2, 5, 6) // 将索引 0 开始的 2 个元素更改为 5 和 6 console.log(arr); // [5, 6, 4]

splice 在数组删除有更多的说明

如果你需要根据项目的内容替换项目，或者必须创建一个新数组，请使用 map：​​​​​​​

const arr = [1, 2, 3, 4, 5, 6]; // 所有奇数的平方const arr2 = arr.map(item => item % 2 == 0 ? item : item*item); console.log(arr2); // [1, 2, 9, 4, 25, 6];

map 接受函数作为其参数。它将对数组中的每个元素调用该函数一次，并生成一个新的函数返回的项数组。

关于 map 有个经典的面试题：['1', '2', '3', '4', '5'].map(parseInt) => ?

3、过滤数组

在某些情况下，你需要删除数组中的某些元素，然后创建一个新的元素。在这种情况下，使用在ES5中引入的很棒的 filter 方法:​​​​​​​

const arr = [1, 2, 3, 4, 5, 6, 7]; // 过滤掉所有奇数const arr2 = arr.filter(item => item % 2 == 0); console.log(arr2); // [2, 4, 6];

filter 的工作原理与 map 非常相似。向它提供一个函数，filter 将在数组的每个元素上调用它。如果要在新数组中包含此特定元素，则函数必须返回 true，否则返回 false。

4、 合并数组

如果你想将多个数组合并为一个数组，有两种方法。

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 种通用的方法，都不会改变原数组，最后一种奇特方法，会改变 push 的原数组，谨慎使用。

Array.prototype.push.apply 和 concat 对比：

• 数据上万情况下，两者性能相差毫秒个位数级别

• Array.prototype.push.apply 数组长度有限制，不同浏览器不同，一般不能超过十万， concat 无限制

• Array.prototype.push.apply 会改变原数组， concat 不会

正常情况下我们都应该使用 concat 和 spread operator，有种情况下可以使用，如果频繁合并数组可以用 Array.prototype.push.apply。

5、复制数组

总所周知，定义数组变量存储不是数组值，而只是存储引用。 这是我的意思：

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

因为 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]

注意：如果想要了解更多的数组复制，请查询 数组深拷贝和浅拷贝 相关资料，这里只实现了浅拷贝。

6、数组去重

数组去重是面试经常问的，数组去重方式很多，这里介绍比较简单直白的三种方法：

可以使用 filter 方法帮助我们删除重复数组元素。filter 将接受一个函数并传递 3 个参数：当前项、索引和当前数组。

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 方法从数组中删除所有重复项。然而，这有点棘手。reduce 将接受一个函数并传递 2 个参数：数组的当前值和累加器。

累加器在项目之间保持相同，并最终返回:

const arr1 = [1, 1, 2, 3, 1, 5, 9, 4, 2]; const arr2 = arr1.reduce(  (acc, item) =>  acc.indexOf(item) == -1 ? [...acc, item]: acc,  []   // 初始化当前值);console.log(arr2); // [1, 2, 3, 5, 9, 4]

可以使用 ES6 中引入的新数据结构 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。