前端必需知道的7种JS对象遍历方法

2023-10-28 16:39:17

在前端开发中，对象是不可或缺的数据结构，对象遍历则是操作对象数据的关键。掌握高效的遍历方法，不仅可以提升代码效率，更能增强代码可读性，为前端应用奠定坚实的基础。本文将深入探究7种必备的JS对象遍历方法，从基础的for...in到高级的Object.getOwnPropertySymbols()，循序渐进，为您提供全面的遍历指南。

1. for...in：经典遍历

for...in是一种古老但仍然常用的遍历方法，它通过遍历对象的键名（属性名）来获取值。

const obj = {
  name: 'John',
  age: 30,
  hobby: 'coding'
};

for (let key in obj) {
  console.log(key + ': ' + obj[key]);
}

输出：

name: John
age: 30
hobby: coding

2. Object.keys()：返回键名数组

Object.keys()方法返回一个包含对象所有键名的数组。它比for...in更简洁，并且可以避免遍历不可枚举的属性（如继承的属性）。

const keys = Object.keys(obj);

for (let i = 0; i < keys.length; i++) {
  console.log(keys[i] + ': ' + obj[keys[i]]);
}

输出：

name: John
age: 30
hobby: coding

3. Object.values()：返回值数组

与Object.keys()类似，Object.values()方法返回一个包含对象所有值的数组。它适用于需要获取对象值的情况。

const values = Object.values(obj);

for (let i = 0; i < values.length; i++) {
  console.log(values[i]);
}

输出：

John
30
coding

4. Object.entries()：返回键值对数组

Object.entries()方法返回一个包含对象所有键值对的数组，每个键值对是一个长度为2的数组。它非常适合需要同时访问键名和值的场景。

const entries = Object.entries(obj);

for (let i = 0; i < entries.length; i++) {
  console.log(entries[i][0] + ': ' + entries[i][1]);
}

输出：

name: John
age: 30
hobby: coding

5. Object.getOwnPropertyNames()：返回可枚举键名数组

Object.getOwnPropertyNames()方法返回一个包含对象所有可枚举键名的数组。与Object.keys()类似，但仅返回对象自身的可枚举属性，不包括继承的属性。

const names = Object.getOwnPropertyNames(obj);

for (let i = 0; i < names.length; i++) {
  console.log(names[i] + ': ' + obj[names[i]]);
}

输出：

name: John
age: 30
hobby: coding

6. Object.getOwnPropertySymbols()：返回Symbol属性数组

Object.getOwnPropertySymbols()方法返回一个包含对象所有Symbol属性的数组。Symbol属性是ES6中引入的一种特殊类型，用于定义唯一的属性标识符。

const symbols = Object.getOwnPropertySymbols(obj);

for (let i = 0; i < symbols.length; i++) {
  console.log(symbols[i] + ': ' + obj[symbols[i]]);
}

输出：

Symbol(secret): undefined

7. 反射：高级遍历

反射是一种通过元编程来操作对象属性和方法的技术。使用反射可以实现更加灵活和动态的遍历方式。

const properties = Reflect.ownKeys(obj);

for (let i = 0; i < properties.length; i++) {
  console.log(properties[i] + ': ' + Reflect.get(obj, properties[i]));
}

输出：