js-遍历数组或对象

JS 遍历数组或对象的方法

1. 遍历数组

1.1 最传统的 for 循环

1.2 ES5 新增的 for in 方法

注意，这里的 i 是数组元素的索引。

1.3 ES6 新增的 for of 方法

注意，这里的 i 是数组元素的值。

1.4 forEach() 方法

forEach 方法接收一个回调函数作为参数，其会对数组中的每一个元素执行该函数。

该回调函数有两个可选参数：

• item — 遍历到的当前元素
• index — 当前元素的索引

但注意，forEach 方法中间不能退出循环，且对于空数组不会执行回调函数！

实际上，除了 forEach，还可以用很多数组方法来遍历数组，例如：filter、map、reduce、every、some等。

2. 遍历对象

2.1 for in 循环

for in 专门用于遍历对象的可枚举属性，包括 prototype 原型链上的属性，因此性能会比较差。

至于可枚举属性，可以通俗理解为会出现在对象的迭代(例如：for in 循环等)中的属性。

具体来说，是在用 defineProperty() 方法为对象添加属性时， enumerable 参数配置 true的属性。

例如：

var obj = { a: 2, b: 4, c: 6 };
for (let key in obj) {
  console.log(key);
}
// a b c
// 所以，遍历过程中拿到的是对象的属性名，即 key

// for in 会将对象原型链上的属性也遍历到
let obj1 = { a: 2, b: 4, c: 6 };
obj1.__proto__.my = 7
for (let key in obj1) {
  console.log(key);
}
// a b c my

// 此外，for in 不能遍历到对象的不可枚举属性
let obj2 = { a: 2, b: 4, c: 6 };
Object.defineProperty(obj2, 'u', {
  enumerable: false,
  value: 10,
})
for (let key in obj2) {
  console.log(key);
}

2.2 Object.keys() 和 Object.values()

Object.keys() 会返回一个新数组，包含对象的所有可枚举属性；

Object.values() 会返回一个新数组，包含对象的所有属性值；

var obj = { a: 2, b: 4, c: 6 };
// Object.keys()
Object.keys(obj).forEach(key => {
  console.log(key);
})
// a b c

但注意，Object.keys() 方法只查找对象的自定义属性！

2.3 Object.getOwnPropertyNames()

使用 Object.getOwnPropertyNames(obj) 返回一个数组，包含对象自身的所有属性（包括不可枚举属性）

var person = {name: 'xiaoming', sex: '男'}
Object.defineProperty(person, 'id', {
  enumerable: false,
  value: 3123123,
})
console.log(Object.getOwnPropertyNames(person))
// name sex id

此时，就可以通过遍历数组的方法，拿到 key 和 value，进而进行操作。

2.4 遍历对象方法的区别