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,而undefinednull会被处理成空字符串。

转换一下思路,既然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;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • ES6 数组拓展 ES6为Array新增的扩展 ...**(拓展运算符)---三个点将一个数组转为用逗号分隔的参数...
    动感超逗阅读 659评论 0 1
  • 扩展运算符 含义 扩展运算符是三个点(...)。它好比rest参数的逆运算,将一个数组转为用逗号分隔的参数序列。 ...
    oWSQo阅读 309评论 0 0
  • 扩展运算符 含义 扩展运算符(spread)是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗...
    小挠许阅读 202评论 0 0
  • 三,字符串扩展 3.1 Unicode表示法 ES6 做出了改进,只要将码点放入大括号,就能正确解读该字符。有了这...
    eastbaby阅读 1,573评论 0 8
  • js获取网页各种高度: 网页可见区域宽: document.body.clientWidth 网页可见区域高: d...
    PolarGao阅读 1,064评论 0 4