本文详细讲解JavaScript中遍历对象Key和Value的三种常用方法。首先介绍利用Object.keys()和Object.values()将对象转化为数组后使用forEach进行遍历，其次演示for...in循环及其处理原型链属性的hasOwnProperty过滤技巧。通过具体代码示例，帮助开发者掌握不同场景下的最佳实践。
首先声明一个用于演示的对象：
let obj = {
name: 'Kamen',
age: '23',
hobby: 'eat eat eat'
}方法一：将对象转化为数组后使用forEach遍历
遍历对象的所有属性（Key）
//遍历对象属性
Object.keys(obj).forEach(key => {
console.log(key)
})
关于Object.keys()方法：该方法返回一个由给定对象自身可枚举属性组成的数组，数组中属性名的排列顺序与正常循环遍历该对象时返回的顺序一致。
具体示例如下：
// 简单数组
const arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // console: ['0', '1', '2']
// 类数组对象
const obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); // console: ['0', '1', '2']
// 具有随机键顺序的类数组对象
const anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(anObj)); // console: ['2', '7', '100']
// getFoo 是一个不可枚举的属性
const myObj = Object.create({}, {
getFoo: {
value() { return this.foo; }
}
});
myObj.foo = 1;
console.log(Object.keys(myObj)); // console: ['foo']
遍历对象的所有属性值（Value）
//遍历对象属性值
Object.values(obj).forEach(val => {
console.log(val)
})
关于Object.values()方法：该静态方法返回给定对象自身可枚举字符串键属性值的数组。
具体示例如下：
const obj = { foo: "bar", baz: 42 };
console.log(Object.values(obj)); // ['bar', 42]
// Array-like object
const arrayLikeObj1 = { 0: "a", 1: "b", 2: "c" };
console.log(Object.values(arrayLikeObj1)); // ['a', 'b', 'c']
// Array-like object with random key ordering
// When using numeric keys, the values are returned in the keys' numerical order
const arrayLikeObj2 = { 100: "a", 2: "b", 7: "c" };
console.log(Object.values(arrayLikeObj2)); // ['b', 'c', 'a']
// getFoo is a non-enumerable property
const myObj = Object.create(
{},
{
getFoo: {
value() {
return this.foo;
},
},
},
);
myObj.foo = "bar";
console.log(Object.values(myObj)); // ['bar']
方法二：使用for...in循环遍历
for( let key in obj ){
//遍历对象属性
console.log(key)
//遍历对象属性值
console.log(obj[key])
}
需要注意：for...in循环会继承原型链上的所有属性，例如：
Object.prototype.pet = 'open'
for( let key in obj ){
console.log(key)
console.log(obj[key])
}
console.log(obj)
为避免上述情况，可以使用hasOwnProperty方法进行过滤：
Object.prototype.pet = 'open'
for( let key in obj ){
if (obj.hasOwnProperty(key) === true){
console.log(key)
console.log(obj[key])
}
}
console.log(obj)
总结
到此这篇关于js遍历对象key和value的文章就介绍到这了,更多相关js遍历对象key和value内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！