」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 在 JavaScript 中建立陣列:綜合指南

在 JavaScript 中建立陣列:綜合指南

發佈於2024-07-30
瀏覽:495

Creating Arrays in JavaScript: A Comprehensive Guide

在 JavaScript 中建立陣列是一項基本任務,但即使是經驗豐富的開發人員也可能會忽略一些細微差別和陷阱。讓我們深入了解基礎知識,並探索數組創建和操作的一些有趣的方面,您可能會發現它們具有啟發性。

基本數組創建

建立陣列最簡單的方法是使用陣列文字:

let arr = [];

然後您可以使用循環填充此數組:

for (let i = 0; i 



這將建立一個包含元素 [0, 1, 2, 3, 4] 的陣列。但是,如果您建立空數組而不填滿它,您將獲得一個沒有項目且沒有空槽的陣列。

使用數組構造函數

創建數組的另一種方法是使用數組建構子:

let arr = Array(5);

當傳遞單一數字參數時,它會建立一個具有指定長度但沒有實際元素的稀疏數組:

console.log(arr.length); // 5
console.log(arr); // [empty × 5]

稀疏數組

稀疏數組具有“空槽”,這可能會在使用 map、filter 或 forEach 等方法時導致意外行為。這些方法跳過空槽:

let arr = Array(5);
arr = arr.map((x, i) => i); // Still [empty × 5]

要填入這樣的數組,需要手動設定值:

arr[0] = 2;
arr[4] = 3;
console.log(arr); // [2, empty × 3, 3]

處理稀疏數組

要有效處理稀疏數組,可以使用 fill 等方法初始化值:

let arr = Array(5).fill(1);
console.log(arr); // [1, 1, 1, 1, 1]

但是填充物件或陣列時要小心:

let arr = Array(5).fill({});
arr[0].name = 'John';
console.log(arr); // [{name: 'John'}, {name: 'John'}, {name: 'John'}, {name: 'John'}, {name: 'John'}]

每個元素引用同一個物件。為了避免這種情況,請使用 map:

let arr = Array(5).fill(0).map(() => ({}));
arr[0].name = 'John';
console.log(arr); // [{name: 'John'}, {}, {}, {}, {}]

Array.from 方法

Array.from 提供了一種從類似陣列或可迭代物件建立陣列的通用方法:

let arr = Array.from({ length: 5 }, (_, i) => i);
console.log(arr); // [0, 1, 2, 3, 4]

在建立二維數組時此方法也可以提供幫助:

let arr2D = Array.from({ length: 5 }, () => Array(5).fill(0));
arr2D[0][0] = 1;
console.log(arr2D); // [[1, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0]]

迭代數組

JavaScript 提供了多種迭代數組的方法,每種方法對稀疏數組的處理方式不同:

  • for 迴圈:處理每個索引,將空槽視為未定義。
  • for...in:迭代數組的索引,跳過空槽。
  • for...of:迭代值,將空槽視為未定義。

結論

了解 JavaScript 中陣列建立和操作的複雜性可以幫助您避免常見陷阱並編寫更有效率的程式碼。無論您使用陣列文字、陣列建構函數或 Array.from 和 fill 等方法,了解這些工具的工作原理都將使您能夠在專案中有效地處理陣列。

如果您發現本指南有幫助,請告訴我。我總是渴望創造更多深入研究 JavaScript 細節的內容。感謝您的閱讀,祝您編碼愉快!

版本聲明 本文轉載於:https://dev.to/sharoztanveer/creating-arrays-in-javascript-a-comprehensive-guide-8do?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • 如何使用Python的記錄模塊實現自定義處理?
    如何使用Python的記錄模塊實現自定義處理?
    使用Python的Loggging Module 確保正確處理和登錄對於疑慮和維護的穩定性至關重要Python應用程序。儘管手動捕獲和記錄異常是一種可行的方法,但它可能乏味且容易出錯。 解決此問題,Python允許您覆蓋默認的異常處理機制,並將其重定向為登錄模塊。這提供了一種方便而係統的方法來捕獲...
    程式設計 發佈於2025-02-07
  • \“(1)vs.(;;):編譯器優化是否消除了性能差異?\”
    \“(1)vs.(;;):編譯器優化是否消除了性能差異?\”
    使用(1)而不是(;;)會導致無限循環的性能差異? 現代編譯器,(1)和(;;)之間沒有性能差異。 是如何實現這些循環的技術分析在編譯器中: perl: S-> 7 8 unstack v-> 4 -e語法ok 在GCC中,兩者都循環到相同的彙編代碼中,如下所示:。 globl t_時 ...
    程式設計 發佈於2025-02-07
  • 如何使用不同數量列的聯合數據庫表?
    如何使用不同數量列的聯合數據庫表?
    合併列數不同的表 當嘗試合併列數不同的數據庫表時,可能會遇到挑戰。一種直接的方法是在列數較少的表中,為缺失的列追加空值。 例如,考慮兩個表,表 A 和表 B,其中表 A 的列數多於表 B。為了合併這些表,同時處理表 B 中缺失的列,請按照以下步驟操作: 確定表 B 中缺失的列,並將它們添加到表的...
    程式設計 發佈於2025-02-07
  • 如何干淨地刪除匿名JavaScript事件處理程序?
    如何干淨地刪除匿名JavaScript事件處理程序?
    在這里工作/},false); 不幸的是,答案是否。除非在Creation中存儲對處理程序的引用。 要解決此問題,請考慮將事件處理程序存儲在中心位置,例如頁面的主要對象,請考慮將事件處理程序存儲在中心位置,否則無法清理匿名事件處理程序。 。這允許在需要時輕鬆迭代和清潔處理程序。
    程式設計 發佈於2025-02-07
  • 如何在Java列表中有效計算元素的發生?
    如何在Java列表中有效計算元素的發生?
    計數列表中的元素出現在列表 中,在java編程中,列舉列表中列舉元素出現的任務來自列表。為此,收集框架提供了全面的工具套件。 在這種情況下,Batocurrences變量將保持值3,代表動物列表中的“ BAT”出現的數量。 &&& [此方法是簡單的,可以得出準確的結果,使其成為計算列表中元素出現的...
    程式設計 發佈於2025-02-07
  • 如何檢查對像是否具有Python中的特定屬性?
    如何檢查對像是否具有Python中的特定屬性?
    方法來確定對象屬性存在尋求一種方法來驗證對像中特定屬性的存在。考慮以下示例,其中嘗試訪問不確定屬性會引起錯誤: >>> a = someClass() >>> A.property Trackback(最近的最新電話): 文件“ ”,第1行, AttributeError:SomeClass實...
    程式設計 發佈於2025-02-07
  • Java是否允許多種返回類型:仔細研究通用方法?
    Java是否允許多種返回類型:仔細研究通用方法?
    在java中的多個返回類型:一個誤解介紹,其中foo是自定義類。該方法聲明似乎擁有兩種返回類型:列表和E。但是,情況確實如此嗎? 通用方法:拆開神秘 [方法僅具有單一的返回類型。相反,它採用機制,如鑽石符號“ ”。 分解方法簽名: :本節定義了一個通用類型參數,E。它表示該方法接受了擴展foo類...
    程式設計 發佈於2025-02-07
  • 如何使用char_length()在mySQL中按字符串長度對數據進行排序?
    如何使用char_length()在mySQL中按字符串長度對數據進行排序?
    [2使用內置的char_length()function。 char_length()和length() 此查詢將從指定的表中檢索所有行,並基於上升順序對它們進行排序指定列的字符長度。帶有更長字符串的行將出現在結果的底部。
    程式設計 發佈於2025-02-07
  • 如何將項目添加到Ienumerable中?
    如何將項目添加到Ienumerable中?
    [2收藏。但是,這不能做到,因為Ienumerable 不一定代表可變的收藏。它甚至可能根本不代表集合。 { 字符串s; 做 { S = Console.Readline(); 收益回報s; } while(!strin...
    程式設計 發佈於2025-02-07
  • 對象擬合:IE和Edge中的封面失敗,如何修復?
    對象擬合:IE和Edge中的封面失敗,如何修復?
    解決此問題,我們採用了一個巧妙的CSS解決方案來解決問題:高度:100%; 高度:auto ; 寬度:100%; //對於水平塊 ,使用絕對定位將圖像定位在中心,以object-fit:object-fit :cover in IE和edge消除了問題。現在,圖像將按比例擴展,保持所需的效果而不...
    程式設計 發佈於2025-02-07
  • 如何克服PHP的功能重新定義限制?
    如何克服PHP的功能重新定義限制?
    克服PHP的函數重新定義限制在PHP中,多次定義一個相同名稱的函數是一個no-no。嘗試這樣做,如提供的代碼段所示,將導致可怕的“不能重新列出”錯誤。 // error:“ coss redeclare foo()” 但是,php工具腰帶中有一個隱藏的寶石:runkit擴展。它使您能夠靈活...
    程式設計 發佈於2025-02-07
  • 如何從Google API中檢索最新的jQuery庫?
    如何從Google API中檢索最新的jQuery庫?
    從Google APIS 問題中提供的jQuery URL是版本1.2.6。對於檢索最新版本,以前有一種使用特定版本號的替代方法,它是使用以下語法: https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js(google hosted...
    程式設計 發佈於2025-02-07
  • 如何使用替換指令在GO MOD中解析模塊路徑差異?
    如何使用替換指令在GO MOD中解析模塊路徑差異?
    克服go mod中的模塊路徑差異 coreos/bbolt:github.com/coreos/ [email受保護]:解析go.mod:模塊將其路徑聲明為:go.etcd.io/bbolt `要解決此問題,您可以在go.mod文件中使用替換指令。只需在go.mod的末尾添加以下行:[&& &...
    程式設計 發佈於2025-02-07
  • 如何使用PHP將斑點(圖像)正確插入MySQL?
    如何使用PHP將斑點(圖像)正確插入MySQL?
    在嘗試將image存儲在mysql數據庫中時,您可能會遇到一個可能會遇到問題。本指南將提供成功存儲您的圖像數據的解決方案。 easudy values('$ this-> ; image_id','file_get_contents($ tmp_imag...
    程式設計 發佈於2025-02-07
  • 如何可靠地檢查MySQL表中的列存在?
    如何可靠地檢查MySQL表中的列存在?
    在mySQL中確定列中的列存在,驗證表中的列存在與與之相比有點困惑其他數據庫系統。常用的方法:如果存在(從信息_schema.columns select * * where table_name ='prefix_topic'和column_name =&...
    程式設計 發佈於2025-02-07

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3