关于new Array的一些思考

247 阅读2分钟

当我想要借助js快速生成0-9的数字时,想到的最简办法就是 new Array(10)。

打印结果为 (10) [empty × 10],个数为10的数组就这样产生了,于是机智的书写下一步。

// 遍历数组,将索引值返回,得到[0,1,2,3,4...]的新数组
new Array(10).map((v,i) => i);
// 打印结果 (10) [empty × 10] ,这不是我要的答案

输出结果依然是 (10) [empty × 10]的空数组,很明显没有任何变化,我纳闷着换个姿势采用forEach再试。

var _numbers = [];
new Array(10).forEach((v,i) => _numbers.push(i));
// 打印结果 []

输出结果为空数组,一个数字也没进去,看来不是map方法的问题,开始思考解决方案。

方案1:

使用fill()填补

使用new Array(10) 产生的数组map不会调用,原因是map 方法的 callback 函数只会在有值的索引上被调用(包含undefined);那些从来没被赋过值或者使用 delete 删除的索引则不会被调用。相要达到能被map调用的目的,就必须让数组中每项都有值,于是使用fill()这个方法,fill()方法是用一个固定值填充一个数组中的全部元素,实现如下:

new Array(10).fill().map((v,i) => i);
// 打印结果 [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],结果是我想要的了

方案2:

使用keys()取得索引值

[...new Array(10).keys()];
// 打印结果 [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],结果也是我想要的

使用keys()方法使得代码简洁了许多,通过这两种方案就可以快速搞定这个需求。

你会问,new Array() 就用来做这?存在感是不是低了点?

当然不止这些,new Array只有一个参数的时候,会创建一个长度为第一个参数值的空数组,当传递多个参数时,会将参数按顺序返回成为数组,以填数字来举例,假定你还需要按规定来填充一些数字到数组,比如我需要得到每月31天的月份 ,就可以这样用:

new Array(1,3,5,7,8,10,12);
// 打印结果 [1, 3, 5, 7, 8, 10, 12]

这样写会产生一个问题,比如做封装时,如果传递的参数个数不是固定的,参数只有一个,new Array就会变为创建指定长度的空数组,得到的结果也会完全不一样,这时我们可以用Array.of()方法解决此问题。

new Array(10, 20, 30) // [10, 20, 30]
new Array(10) // (10) [empty × 10]
new Array(-1) // Uncaught RangeError: Invalid array length

Array.of(10, 20, 30) // [10, 20, 30]
Array.of(10) // [10]
Array.of(-1) // [-1]

避免踩坑,如果你有一个需要初始化大数组的需求,建议使用 Array.of() 或使用简写 [] 方法。