不使用循环，如何创建一个长度为100的数组

Posted 2020-09-06 凌云之翼

前言：

问题描述：在不使用循环的条件下，如何创建一个长度为100的数组，并且数组的每一个元素是该元素的下标？

这是一个比较经典的前端面试题，也可以当笔试题，咋一看，好像难度不大，实际上考察的知识点还不少，值得写篇文章来备忘！废话不多说，直接进入正文！

正文：

为了理解这道题的意思，我们先用传统的方法来实现一下：

使用for方法：

　　var arr = new Array(100);
    for(var i=0;i<arr.length;i++){
        arr[i] = i;
    }
    console.log(arr);

 

 或者是：

　　var arr = new Array();
    for(var i=0;i<100;i++){
        arr.push(i);
    }
    console.log(arr);

 

可以得到一个0-99的数组，使用while，do while也可以实现，这里就不写了，那不用循环，怎么得到呢？

第一种：Object.keys()

　　var arr = Object.keys(Array.apply(null, {length:100}))
　　console.log(arr);

 

这里通过Array.apply(null, {length:100})创建一个长度为100的数组，尽管里面的值为undefined，然后我们使用Object.keys()方法获取数组的key值，那这里就可以get到Object.keys()方法的新技能了，你还不知道，去查查吧！

但是这里得到的数组是一个字符串数组，不是数字，所以我们需要再加工一下，字符串转数字的方法就很多了，这里用map()方法：

　　var arr = Object.keys(Array.apply(null, {length:100})).map(function(item){
        return +item;
    });
    console.log(arr);

 

+号是一个转换格式的小技巧，你也可以使用parseInt

第二种：Array.from()

　　var arr = Array.from({length:100}, (v,k) => k);
    console.log(arr);

 

这里使用的Array.from()方法，从类数组或可迭代的对象创建一个新数组，你不懂用法，去查查吧！

第三种：Array.keys()

　　var arr = new Array(100).keys();
   console.log(Array.from(arr));

 

这里主要使用Array.keys()方法，获取数组的key值

第四种：Object.keys() 与 Array.from()

　　var arr = Object.keys(Array.from({length:100}));
   console.log(arr);

这种方式创建的也是一个字符串数组，所以需要转一下，方式跟第一种一样

　　var arr = Object.keys(Array.from({length:100})).map(function(item){
        return +item;
    });
    console.log(arr);

 

实现原理大致说一下，先用Array.from得到一个100值为undefined的数组，然后获取数组的key值，最终返回一个数组，不明白的可以仔细领会一下第二种和第三种

第5种：使用...扩展运算符

var arr = [...Array(100).keys()];
console.log(arr);

 

或者可以改写成：

var arr = [...Array.from({length:100}).keys()];
console.log(arr);

 

不熟悉扩展运算符的可以去es6教程里面看一下，这里就不介绍了

第6种：使用String()方法，比较特别

var arr = Object.keys(String(Array(101)));
console.log(arr);

 

这里需要用101位，为什么？因为在创建一个100个值的数组的时候，因为是空值数组，在将数组转成字符串的时候，实际上是存的空值之间的逗号（，），2个值才有一个逗号，3个值有2个逗号，以此类推，100个值需要101位，然后用Object.keys（）

方法转成数组，弄懂前面的方法的应该知道，此时的数组是一个字符串数组，所以还需要安装方法一处理一下：

var arr = Object.keys(String(Array(100))).map(function(item){
    return +item;
});
console.log(arr);

 

第7种：使用Int8Array()，比较偏门

var arr = Object.keys(new Int8Array(100)).map(function(item){
    return +item;
});
console.log(arr);

 

需要了解原理的同学，建议看一下Int8Array()的api

第8种：setInterval方法，感觉更偏门了

　　var arr = [];
    var i = 0;
    var timer = setInterval(function(){
        arr[i] = i++;
        if(i>=100){
            clearInterval(timer);
            console.log(arr);
        }
    },1);

 

通过定时器的思路，给数组赋值，确实很妙

第9种：受定时器启发，可以用递归调用

　　var arr = [];
    var i = 0;
    function MakeArray(num){
        if(i<num){
            arr[i] = i++;
            MakeArray(num);
        }
        return arr;
    }
    console.log(MakeArray(100));

 

第10种：可以使用第七种的变种，请看：

　　var arr = new Array(100).toString().split(\',\').map(function(item,index){
        return index;
    });
    console.log(arr);

 

我觉得这个知识点给出10种方法，应该差不多了，但是方法远远不止这10种，比如说截取网页中的100个字符，然后获取索引，比如说用二进制等等，奇淫巧技数不胜数，这里就不一一赘述了！

我觉得一个话题或者说一个命题，能够牵扯出别的知识点，学习到更多的技巧，那这个命题就是有价值的，也是有意义的，不想多说了，一张图结束今天的话题！

如果你觉得你那里有什么好的实现方式，也可以在评论中发出来给大家参考一下！

原创不易，欢迎转载，转载时请注明出处，谢谢！