Array.apply(null, {length: 20})和Array(20)的理解

哎呀，由於學業繁忙（裝個B先），學校資源有限（上網限流量），都好久沒寫博客了，今晚貌似搞懂了一個問題，所以就來和大家分享分享。

話說今晚在學習Vue.js教程里：Render函數，這一章節是發現了一個問題，就是利用下面的這個render函數可以渲染20個重復的段落：

render: function (createElement) {
  return createElement('div',
    Array.apply(null, { length: 20 }).map(function () {
      return createElement('p', 'hi')
    })
  )
}

問題來了，博主很好奇  Array.apply(null, { length: 20 })  這段代碼的作用是什么。有的小伙伴可能一下子就看出來，這段代碼不就是生成一個長度為20的空數組嘛，一開始博主也是這么理解的。於是乎博主就想，如果是這樣子，那么我把這一段代碼換成  Array(20)  ,變成下面這樣：

render: function (createElement) {
  return createElement('div',
    Array(20).map(function () {
      return createElement('p', 'hi')
    })
  )
}

那么按照剛剛的理解，把代碼換成這個樣子應該是沒有問題的。然后博主運行代碼，發現瀏覽器什么都沒有出來，連個錯都沒有報，太不給面子了。

這樣子就很明顯地說明了，剛剛那樣子地理解應該是不對的， Array.apply(null, { length: 20 })和Array(20)  這兩句代碼還是有區別的，那么區別是什么？接下來就是博主的理解：

博主在瀏覽器的Console 做了實驗：

博主在控制台定義了兩個數組對象，一個用Array構造函數創建的 arr1，一個是用上面所討論的方法創建的 arr2 ，它們的 length 都為 5 ，然后博主分別輸出  arr1  和  arr2 ,如下圖：

 

咦，看到這里，可能有些小伙伴已經發現了區別了。其實博主也是開始有點想法了：貌似  arr2  這個數組里面的值被初始化了，並且每一項被賦的值都是  undefined  ，而  arr1  這個數組里面的每一項都只是創建了而已，並沒有賦值。

了解JavaScript變量的定義的同學都知道，當我們在JavaScript里面 var 一個變量時（例如：var i;）,雖然我們並沒有賦值給 i  ，當時JavaScript默認把 i 的值設為  undefined 了，所以我們可以直接輸出 i 而不報錯。

博主為了驗證自己的思路是對的做了一下實驗：

博主為數組 arr1 的每一項都賦了個值：undefined  ，然后再次輸出 arr1 :

到這里聰明的你發現區別了吧。是不是和我們一開始輸出的  arr2  的結果一模一樣了。

為了更進一步證實博主的想法，博主還做了以下實驗：

render: function (createElement) {
  var arr = [undefined,undefined,undefined,undefined,undefined];
  return createElement('div',
    arr.map(function () {
      return createElement('p', 'hi')
    })
  )
}

博主把一開始的代碼修改成這樣子（20個undefined太長了，所以博主就創建一個長度為5 每一項的值為 undefined 的數組 arr），然后運行。什么的事情發生了。運行結果和一開始的

 

render: function (createElement) {
  return createElement('div',
    Array.apply(null, { length: 20 }).map(function () {
      return createElement('p', 'hi')
    })
  )
}

這個代碼是一樣的（請大家忽略數量的不一樣哈，20個undefined太長了），運行成功了。

下面總結一下對Array.apply(null, {length: 20})和Array(20)的理解吧：

Array(20)：很簡單，就是創建一個 length 為 20  的數組，並且JavaScript會自動為數組的每一項賦值 undefined ，而這個 undefined 和 我們自己手動賦值的undefined 有點不一樣。可以理解為JavaScript自動賦上的 undefined  相當於為數組的每個值霸個位置，日后方便我們的使用（博主自己是這么理解的，有什么不對的地方，大家記得指出）。

 Array.apply(null, {length: 20})：已這種方式創建出來的數組呢，數組中的每一項一創建出來就被我們賦上了確確實實的值 undefined ，而不僅僅是霸個位置那簡單。如果大家以后想創建一個數組每一項一開始就是 undefined 的數組的話，那用這種方法聽不錯的。

以上就是博主對這個兩個家伙的理解了。要是有哪里不對的地方，望各位看官指出，博主在此謝過了。

《轉載需標明出處》