ES7 如何遍历对象的方法

在前端开发中，经常需要遍历对象来操作数据。ES7 提供了一些新的语法来遍历对象，本文将详细介绍这些方法及其使用。

Object.entries()

Object.entries() 方法返回一个给定对象自己可枚举属性的键值对数组。这个方法提供了一种遍历对象的简洁方式。

const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [["foo", "bar"], ["baz", 42]]

Object.values()

Object.values() 方法返回一个给定对象自己可枚举属性的值数组。

const obj = { foo: 'bar', baz: 42 };
console.log(Object.values(obj)); // ["bar", 42]

Object.getOwnPropertyDescriptors()

Object.getOwnPropertyDescriptors() 方法返回一个给定对象自己所有属性的属性描述符。

// javascriptcn.com 代码示例
const obj = {
  name: '张三',
  age: 18,
  get fullName() {
    return this.name;
  }
};
console.log(Object.getOwnPropertyDescriptors(obj)); 
/*
{
  name: {value: "张三", writable: true, enumerable: true, configurable: true},
  age: {value: 18, writable: true, enumerable: true, configurable: true},
  fullName: {get: ƒ, set: undefined, enumerable: true, configurable: true}
}
*/

Object.getOwnPropertyNames()

Object.getOwnPropertyNames() 方法返回一个给定对象自己的属性名称的数组，包括不可枚举属性。

const obj = {
  name: '张三',
  age: 18
};
console.log(Object.getOwnPropertyNames(obj)); // ["name", "age"]

Object.getOwnPropertySymbols()

Object.getOwnPropertySymbols() 方法返回一个给定对象自己的符号属性的数组。

const obj = {
  [Symbol('name')]: '张三',
  [Symbol('age')]: 18
};
console.log(Object.getOwnPropertySymbols(obj)); // [Symbol(name), Symbol(age)]

Reflect.ownKeys()

Reflect.ownKeys() 方法返回一个给定对象自己所有属性的名称和符号的数组。

const obj = {
  [Symbol('name')]: '张三',
  age: 18
};
console.log(Reflect.ownKeys(obj)); // ["age", Symbol(name)]

总结

ES7 提供了多种遍历对象的方法，可以根据实际需求选择合适的方法。这些方法不仅可以提高开发效率，还可以让代码更加简洁易读。建议开发者在日常开发中多加使用。

示例代码

// javascriptcn.com 代码示例
const obj = {
  name: '张三',
  age: 18,
  get fullName() {
    return this.name;
  }
};

// 遍历所有属性的属性描述符
console.log(Object.getOwnPropertyDescriptors(obj)); 

// 遍历所有属性的属性名称，包括不可枚举属性
console.log(Object.getOwnPropertyNames(obj)); 

// 遍历所有属性的符号属性
console.log(Object.getOwnPropertySymbols(obj)); 

// 遍历所有属性的名称和符号
console.log(Reflect.ownKeys(obj)); 

// 遍历所有属性的值
console.log(Object.values(obj)); 

// 遍历所有属性的键值对
console.log(Object.entries(obj));

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6567139dd2f5e1655dffa473