不使用循環，如何創建一個長度為100的數組

前言：

問題描述：在不使用循環的條件下，如何創建一個長度為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個字符，然后獲取索引，比如說用二進制等等，奇淫巧技數不勝數，這里就不一一贅述了！

我覺得一個話題或者說一個命題，能夠牽扯出別的知識點，學習到更多的技巧，那這個命題就是有價值的，也是有意義的，不想多說了，一張圖結束今天的話題！

如果你覺得你那里有什么好的實現方式，也可以在評論中發出來給大家參考一下！

原創不易，歡迎轉載，轉載時請注明出處，謝謝！