美文网首页
不用循环生成数组

不用循环生成数组

作者: Kevin丶CK | 来源:发表于2019-05-08 14:54 被阅读0次

1、递归(最容易想到的)

const arrWithoutLoop = (n) => {
        if (n === 0) {
          return [];
        }
        let result = [];
        result.unshift(--n); //将元素添加到数组开头
        if (n === 0) {
          return result;
        } else {
          return arrWithoutLoop(n).concat(result);
        }
      };
      console.log(arrWithoutLoop(10)); //[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

2、setInterval(也容易想到)

      let arr = [];
      let index = 0;
      let pushArray = setInterval(function() {
        arr[index] = index++;
        if (index >= 10) {
          clearInterval(pushArray);
          console.log(arr);//[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
        }
      }, 0);

上面两种比较的消耗性能,下面介绍几种比较高级一点的

3、利用Array的方法Array​.from()

Array.from(arrayLike[, mapFn[, thisArg]]) 方法从一个类似数组或可迭代对象中创建一个新的数组实例。
第二个参数如果指定了,新数组中的每个元素会执行该回调函数。

      let arr = Array.from({ length: 10 }, (value, key) => key);
      console.log(arr);

4、利用Array​.prototype​.map()和Array​.prototype​.join()

map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
但是如果元素是空的(不是null或者undefined),则map会跳过,不会遍历。

      let originArr = new Array(3);
      originArr[1] = undefined;
      originArr[2] = null;
      console.log(originArr);
      let temArr = originArr.map(function(value, index) {
        return index;
      });
      console.log(temArr);

使用new Array(),创建的是一个空数组(每项都是empty),如果直接使用map,那就无法遍历了,这是就需要使用Array​.prototype​.join()(使用toString()也可以)
join() 方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目,那么将返回该项目而不使用分隔符。如果一个元素为 undefined 或 null,它会被转换为空字符串。

     let originArr = new Array(3);
      console.log(originArr[0]);//undefined
      let temArr = originArr.join(',');
      console.log(temArr);// , ,

这是,就可以利用String​.prototype​.split(),将jion()生成的字符串分割成数组。
String​.prototype​.split()方法使用指定的分隔符字符串将一个String对象分割成字符串数组,以将字符串分隔为子字符串,以确定每个拆分的位置。
当字符串为空时,split()返回一个包含一个空字符串的数组,而不是一个空数组,如果字符串和分隔符都是空字符串,则返回一个空数组。
利用这一特性就可以生产一个空字符串数组,就可以使用map()遍历了。
      let arr = new Array(10);
      console.log(arr); //[empty × 10]
      let mArr = arr.join(",").split(",");
      //let mArr = arr.toString().split(",");
      console.log(mArr);//["", "", "", "", "", "", "", "", "", ""]
      mArr = mArr.map(function(value, index) {
        return index;
      });
      console.log(mArr);//[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

这个方式就比较考验对于Array API的熟练程度了

5、rest 参数和Array​.prototype​.keys()

ES6新特性,给我们提供了很多简便方法。
rest 参数
ES6 引入 rest 参数(形式为...变量名),用于获取函数的多余参数,这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中。

      let mArr =[1,2,3,4];
      let newMArr=[...mArr];
      console.log(newMArr);//[1, 2, 3, 4]

利用这样特性,配合keys(),可以生产数组

      const mArrWithoutLoop = (n) => [...new Array(n).keys()];
      console.log(mArrWithoutLoop(10));//[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

6、 Object.keys()和Function​.prototype​.apply()

Object.keys()方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用for...in循环遍历该对象时返回的顺序一致 。
Function​.prototype​.apply()方法调用一个具有给定this值的函数,以及作为一个数组(或类似数组对象)提供的参数。
由于apply传递的参数可以使类似数组对象。

     console.log( Array instanceof Function);//true
      console.log( Array.apply([], { length: 3 }));//[undefined, undefined, undefined]
      console.log( Array(3));//[empty × 3]

上面代码可以生成不是[empty × n]的数组

      let createArray = Object.keys(Array.apply([], { length: 10 }));
      console.log(createArray);//["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
      createArray=createArray.map(function(value,index){
        return +value;
      });
       console.log(createArray);[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

总结

其实总结来说,除了第一第二种,其他就是利用提供的API生成一个数组,这样我们就可以改变里面的数据。由于map()遍历的要求,只有生产不为[empty *n ]的数组。

相关文章

  • 不用循环生成数组

    1、递归(最容易想到的) 2、setInterval(也容易想到) 上面两种比较的消耗性能,下面介绍几种比较高级一...

  • You don't know JS skills

    浮点数取整 随机生成10位字符串 不用循环递归实现一个递增数组

  • Javascript数组练习题

    一、生成一个类似[1-100]的数组; 思路: 生成一个length是100的数组 , 循环数组添加值 1.1利用...

  • 前端常见面试题

    1~数组的map方法和foreach的区别 foreach只做循环,map循环数组的每一项,生成新的数组对象,然后...

  • 数组循环倒叙生成

    项目中要用到这种数组[1, 2, 3, 4, 5, 4, 3, 2, 1, 2, 3, 4, 5, 4, 3, 2...

  • 不使用循环生成数组

    传统的方法生成数组 第一种不使用循环生成数组的方式 使用 Array.apply(null,{length:10}...

  • 【视频教程】JS数组优雅去重-冰山工作室-沙翼-web前端

    视频教程-数组去重 案例分析: 随机生成20个10以内的数字 随机生成10以内数字 去重思路: 双层循环,外层循环...

  • PHP从1加到100的几种思路方法!

    1.for循环: 2.while循环: 3.rand(1,100)生成从1到100的数组,再array_sum()...

  • 常见的编码规范

    1.使用 Array.from 快速生成数组 一般我们生成一个有规律的数组会使用循环插入的方法,比如使用时间选择插...

  • JS常用技巧

    函数 使用递归实现求阶乘 作用域 模拟块级作用域 数组 生成一个索引与值一一对应的数组(0-2) 循环 循环+匿名...

网友评论

      本文标题:不用循环生成数组

      本文链接:https://www.haomeiwen.com/subject/yyipoqtx.html