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

不用循环生成数组

作者: 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 ]的数组。

    相关文章

      网友评论

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

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