完全解析Array.apply(null, { length: 1000 })

来源:https://www.cnblogs.com/mochenxiya/archive/2022/09/03/16651997.html
-Advertisement-
Play Games

Array.apply(null, { length: 1000 }) 點擊打開視頻講解更加詳細 在閱讀VueJS教程時有這麼段demo code: render: function (createElement) { return createElement('div', Array.apply( ...


Array.apply(null, { length: 1000 })

點擊打開視頻講解更加詳細

在閱讀VueJS教程時有這麼段demo code:

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)也可以實現這個功能啊,為啥非要寫那麼複雜呢?於是乎就想,如果是這樣子,那麼我把這一段代碼換成 Array(20) ,變成下麵這樣:

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

對比代碼:

let apply = Array.apply(null, { length: 20 }).map(function (item, index) {
  return {
    index: index,
  };
});

console.log("Array.apply", apply);

let data = Array(20).map(function (item, index) {
  return {
    index: index,
  };
});
console.log("Array()", data);

效果圖:
對比圖.png

那麼按照剛剛的理解,把代碼換成這個樣子應該是沒有問題的。然後運行代碼,發現瀏覽器什麼都沒有出來,連個錯都沒有報,這樣子就很明顯地說明瞭,剛剛那樣子地理解應該是不對的, Array.apply(null, { length: 20 })和Array(20) 這兩句代碼還是有區別的,那麼區別是什麼?

基礎1: Array構造函數

直接調用Array函數跟new方式調用是等價的,即:
let a = Array(2); // 等價於let a = new Array(2);
表示:創建一個長度為2的數組,註意該數組的元素並沒有被初始化,即:
console.log(0 in a); // false
console.log(1 in a); // false, 因為數組下標0,1還未初始化
console.log(a[0]); // undefined, 因為數組下標0還未初始化,訪問不存在的屬性返回undefined

基礎2: apply函數

ES5開始apply函數的第二個參數除了可以是數組外,還可以是類數組對象(即包含length屬性,且length屬性值是個數字的對象)。對象{length: 2}就是一個類數組對象,因為沒有初始化下標0,1的值,所以獲取0,1下標的值得到的都是undefined。

console.log(a[0]); // undefined
console.log(a[1]); // undefined
// 可以轉成真正的數組
var a = Array.prototype.slice.call({length: 2});
console.log(Array.isArray(a)) // true

再看表達式Array.apply(null, { length: 2})的值

溫故了基礎後再看表達式Array.apply(null, { length: 2 })他就等價於:

// 1 熟悉一點: {length: 2}作為Array.apply第二個參數等同於[undefined, undefined]作為Array.apply第二個參數
Array.apply(null, [undefined, undefined]); 
// 2 再熟悉一點:apply方法的執行結果
Array(undefined, undefined); 
// 3 再再熟悉一點:Array方法直接調用和new方式調用等價
new Array(undefined, undefined); 

這樣就很容易知道該表達式的值是一個長度為2,且每個元素值都被初賦值為undefined的數組(註意此時不是數組元素沒有初始化,而是初始化成undefined,這就是跟Array(2)的區別)。

為啥非要寫那麼複雜呢?

即map函數並不會遍曆數組中沒有初始化或者被delete的元素(有相同限制還有forEach, reduce方法)。OK,疑問到此終於真相大白了:寫這麼“複雜”就是為了實現:創建一個長度為20,且每個元素都被初始化的數組。這樣map方法就可以迴圈20次了。

 // 被初始化的數組
 let apply = Array.apply(null, { length: 20 }).map(function (item, index) {
   return {				
     index: index,			// 迴圈20次
   };
 });
 
 // 未被初始化的數組
 let data = Array(20).map(function (item, index) {
   return {
     index: index,		// 不會被執行
   };
 });

如果為了少寫幾個字的話還可以把該表達式修改成:

Array.apply(null, Array(20)); // 第二個參數用Array(20)代替{length: 20}

還可以使用ES6 API創建初始化數組:

// 方法1:
Array.from({length: 20})
 
// 方法2
Array(20).fill(null)

若對您有幫助,請點擊跳轉到B站一鍵三連哦!感謝支持!!!


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 目錄 HC32L110(一) HC32L110晶元介紹和Win10下的燒錄 HC32L110(二) HC32L110在Ubuntu下的燒錄 HC32L110(三) HC32L110的GCC工具鏈和VSCode開發環境 HC32L110(四) HC32L110的startup啟動文件和ld連接腳本 H ...
  • 首先先來瞭解一下TMC5160的3種工作模式 TMC5160通過兩個引腳來控制它的工作模式:SD_MODE和SPI_MODE。 1、當SD_MODE接地,SPI_MODE拉高,TMC5160即工作在模式1(SPI控制模式)。在該模式下,用戶通過SPI介面來設置TMC5160的寄存器。 TMC5160 ...
  • 觀前提示 此處假定你已經安裝好Windows,並且能夠看懂英語。 下載Ubuntu 這裡 不同於一般推薦於英文官網下載,此處建議在中文官網下載。這樣可以利用Ubuntu在國內架設的鏡像,也方便日後使用apt-get等工具安裝軟體。(實際作者並不清楚安裝時是否會自動測試鏡像列表) 即使使用國內官方鏡像 ...
  • 以下介紹項目中的startup和ld文件, 以及HC32L110的啟動機制, 因為是面向 GCC Arm Embedded 工具鏈的版本, 所以 startup 代碼和 ld 連接描述腳本都依據 GCC Arm 工具鏈的格式. ...
  • ClickHouse屬於分析型資料庫,ClickHouse提供了許多數據類型,它們可以劃分為基礎類型、複合類型和特殊類型。其中基礎類型使ClickHouse具備了描述數據的基本能力,而另外兩種類型則使ClickHouse的數據表達能力更加豐富立體。 基礎類型 基礎類型只有數值、字元串和時間三種類型, ...
  • GreatSQL社區原創內容未經授權不得隨意使用,轉載請聯繫小編並註明來源。 GreatSQL是MySQL的國產分支版本,使用上與MySQL一致。 一. XDP Socket示例解析 源碼參見:https://github.com/xdp-project/xdp-tutorial/tree/mast ...
  • 我的另一篇博文中提到JavaScript 有哪些是假值,哪些是真值。對於 null、undefined、"",等一些假值,JavaScript 直接視為 false。 我有一個需求,判斷從瀏覽器中獲取的 Cookie 是否存在,如果存在我就返回 true,否則返回 false。useCookies( ...
  • 每日 3 題 13 以下代碼執行後,控制臺中的輸出內容為? Object.prototype.a = 1; Function.prototype.b = 2; function F() {} var f = new F(); console.log(F.a); console.log(F.b); c ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...