之前看到一道前端的面试题：不使用循环的情况下，生成[0,1,2,3,4,5,6,7,8,9]数组。
第一反应使用new Array(10)，然后操作数组
new Array(10).map((item,index)=>index)
输入的结果却是
输出结果.png
查过之后才知道，
new Array(n)返回的是一个具有n个空位的数组([,,,])，而ES5的数组api都会自动跳过空位。
forEach(),filter(),reduce(),every()和some()都会跳过空位。map()会跳过空位，但会保留这个值join()和toString()会将空位视为undefined，而undefined和null会被处理成空字符串。
转换一下思路，既然join()和toString()会将空位视为undefined，我们便可以这么写
new Array(10).join().split(',').map((item,index)=>index)
// 或者
new Array(10).toString().split(',').map((item,index)=>index)
是不是觉得处理的很繁琐？不急，通过ES6的新特性，还可以通过以下方式实现
-
Array.prototype.fill
fill可以对数组中的元素重写Array.prototype.fill(value,[index[,length]])，参数分别表示：值/起始位置/结束位置
实现思路，任意值填充数组，然后再执行map
new Array(10).fill("").map((item,index)=>index)
-
Array.from
将类数组转化成真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象；会将空位赋值为
undefiend
Array.from(new Array(10)).map((item,index)=>index)
// 或者直接不使用new Array，直接传入类数组
Array.from({length:10}).map((item,index)=>index)
// 还有更简单的，Array.from可以接收第二个参数，类似于map的方法
Array.from({length:10},(item,index)=>index)
-
扩展运算符(...)
对象的扩展运算符（...）用于取出参数对象的所有可遍历属性，拷贝到当前对象之中。同样的，扩展运算符用于数组，会将空位填赋值为
undefiend
[...new Array(2)] // [undefiend,undefiend]
[...new Array(10)].map((item,index)=>index)
-
Array.prototype.keys
上面全是map对数组进行便利操作返回index，其实不用这么麻烦，ES6数组实例的keys，返回一个遍历器对象，再借助扩展运算符，生成新的数组
[...new Array(10).keys()]
最后，自己封装了个Array.range()方法，表现跟python的range一致：
- 一个参数：length
- 两个参数：startNum，endNum
- 三个参数：startNum，endNum，step
Array.range = function (...args) {
// 判断是否整数
for (let item of args) {
if (!Number.isInteger(item)) {
console.error('Params must be Integer')
return []
}
}
let [arg1, arg2] = args
switch (args.length) {
case 1:
return [...Array.from({length: arg1}).keys()]
case 2:
return Array.from({length: arg2 - arg1}, (item, index) => index + arg1)
case 3:
return _handlerStep(args)
default:
return []
}
function _handlerStep ([start, end, step]) {
let rtnArr = []
if (start > end && step < 0) {
for (let num = start; num > end; num += step) {
rtnArr.push(num)
}
} else if (start < end && step > 0) {
for (let num = start; num < end; num += step) {
rtnArr.push(num)
}
}
return rtnArr
}
}
相关资料
https://developer.mozilla.org/en-US/docs/Mozilla;
http://es6.ruanyifeng.com/#docs/array;
http://2ality.com/2018/12/creating-arrays.html;
