ES6遍历对象的方法

一、for…in循环

let obj = {a: 1, b: 2, c: 3};

for (let key in obj) {
  console.log(key); // 输出 'a' 'b' 'c'
  console.log(obj[key]); // 输出 1 2 3
}

for…in循环是一种简单的遍历对象属性的方式，它可以遍历对象的所有可枚举属性（包括继承的属性），并且以随机顺序进行遍历。使用for…in循环的关键是要注意该循环遍历的是属性名而不是属性值，因此需要通过对象[key]的方式来获取属性值。

不过需要注意的是，for…in循环并不总是能够准确遍历出对象的所有属性，如果对象的原型链上一个属性是不可枚举的（通过Obejct.defineProperty定义为不可枚举），那么for…in循环遍历的时候就不会出现此属性。

二、Object.keys()

let obj = {a: 1, b: 2, c: 3};
let keys = Object.keys(obj);

console.log(keys); // 输出 ['a', 'b', 'c']

Object.keys()方法接受一个对象作为参数，返回一个由该对象的所有可枚举属性的属性名组成的数组，属性名的顺序与for…in循环遍历的顺序相同。

需要注意的是，Object.keys()只返回对象自身的属性而不包括继承的属性，因此它比for…in循环更可靠。

三、Object.values()

let obj = {a: 1, b: 2, c: 3};
let values = Object.values(obj);

console.log(values); // 输出 [1, 2, 3]

Object.values()方法接受一个对象作为参数，返回一个由该对象的所有可枚举属性的属性值组成的数组，数组中属性值的顺序与Object.keys()返回的属性名的顺序相同。

需要注意的是，Object.values()只返回对象自身的属性值而不包括继承的属性值，因此它比for…in循环更可靠。

四、Object.entries()

let obj = {a: 1, b: 2, c: 3};
let entries = Object.entries(obj);

console.log(entries); // 输出 [['a', 1], ['b', 2], ['c', 3]]

Object.entries()方法接受一个对象作为参数，返回一个由该对象的所有可枚举属性的属性名和属性值组成的数组，数组中每个元素是一个由两个元素组成的数组，第一个元素是属性名，第二个元素是属性值，数组中属性名和属性值的顺序与for…in循环遍历的顺序相同。

需要注意的是，Object.entries()只返回对象自身的属性名和属性值而不包括继承的属性名和属性值，因此它比for…in循环更可靠。

五、Symbol.iterator迭代器

let obj = {a: 1, b: 2, c: 3};
obj[Symbol.iterator] = function() {
  let keys = Object.keys(this);
  let index = 0;
  return {
    next: () => {
      if (index < keys.length) {
        return {value: this[keys[index++]], done: false};
      } else {
        return {done: true};
      }
    }
  };
};

for (let value of obj) {
  console.log(value); // 输出 1 2 3
}

Symbol.iterator是ES6新引入的一种机制，可用于定制对象的迭代行为。对象只要部署了Symbol.iterator属性，就可以通过for…of循环遍历其属性值。

对象的Symbol.iterator属性是一个函数，执行该函数将返回一个迭代器对象，该迭代器对象必须包含一个next()方法，执行该方法将返回一个对象，该对象包含两个属性，value和done，value表示属性值，done表示迭代是否结束。

上述代码通过自定义Symbol.iterator属性，实现了遍历对象属性值的功能。

六、Generator函数

let obj = {a: 1, b: 2, c: 3};
obj[Symbol.iterator] = function* () {
  let keys = Object.keys(this);
  for (let i = 0; i < keys.length; i++) {
    yield this[keys[i]];
  }
};

for (let value of obj) {
  console.log(value); // 输出 1 2 3
}

Generator函数是ES6新引入的一种函数类型，可以用于定义迭代器。Generator函数的特点是能够通过yield关键字，将函数的执行过程暂停，然后再次执行时可以继续从暂停的位置继续执行。

上述代码通过定义一个Generator函数作为Symbol.iterator属性的值，实现了遍历对象属性值的功能。

七、Proxy对象

let obj = {a: 1, b: 2, c: 3};
let proxiedObj = new Proxy(obj, {
  ownKeys: function(target) {
    return ['a', 'b', 'c'];
  },
  getOwnPropertyDescriptor: function(target, key) {
    return {value: target[key], writable: true, enumerable: true, configurable: true};
  }
});

for (let value of proxiedObj) {
  console.log(value); // 输出 1 2 3
}

Proxy对象是ES6新引入的一种对象类型，可以用于拦截对象的操作。其中ownKeys和getOwnPropertyDescriptor两个拦截器方法可以用于支持遍历对象属性值的功能。

ownKeys方法接受一个目标对象为参数，返回一个数组，该数组包含了目标对象的所有自身属性名和Symbol类型的属性名。在上述代码中，ownKeys被拦截并且返回了一个包含所有自身属性名的数组。

getOwnPropertyDescriptor方法接受一个目标对象和一个属性名为参数，返回一个对象，该对象包含了指定属性的属性描述符。在上述代码中，getOwnPropertyDescriptor被拦截并且返回了一个包含目标对象属性值和属性描述符的对象。

通过使用Proxy对象可以非常灵活地定制对象遍历行为。

原创文章，作者：LTKMF，如若转载，请注明出处：https://www.506064.com/n/351542.html