JavaScript遍歷對象并獲取key和value的幾種常見方法
在 JavaScript 中，有多種方法可以遍歷對象的屬性并獲取每個(gè)屬性的鍵（key）和值（value）。以下是幾種常見的方法：
使用 for…in 循環(huán)
for…in 循環(huán)用于遍歷對象的可枚舉屬性（包括原型鏈上的屬性）。
const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
if (obj.hasOwnProperty(key)) { // 檢查屬性是否屬于對象本身，而不是原型鏈上的
const value = obj[key];
console.log(key, value);
}
}
使用 Object.keys() 方法
Object.keys() 方法返回一個(gè)數(shù)組，該數(shù)組包含對象自身的所有可枚舉屬性鍵。
const obj = { a: 1, b: 2, c: 3 };
Object.keys(obj).forEach(key => {
const value = obj[key];
console.log(key, value);
});
使用 Object.entries() 方法
Object.entries() 方法返回一個(gè)數(shù)組，數(shù)組中的每個(gè)元素都是一個(gè)包含鍵和值的數(shù)組。
const obj = { a: 1, b: 2, c: 3 };
Object.entries(obj).forEach(([key, value]) => {
console.log(key, value);
});
使用 Object.getOwnPropertyNames() 方法
Object.getOwnPropertyNames() 方法返回一個(gè)數(shù)組，該數(shù)組包含對象自身的所有屬性鍵（無論是否可枚舉）。
const obj = { a: 1, b: 2, c: 3 };
Object.getOwnPropertyNames(obj).forEach(key => {
const value = obj[key];
console.log(key, value);
});
使用 Object.getOwnPropertySymbols() 方法
Object.getOwnPropertySymbols() 方法返回一個(gè)數(shù)組，該數(shù)組包含對象自身的所有 Symbol 類型的屬性鍵。
const obj = { a: 1, b: 2, [Symbol('c')]: 3 };
Object.getOwnPropertySymbols(obj).forEach(sym => {
const value = obj[sym];
console.log(sym, value);
});
使用 Reflect.ownKeys() 方法
Reflect.ownKeys() 方法返回一個(gè)數(shù)組，該數(shù)組包含對象自身的所有屬性鍵（包括不可枚舉屬性和 Symbol 類型的屬性鍵）。
const obj = { a: 1, b: 2, [Symbol('c')]: 3 };
Reflect.ownKeys(obj).forEach(key => {
const value = obj[key];
console.log(key, value);
});
總結(jié)
- 使用 for…in 循環(huán)可以遍歷對象的所有可枚舉屬性，但需要配合 hasOwnProperty 方法來排除原型鏈上的屬性。
- Object.keys() 方法返回一個(gè)包含對象自身所有可枚舉屬性鍵的數(shù)組。
- Object.entries() 方法返回一個(gè)包含對象自身所有可枚舉屬性鍵和值的數(shù)組。
- Object.getOwnPropertyNames() 方法返回一個(gè)包含對象自身所有屬性鍵（無論是否可枚舉）的數(shù)組。
- Object.getOwnPropertySymbols() 方法返回一個(gè)包含對象自身所有 Symbol 類型屬性鍵的數(shù)組。
- Reflect.ownKeys() 方法返回一個(gè)包含對象自身所有屬性鍵（包括不可枚舉屬性和 Symbol 類型的屬性鍵）的數(shù)組。
到此這篇關(guān)于JavaScript遍歷對象并獲取key和value的幾種常見方法的文章就介紹到這了,更多相關(guān)JavaScript遍歷對象并獲取key和value內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了詳解es6超好用的語法糖Decorator，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
JavaScript是一種廣泛使用的腳本語言,為網(wǎng)頁添加交互性和動態(tài)功能提供了強(qiáng)大的支持,在本文中,我們將深入了解JavaScript的基本概念和用法,包括它在HTML中的書寫位置、注釋和結(jié)束符的使用,以及一種常用的函數(shù)——alert語句,感興趣的朋友一起看看吧2023-09-09
首先是通過同步策略來實(shí)現(xiàn)模塊加載與回調(diào)函數(shù)之間進(jìn)行分離，接著是通過異步策略來實(shí)現(xiàn)模塊加載與回調(diào)函數(shù)之間進(jìn)行分離2012-08-08
easywasmplayer實(shí)現(xiàn)視頻流播放示例詳解
這篇文章主要為大家介紹了easywasmplayer實(shí)現(xiàn)視頻流播放示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
JavaScript不刷新實(shí)現(xiàn)瀏覽器的前進(jìn)后退功能
這篇文章主要介紹了JavaScript不刷新實(shí)現(xiàn)瀏覽器的前進(jìn)后退功能,本文給出了HTML5解決方案、老舊瀏覽器的寫法等方法,需要的朋友可以參考下2014-11-11
批量實(shí)現(xiàn)面向?qū)ο蟮膶?shí)例代碼
本文為大家詳細(xì)介紹下面向?qū)ο蟮睦^承以及如何實(shí)現(xiàn)批量實(shí)現(xiàn)面向?qū)ο螅信d趣的可以參考下哈，希望對大家有所幫助2013-07-07
深入淺析javascript立即執(zhí)行函數(shù)
在Javascript中，任何function在執(zhí)行的時(shí)候都會創(chuàng)建一個(gè)執(zhí)行上下文，因?yàn)闉閒unction聲明的變量和function有可能只在該function內(nèi)部，這個(gè)上下文，在調(diào)用function的時(shí)候，提供了一種簡單的方式來創(chuàng)建自由變量或私有子function。2015-10-10
這篇文章主要介紹了Js類的構(gòu)建與繼承案例詳解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
本篇文章主要介紹了webpack開發(fā)跨域問題解決辦法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了JS中的art-template模板如何使用if判斷，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09