精品秘无码一区二区三区老师-精品秘一区二三区免费雷安-精品蜜桃秘一区二区三区-精品蜜桃秘一区二区三区粉嫩-精品蜜桃一区二区三区-精品蜜臀国产aⅴ一区二区三区

LOGO OA教程 ERP教程 模切知識交流 PMS教程 CRM教程 開發文檔 其他文檔  
 
網站管理員

JavaScript 對象循環遍歷的4種方式,以及它們的優缺點

admin
2025年1月20日 12:5 本文熱度 188

?


如何在JavaScript 中循環對象屬性和值?它與數組不同,它們沒有內置的循環方法。在這篇博文中,我將向您展示:循環 JavaScript 對象的四種不同方法 ,每種方法的優點和缺點。

循環對象鍵

JavaScript 對象鍵或屬性是存儲在對象中的值的名稱或標識符。JavaScript 對象是JavaScript 中的非原始數據類型之一。它們可以是字符串、符號或數字,用于訪問或修改對象的值。例如,person.name 是一個返回 person 對象的名稱值的屬性。

const={  name:"John",  age:30,  favoriteColors:["Red","Green"]};

我們將在整篇文章中使用同一個對象。 

方法 1:JavaScript 使用 Object.keys() 循環對象鍵

JavaScript Object.keys()方法返回對象的所有鍵(或屬性名稱)的數組。然后,您可以使用 for 循環或 forEach() 方法來迭代數組并訪問鍵。要循環訪問 person 對象的鍵,您可以使用 Object.keys() 靜態方法,如下所示:

const keys = Object.keys(person); // Output: ["name", "age", "favoriteColors"]
// 1. Using a for() loopfor (let i = 0; i < keys.length; i++) {  console.log(keys[i]);}// Output: "name", "age", "favoriteColors"
// 2. Using a forEach() methodkeys.forEach(key => {  console.log(key); });// Output: "name", "age", "favoriteColors"

這種方法的優點是:

  • 它簡單易用。

  • 它適用于任何對象,無論其結構或復雜性如何。

  • 它與舊版瀏覽器兼容,因為它是 ECMAScript 5 標準的一部分。

這種方法的缺點是:

  • 此方法為您提供對象自己的鍵。它忽略從原型鏈獲得的密鑰。有時,這正是您所需要的。其他時候,您可能也想包含這些鍵。

  • 對象的鍵沒有固定的順序。這意味著您不能總是期望它們以相同的順序出現。如果您的邏輯取決于按鍵順序,請小心,因為它可能不會按您的預期工作。

  • 這段代碼創建了另一個數組。這會減慢您的代碼速度并使用更多內存。如果物體很大或有很多部分,情況會更糟。

方法 2:使用 Object.values() 循環對象值

Object.values() 為我們提供了一個包含對象所有值的數組。您可以循環數組并輕松獲取值。例如,看看這個 person 對象。您可以像這樣使用 Object.values() :

// Output: ["John", 40, ["Red", "Green"]]
// 1. Using a for() loopfor (let index = 0; index < values.length; index++) {  console.log(values[index]);}// Output: ["John", 40, ["Red", "Green"]
// 2. Using a forEach() methodvalues.forEach(key => {  });// Output: ["John", 40, ["Red", "Green"]

這種方法的優點是:

  • 它簡單易用。

  • 它適用于任何對象,無論其結構或復雜性如何。

  • 它是 ECMAScript 2017 標準的一部分,這意味著它是一項現代且受到廣泛支持的功能。

這種方法的缺點是:

  • 它只返回對象本身的值。這意味著它不包括從對象原型鏈繼承的值。這可能是也可能不是您想要的,具體取決于您的用例。

  • Object.values() 不關心值的順序,因為對象沒有排序。如果您的代碼依賴于順序,這可能會成為問題。 

  • 這是一個新功能,因此一些舊瀏覽器不支持它。在這些情況下,您可能需要使用一些技巧才能使其發揮作用。

  • Object.values() 使用值創建一個新數組,這會影響代碼使用的速度和內存量。如果您的對象很大或很復雜,這可能是一個問題。

方法 3:使用 Object.entries() 循環對象條目

你想獲取一個對象的鍵值對嗎?你可以使用Object.entries()!它為您提供了一個數組數組,其中每個子數組都有一個鍵和一個值。然后,您可以使用 for 或 forEach 循環數組,并根據需要使用條目。 

例如,使用與之前相同的 person 對象,您可以使用 Object.entries() 方法,如下所示:

// 1. Using a for() loopfor (let index = 0; index < entries.length; index++) {  }// Output: ["name", "John"], ["age", 30], ["favoriteColors", ["Red", "Green"]]
// 2. Using a forEach() methodentries.forEach(entry => {  });// Output: ["name", "John"], ["age", 30], ["favoriteColors", ["Red", "Green"]]

這種方法的優點是:

  • 它簡單易用。

  • 它適用于任何對象,無論其結構或復雜性如何。

  • 它是 ECMAScript 2017 標準的一部分,這意味著它是一項現代且受到廣泛支持的功能。

  • 它返回對象的鍵和值,如果您需要在邏輯中訪問這兩個鍵和值,這會很有用。

