原題描述：

不使用loop迴圈，建立一個長度為100的陣列，並且每個元素的值等於它的下標

這個問題的一些變種例如給一個長度length和value，返回長度為length值全為value的陣列等。

1.誤區

最容易掉入陷阱的：

var arr = new Array(100);
arr = arr.map(function(item, index) {
return index;
});

如果你的答案是這個，恭喜你成功掉入出題人的坑了。

2.解釋

坑在Array(100)，可以看看MDN的規範，

new Array(100)返回的是一個什麼都沒有的“稀疏陣列”，其實我覺得這個答案可以看做是瀏覽器顯示處理的Bug。

在47版本Chrome下(或者早些的Chrome版本)，new Array(10)會返回[undefined,undefined,undefined,.......(100)]，但這個undefined又跟你直接宣告的[undefined,undefined,undefined,.......(100)]不同(都是47版本的Chrome)，測試：

看出來了把，這個就是以前瀏覽器的顯示Bug，後來修復了也就是現在顯示的empty，用來區別undefined，表明這個和undefined是不一樣的。

上面提到的Array()建立的是稀疏陣列（Sparse Array），在一些資料中是這樣說的，但是在js裡隨便建立個數組都可以是「稀疏」的吧（因為實際上就是 Object ？）

a = new Array(2); a[1] = 1; a;  // (2) [undefined × 1, 1]

b = []; b[4] = 5; b[9] = 10;
b;  // (10) [undefined × 4, 5, undefined × 4, 10]
而 JS 對於這類陣列，由於上述規範的定義，遍歷的時候會跳過空的地方

a.map(e => 2*e)  //(2) [undefined × 1, 2]

JS 引擎對於稀鬆陣列是用字典儲存的，能省一些空間，但是在索引方面肯定是比 Full Array 吃虧了。所以 JavaScript 不把 new Array 設計成全用 undefined 填滿，有點反直覺。

以上是一種解釋，另一種不用稀疏陣列來解釋：

對於 new Array(2)，它實際上返回的是一個長度為 2，裡面什麼都沒有的陣列。即對應empty字面表現的意義。

根據 ECMA-262 6th edition，即 ES6 規範 22.1.1.2 小節 Array (len)， Array(len) 僅僅就是給新陣列設了個 length 屬性而已，其他什麼也沒做……而對於 JS 陣列的索引，就算是陣列越界了，也都是返回 undefined：

new Array(2)[999] === undefined // true

能影響到 Array.prototype.map() 的原因是因為，根據規範 22.1.3.15 小節 Array.prototype.map ( callbackfn [ , thisArg ] )，map 函式會先檢查 HasProperty。要 map，首先這個元素/屬性要存在。可是：

new Array(2).hasOwnProperty(0) // false
[undefined, undefined].hasOwnProperty(0) // true

所以，傳給 map 的 callback 其實根本就沒執行，可以測試

new Array(2).map(e => console.log('done'))  

會發現啥也沒 log 出來。

這個“bug”在edge和Safari也發現過。

3.正確的解決

扯了那麼多，那麼這道題應該怎麼做呢。

其實這道題的面試官當時是說不用loop的情況下的解決方案，用Array方法的話其實都是屬於loop，目的是考察遞迴：

1. 遞迴+自執行函式

var arr = [];

(function dfs(i) {
  if (i < 100) {
    arr.push(i);
    dfs(++i);
  }
}(0));

2. 轉化成字串

Array(100).join(",").split(",").map(function(key,index){return index;})

3. apply轉換一下，可以看到js的大多數坑的解決都有apply的身影。。。

Array.apply(null,Array(100)).map((item,index)=>index)

apply在es5可以加類陣列物件，在傳入的時候，由於每一項的值都是不存在的，相當於進去的是 undefined（這裡的undefined是真真切切的undefined。。。）

4. Int8Array

new Int8Array(100).map((item,index)=>index);

Int8Array的規範看相關文件把

5.討論的時候B大給的兩個最騷的解法。。。

第二種都看得懂把，第一種新手還是不好理解的，這裡解釋一下：

1、 js 裡的 + 號在不同表示式裡有不同含義
2、在這裡，是加號
3、加號後面跟一個數組，觸發了隱式轉換
4、陣列的隱式轉換包含兩個，toString 和 valueOf，根據陣列的隱式轉換規則，這裡呼叫 valueOf
5、但是 ary 的 valueOf 被改寫了，改成了看到的那個函式，那個函式裡每次會給 ary 新加一個與下標相同的元素
6、 如果下標還沒到 100，就再 +ary 一次，相當於又呼叫了一次 valueOf
7、於是就形成了遞迴

其他的

Object.keys(Array(100).toString().split(","))

function genArr(i, arr){
    if(i < 10){
        arr[i] = i++
        return genArr(i, arr);
    } else {
        return arr;
    }
}
var arr = genArr(0, [])

var a =[],b= function () { return a.length<100?(a.push(a.length)&&arguments.callee()):a }(); console.log(a,b);


[...Array(10).keys()]

Array(100).fill().map((v, i) => i)

4.問題的升級

題目改成100w，百萬級的陣列，怎麼生成快？
關鍵詞：弄個 getter setter ，惰性求值

5.求是求真

以上的問題可以看V8的原始碼，不看原始碼的時候，只能確定行為，誰解釋都有一套。
v8原始碼連結：連結
stackoverflow的討論：連結