資訊專欄INFORMATION COLUMN
摘要：查看文檔可以看到的構造函數語法，可以得知支持兩種構造方式。方法會把生成的稀疏數組展開并當做參數再次傳給的構造函數，就是這樣子這樣最終就會得到一個數組，這樣就不是稀疏數組了，里面是有值的，雖然是。
今天看到一段代碼：
Array.apply(null, Array(30)).map(() => 4)
這代碼的寫法無法讓人一下理解它的意圖。
Google 之后知道它的作用是構造一個長度為 30 的數組，默認值是 4。
但是為什么要寫得這么別扭呢？我們來分解下它每一步在做什么：
Array.apply(null, Array(30))
這一段代碼生成一個長度為30的數組，里面的值都是 undefined。
之后的 .map(() => 4) ：負責填充默認值
但是為什么構造一個空值數組需要這么麻煩呢？還要用上 apply 方法，嘗試用 Array(30).map(() => 4) 來生成數組的話，你會得到這樣的一個結果，根本就沒有值。
[ , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ]
查看文檔 可以看到 Array 的構造函數語法，可以得知 Array 支持兩種構造方式。使用參數形式給定 N 個數組元素，或者給定一個數組長度。
不過比較重要的一點文檔里沒提到，使用 new Array(arrayLength) 方式構造的數組是一個稀疏數組，里面是沒有任何值的，只有長度。所以這個方式構造出來的數組是無法遍歷的，也就無法用 map 遍歷填充值了。
知道了上述的原因，我們就能理解：
Array.apply(null, Array(30))
其實等于
Array.apply(null, [, , , , , , , , , , , , , , , , , , , , , , , , , , , , ,]))
然后我們要繼續了解 apply 方法，在這里可以看 apply 的作用 文檔解釋， 這里不作介紹。apply 方法會把生成的稀疏數組展開并當做參數再次傳給 Array 的構造函數，就是這樣子：
Array(null,null,null......))
這樣最終就會得到一個數組，這樣就不是稀疏數組了，里面是有值的，雖然是 undefined。
結語[ undefined, undefined, undefined ......]
總結下，其實就是 js 的 Array 的默認構造函數生成的是稀疏數組，是無法用 map 遍歷填充的。所以才寫得這么繞。
不過，說了這么多，要實現原本的需求，其實有更簡單的方法啦：
Array(30).fill(4)
fill 方法的說明
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91181.html
摘要：下面這條語句將導致語法錯誤變量名允許包含字母數字美元符號和下劃線但第一個字符不允許是數字。可以把一些布爾值存入一個數組，還可以把一組數值存入一個數組甚至可以把這種數據類型混在一起存入一個數組數組元素還可以是變量這將把數組的第一個元素賦值為。 執行Javascript的方式 第一種方式是將JS代碼放到 < head > 標簽中的 < script > 標簽之間： ...
摘要：下面這條語句將導致語法錯誤變量名允許包含字母數字美元符號和下劃線但第一個字符不允許是數字。可以把一些布爾值存入一個數組，還可以把一組數值存入一個數組甚至可以把這種數據類型混在一起存入一個數組數組元素還可以是變量這將把數組的第一個元素賦值為。 執行Javascript的方式 第一種方式是將JS代碼放到 < head > 標簽中的 < script > 標簽之間： ...
摘要：下面這條語句將導致語法錯誤變量名允許包含字母數字美元符號和下劃線但第一個字符不允許是數字。可以把一些布爾值存入一個數組，還可以把一組數值存入一個數組甚至可以把這種數據類型混在一起存入一個數組數組元素還可以是變量這將把數組的第一個元素賦值為。 執行Javascript的方式 第一種方式是將JS代碼放到 < head > 標簽中的 < script > 標簽之間： ...
摘要：它是按以下方式工作的。對已填充的二進制進行編碼時，任何完全填充不包括原始數組中的位的位組都有特殊的第個符號表示。剩下的兩個位組都是填充碼，用來表示。最新的瀏覽器提供了自動生成的方法和希望此文可以幫助你完全理解。 HTTP將BASE64-編碼用于基本認證和摘要認證，在幾種HTTP擴展中也使用了該編碼。 Base-64編碼保證了二進制數據的安全 Base-64編碼可以將任意一組字節轉換為較...
摘要：一共講解了個常用的新特性，講解過程也是由淺入深。最后一個新增的方法主要是為了彌補當做構造函數使用時產生的怪異結果。特性共享父級對象共享父級不能當做構造函數語法最簡表達式前后對比很容易理解，可以明顯看出箭頭函數極大地減少了代碼量。 showImg(https://segmentfault.com/img/bVQ5GW?w=1024&h=675); 上周在公司組織了 ES6 新特性的分享會...
閱讀 1386·2019-08-30 12:54
閱讀 1870·2019-08-30 11:16
閱讀 1613·2019-08-30 10:50
閱讀 2449·2019-08-29 16:17
閱讀 1266·2019-08-26 12:17
閱讀 1378·2019-08-26 10:15
閱讀 2387·2019-08-23 18:38
閱讀 785·2019-08-23 17:50
