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。

你可能感兴趣的:(JS,javascript,前端,vue.js)