這種方法的缺點是:

  • 它只返回對象自己的條目,這意味著它不包括從對象原型鏈繼承的條目。這可能是也可能不是您想要的,具體取決于您的用例。

  • 它不保證條目的順序,因為對象本質上是無序的。如果您的邏輯依賴于條目的順序,這可能會導致一些問題。

  • 它會創建一個額外的數組,這可能會影響代碼的性能和內存使用情況,特別是在對象很大或嵌套的情況下。

  • 它與舊版瀏覽器不兼容,因為它是一個相對較新的功能。您可能需要使用 polyfill 或轉譯器才能使其在較舊的環境中工作。

方法 4:JavaScript 使用 for...in 循環對象屬性

使用 for...in 循環,您可以遍歷對象的所有屬性。它為您提供一個保存屬性名稱的變量。然后您可以使用帶有點或括號的變量來獲取屬性值。

例如,使用與之前相同的 person 對象,我們可以使用 for...in 語句,如下所示:

const person = {  name: "John",  age: 30,  favoriteColors: ["Red", "Green"]};
// Using a for...in statementfor (let key in person) {  console.log(key);         // Output: "name", "age", "favoriteColors"  console.log(person[key]); // Output: "John", 30, ["Red", "Green"]}

這種方法的優點是:

  • 它簡單易用。

  • 它不會創建額外的數組,這可能會提高代碼的性能和內存使用率,特別是在對象很大或嵌套的情況下。

  • 它返回對象的鍵和值,如果您需要在邏輯中訪問這兩個鍵和值,這會很有用。

這種方法的缺點是:

  • 它返回對象的所有可枚舉屬性,這意味著它包括從對象原型鏈繼承的屬性。這可能是也可能不是您想要的,具體取決于您的用例。如果只想循環對象自身的屬性,則需要使用 hasOwnProperty() 方法過濾掉繼承的屬性。

  • 它不保證屬性的順序,因為對象本質上是無序的。如果您的邏輯依賴于屬性的順序,這可能會導致一些問題。

  • 它與 JavaScript 的一些新功能不兼容,例如 Symbol 屬性或 Object.defineProperty()。這些功能可以創建 for…in 語句不可見的不可枚舉屬性。

不同循環對象屬性的比較

這是四種方法的快速比較表:

方法退貨擁有/全部命令表現兼容性
Object.keys()按鍵自己的低的高的
Object.values()價值觀自己的低的中等的
對象.entries()鍵值自己的低的中等的
for...in特性全部高的低的

在 JavaScript 中循環對象的最佳方法取決于您想要實現的目標以及您想要如何編寫代碼。但是,一般的經驗法則是,如果要訪問對象的鍵、值或條目,則使用 Object 方法;如果要訪問對象的屬性及其原型鏈,則使用 for...in 語句。


該文章在 2025/1/21 9:34:53 編輯過
關鍵字查詢
相關文章
正在查詢...
點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。
點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理,結合碼頭的業務特點,圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體,是物流碼頭及其他港口類企業的高效ERP管理信息系統。
點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。
點晴免費OA是一款軟件和通用服務都免費,不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。
Copyright 2010-2025 ClickSun All Rights Reserved

主站蜘蛛池模板: 精品斡国亚洲AV无码久久品尝 | 国产十八禁啪啦拍无遮拦视频 | 久久精品国产亚洲麻豆 | 亚洲欧美日韩在线不卡 | 亚洲丰满熟女一区二区蜜桃 | 国产熟妇BBWBBWBBW歼尸 | 91久久九九精品国产综合 | 精品日产一卡2卡3卡4卡乱码 | 日本老熟欧美老熟妇 | 亚洲日韩av一区二区三区中文 | 国产裸体歌舞一区二区 | 无码精品人妻一区二区三 | 日韩欧美一区二区三区不卡视频 | 小说视频日韩亚av无码一区二区三区 | 久久久久国色av免费观看性色 | 日日摸夜夜添无码无码AV | 伊人久久大香线蕉综合亚洲 | 精品少妇一区二区三区免费观 | 亚洲一区二区三区在线免费观看 | v一区无码内射国产 | 无码天堂va亚洲va在线va | 色悠久久久久综合网国产 | 国产白嫩精品 | 久久精品国产亚洲avapp下 | 99久久精品免费观看国产 | 国产亚洲av无码av男人的天堂 | 无码家庭乱欲 | 国产成人av无码精品 | 综合久久一区二区三区 | 国产区一区二区三区 | 国产视频永久a级毛片 | 一区国产视频页 | 国产精品白浆在线观看免费 | 亚洲第一中文字幕 | 999精品国产人妻无码系列久久 | 国产精品一区二区AV交换 | 日韩系列av专区一区二区三区 | 午夜DJ国产精华日本无码 | 精品成品国色天香卡一卡二摄像头 | 三叶草欧码成人毛片 | 性欧美XXⅩ澳门永久成人免费网站 |