javascript不使用循环生成任意长度数组

之前看到一道前端的面试题：不使用循环的情况下，生成[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;