js 怎样遍历对象的属性和值-js教程-PHP中文网

js 怎样遍历对象的属性和值

月夜之吻

发布： 2025-08-22 15:17:01

原创

1016人浏览过

遍历对象属性和值的核心方法包括：1. 使用for...in循环结合hasownproperty()过滤自身属性；2. 使用object.keys()遍历自身可枚举属性名；3. 使用object.values()获取属性值数组；4. 使用object.entries()同时获取键值对数组；5. 使用object.getownpropertysymbols()遍历symbol属性；6. 使用reflect.ownkeys()遍历所有自身属性，包括字符串和symbol类型；其中for...in会遍历原型链属性，需用hasownproperty()排除，而object.keys/values/entries仅遍历自身可枚举属性；遍历顺序在es6及以上版本中基本按属性添加顺序或整数索引升序保证，但不建议依赖顺序，如需特定顺序应先提取到数组并排序；性能上object.keys() + foreach()通常略优于for...in + hasownproperty()，但差异在现代引擎中可忽略，选择应基于可读性和需求。

js 怎样遍历对象的属性和值

直接遍历对象的属性和值，核心在于理解JavaScript中对象属性的访问方式以及循环机制。通常，我们会用到

for...in

登录后复制

循环或者

Object.keys()

登录后复制

、

Object.values()

登录后复制

、

Object.entries()

登录后复制

等方法。选择哪种方式取决于你的具体需求，比如是否需要考虑原型链上的属性，或者是否需要同时访问属性和值。

解决方案：

最常用的方法是使用

for...in

登录后复制

循环。它会遍历对象自身以及原型链上所有可枚举的属性。如果你只想遍历对象自身的属性，可以使用

hasOwnProperty()

登录后复制

方法进行过滤。

const myObject = {
  name: "John Doe",
  age: 30,
  city: "New York"
};

for (let key in myObject) {
  if (myObject.hasOwnProperty(key)) {
    console.log(`属性: ${key}, 值: ${myObject[key]}`);
  }
}

登录后复制

另一种方法是使用

Object.keys()

登录后复制

，它会返回一个包含对象自身所有可枚举属性名称的数组。然后，你可以使用

forEach()

登录后复制

或其他数组方法来遍历这个数组。

const myObject = {
  name: "John Doe",
  age: 30,
  city: "New York"
};

Object.keys(myObject).forEach(key => {
  console.log(`属性: ${key}, 值: ${myObject[key]}`);
});

登录后复制

如果你需要同时访问属性和值，并且希望得到一个包含键值对的数组，可以使用

Object.entries()

登录后复制

。它会返回一个包含所有

[key, value]

登录后复制

对的数组。

const myObject = {
  name: "John Doe",
  age: 30,
  city: "New York"
};

Object.entries(myObject).forEach(([key, value]) => {
  console.log(`属性: ${key}, 值: ${value}`);
});

登录后复制

Object.values()

登录后复制

方法则直接返回对象自身所有可枚举属性的值的数组，不需要属性名。

const myObject = {
  name: "John Doe",
  age: 30,
  city: "New York"
};

Object.values(myObject).forEach(value => {
  console.log(`值: ${value}`);
});

登录后复制

如何避免遍历到原型链上的属性？

使用

hasOwnProperty()

登录后复制

方法是关键。

for...in

登录后复制

循环会遍历到原型链上的属性，这在某些情况下可能不是你想要的。

hasOwnProperty()

登录后复制

方法可以判断一个属性是否是对象自身定义的，而不是从原型链上继承来的。

Object.prototype.protoProperty = "I'm from prototype"; // 模拟原型链上的属性

const myObject = {
  name: "John Doe",
  age: 30,
  city: "New York"
};

for (let key in myObject) {
  if (myObject.hasOwnProperty(key)) {
    console.log(`属性: ${key}, 值: ${myObject[key]}`); // 只会输出myObject自身的属性
  } else {
    console.log(`原型链属性: ${key}, 值: ${myObject[key]}`); // 输出原型链上的属性
  }
}

登录后复制

Object.keys()

登录后复制

、

Object.values()

登录后复制

、

Object.entries()

登录后复制

本身就只遍历对象自身的属性，所以不需要额外使用

hasOwnProperty()

登录后复制

。

壁纸样机神器

免费壁纸样机生成

查看详情

不同遍历方法在性能上有什么差异？

通常情况下，

Object.keys()

登录后复制

forEach()

登录后复制

的性能会比

for...in

登录后复制

hasOwnProperty()

登录后复制

略好一些，因为

for...in

登录后复制

需要每次循环都检查

hasOwnProperty()

登录后复制

。但是，现代 JavaScript 引擎对这些方法都做了优化，所以在实际应用中，除非是处理非常大的对象，否则性能差异通常可以忽略不计。

选择哪种方法更多取决于代码的可读性和你的具体需求。如果你需要同时访问属性和值，

Object.entries()

登录后复制

可能更方便。如果你只需要遍历对象自身的属性，

Object.keys()

登录后复制

可能更清晰。

需要考虑 Symbol 类型的属性吗？

默认情况下，上面提到的方法只会遍历对象的可枚举属性，不会遍历 Symbol 类型的属性。如果你需要遍历 Symbol 类型的属性，可以使用

Object.getOwnPropertySymbols()

登录后复制

方法来获取对象自身所有的 Symbol 属性，然后进行遍历。

const mySymbol = Symbol("mySymbol");

const myObject = {
  name: "John Doe",
  [mySymbol]: "Symbol Value"
};

const symbols = Object.getOwnPropertySymbols(myObject);

symbols.forEach(symbol => {
  console.log(`Symbol: ${symbol.toString()}, 值: ${myObject[symbol]}`);
});

登录后复制

如果要同时遍历可枚举属性和 Symbol 属性，可以使用

Reflect.ownKeys()

登录后复制

方法。

const mySymbol = Symbol("mySymbol");

const myObject = {
  name: "John Doe",
  [mySymbol]: "Symbol Value"
};

const allKeys = Reflect.ownKeys(myObject);

allKeys.forEach(key => {
  console.log(`属性: ${key.toString()}, 值: ${myObject[key]}`);
});

登录后复制

遍历顺序是否可以保证？

在 ES5 及更早的版本中，对象的属性遍历顺序是不确定的。但在 ES2015 (ES6) 及之后的版本中，对象的属性遍历顺序在一定程度上得到了保证：

对于整数索引属性（array index properties，即属性名可以被转换为非负整数的属性），会按照索引的升序进行遍历。
对于字符串属性，会按照它们被添加到对象中的顺序进行遍历。
Symbol 属性的遍历顺序也按照它们被添加到对象中的顺序进行。

需要注意的是，如果对象在遍历过程中被修改，遍历顺序可能会受到影响。另外，不同的 JavaScript 引擎在某些情况下可能会有不同的实现，所以最好不要依赖于特定的遍历顺序。如果你需要特定的顺序，可以先将属性名或键值对提取到一个数组中，然后对数组进行排序。

以上就是js 怎样遍历对象的属性和值的详细内容，更多请关注php中文网其它相关文章！