大多数人都知道可以像这样得到数组的长度:
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 引擎上,这种清除方法更快。
有几种方法可以解决这个问题。如果需要替换指定索引处的元素,请使用 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 个元素更改为 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) => ?
在某些情况下,你需要删除数组中的某些元素,然后创建一个新的元素。在这种情况下,使用在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。
如果你想将多个数组合并为一个数组,有两种方法。
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。
总所周知,定义数组变量存储不是数组值,而只是存储引用。 这是我的意思:
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]
注意:如果想要了解更多的数组复制,请查询 数组深拷贝和浅拷贝 相关资料,这里只实现了浅拷贝。
数组去重是面试经常问的,数组去重方式很多,这里介绍比较简单直白的三种方法:
可以使用 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。