JavaScript遍歷對象并獲取key和value的幾種常見方法
更新時間：2025年07月10日 09:58:49 作者：超人不會飛-_-||
在JavaScript中,遍歷對象的屬性和值是常見的操作,特別是在處理數(shù)據(jù)對象或者進(jìn)行對象的序列化時,這里我們將深入探討幾種JavaScript遍歷對象并獲取key和value的幾種常見方法,需要的朋友可以參考下
在 JavaScript 中，有多種方法可以遍歷對象的屬性并獲取每個屬性的鍵（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() 方法返回一個數(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() 方法返回一個數(shù)組，數(shù)組中的每個元素都是一個包含鍵和值的數(shù)組。
const obj = { a: 1, b: 2, c: 3 };
Object.entries(obj).forEach(([key, value]) => {
console.log(key, value);
});
使用 Object.getOwnPropertyNames() 方法
Object.getOwnPropertyNames() 方法返回一個數(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() 方法返回一個數(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() 方法返回一個數(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() 方法返回一個包含對象自身所有可枚舉屬性鍵的數(shù)組。
- Object.entries() 方法返回一個包含對象自身所有可枚舉屬性鍵和值的數(shù)組。
- Object.getOwnPropertyNames() 方法返回一個包含對象自身所有屬性鍵（無論是否可枚舉）的數(shù)組。
- Object.getOwnPropertySymbols() 方法返回一個包含對象自身所有 Symbol 類型屬性鍵的數(shù)組。
- Reflect.ownKeys() 方法返回一個包含對象自身所有屬性鍵（包括不可枚舉屬性和 Symbol 類型的屬性鍵）的數(shù)組。
到此這篇關(guān)于JavaScript遍歷對象并獲取key和value的幾種常見方法的文章就介紹到這了,更多相關(guān)JavaScript遍歷對象并獲取key和value內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了JavaScript中ahooks處理DOM的方法，主要通過ahooks對DOM類Hooks使用規(guī)范，以及源碼中是如何去做處理的，具體詳細(xì)介紹需要的小伙伴可以參考一下下面文章內(nèi)容2022-06-06
微信小程序?qū)崿F(xiàn)發(fā)送模板消息功能示例【通過openid推送消息給用戶】
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)發(fā)送模板消息功能,結(jié)合實例形式分析了微信小程序?qū)崿F(xiàn)通過openid推送消息給用戶相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
這篇文章主要為大家詳細(xì)介紹了Ionic默認(rèn)的Tabs模板使用實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
下面小編就為大家?guī)硪黄猦tml+js實現(xiàn)簡單的計算器代碼(加減乘除)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
這篇文章主要介紹了javascript中in運算符用法,實例分析了in運算符的相關(guān)使用技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
項目中常遇到輸入框檢查的需求，比如即時搜索，用change事件？change事件失去焦點才發(fā)生，無法做到即時。keypresss事件？能監(jiān)聽到鍵盤，但監(jiān)聽不到鼠標(biāo)復(fù)制粘貼，不完美2014-09-09
js 將線性數(shù)據(jù)轉(zhuǎn)為樹形的示例代碼
這篇文章主要介紹了js 將線性數(shù)據(jù)轉(zhuǎn)為樹形的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
xml 封裝與解析 javascript和C#中的分別實現(xiàn)代碼。2009-07-07
通過JavaScript實現(xiàn)CSS和JS文件的動態(tài)加載
在現(xiàn)代Web開發(fā)中,動態(tài)加載CSS和JavaScript文件是一個常見的需求,這種技術(shù)可以用來優(yōu)化頁面加載速度,減少初始加載時間,并提高用戶體驗,本文將詳細(xì)介紹如何通過JavaScript實現(xiàn)CSS和JS文件的動態(tài)加載,包括不同的加載方法、注意事項以及最佳實踐2024-11-11
這篇文章主要為大家介紹了ChatGPT?之?Fetch請求的內(nèi)容解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03