js 迭代对象方法

在JavaScript中，迭代对象的方法主要有以下几种：

1. for...in 循环

基础概念：for...in 循环用于遍历对象的可枚举属性，包括原型链上的属性。

优势：简单易用，可以遍历对象的所有可枚举属性。

应用场景：适用于需要遍历对象所有属性的场景。

示例代码：

const obj = { a: 1, b: 2, c: 3 };
for (let key in obj) {
  if (obj.hasOwnProperty(key)) { // 过滤掉原型链上的属性
    console.log(`${key}: ${obj[key]}`);
  }
}

2. Object.keys()

基础概念：Object.keys() 方法返回一个包含对象自身所有可枚举属性名称的数组。

优势：只返回对象自身的属性，不包括原型链上的属性。

应用场景：适用于需要获取对象自身所有属性名称的场景。

示例代码：

const obj = { a: 1, b: 2, c: 3 };
const keys = Object.keys(obj);
keys.forEach(key => {
  console.log(`${key}: ${obj[key]}`);
});

3. Object.values()

基础概念：Object.values() 方法返回一个包含对象自身所有可枚举属性值的数组。

优势：只返回对象自身的属性值，不包括原型链上的属性。

应用场景：适用于需要获取对象自身所有属性值的场景。

示例代码：

const obj = { a: 1, b: 2, c: 3 };
const values = Object.values(obj);
values.forEach(value => {
  console.log(value);
});

4. Object.entries()

基础概念：Object.entries() 方法返回一个包含对象自身所有可枚举属性键值对的二维数组。

优势：可以同时获取属性名和属性值，便于处理键值对。

应用场景：适用于需要同时获取对象属性名和属性值的场景。

示例代码：

const obj = { a: 1, b: 2, c: 3 };
const entries = Object.entries(obj);
entries.forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});

5. for...of 循环与 Object.entries()

基础概念：结合 for...of 循环和 Object.entries() 方法，可以更简洁地遍历对象的键值对。

优势：代码更简洁，可读性更高。

应用场景：适用于需要遍历对象键值对的场景。

示例代码：

const obj = { a: 1, b: 2, c: 3 };
for (const [key, value] of Object.entries(obj)) {
  console.log(`${key}: ${value}`);
}

6. Map 对象

基础概念：Map 是一种键值对的集合，可以使用任意类型的值作为键。

优势：键可以是任意类型，且保持插入顺序。

应用场景：适用于需要使用非字符串类型作为键的场景。

示例代码：

const map = new Map();
map.set('a', 1);
map.set('b', 2);
map.set('c', 3);

for (const [key, value] of map) {
  console.log(`${key}: ${value}`);
}

常见问题及解决方法

1. 遍历对象时包含原型链上的属性：
   • 使用 hasOwnProperty 方法过滤掉原型链上的属性。
   • 使用 Object.keys()、Object.values() 或 Object.entries() 方法，这些方法只返回对象自身的属性。

• 遍历对象时属性顺序不确定：
  • 使用 Map 对象，它保持插入顺序。
  • 对于普通对象，可以使用 Object.keys() 获取属性名数组，然后对数组进行排序。

通过以上方法，可以根据具体需求选择合适的迭代对象的方法。