JS Object 遍历详解

HDNBC • 2025-01-27 13:34 • 编程

一、基础遍历方法

JavaScript 中的 Object 是一种键值对数据结构，使用起来非常灵活。在编程过程中，我们经常需要遍历 Object 以获取其中的值或者进行操作。下面将介绍几种基础的遍历方法。

1. for…in 循环

const person = {
  name: '张三',
  age: 18,
  gender: 'male'
};

for (const key in person) {
  console.log(person[key]);
}

上面代码中，我们使用了 for…in 循环遍历了 person 对象。在循环中，关键字 key 指代 person 对象中的键名，我们可以通过 person[key] 来获取相应键值。

2. Object.keys()

const person = {
  name: '张三',
  age: 18,
  gender: 'male'
};

const keys = Object.keys(person);

console.log(keys); // ['name', 'age', 'gender']

上面代码中，我们使用 Object.keys() 方法来获取 person 对象中的所有键名，并将其存储在 keys 变量中。

3. Object.values()

const person = {
  name: '张三',
  age: 18,
  gender: 'male'
};

const values = Object.values(person);

console.log(values); // ['张三', 18, 'male']

上面代码中，我们使用 Object.values() 方法来获取 person 对象中的所有键值，并将其存储在 values 变量中。

4. Object.entries()

const person = {
  name: '张三',
  age: 18,
  gender: 'male'
};

const entries = Object.entries(person);

console.log(entries);
// [ ['name', '张三'], ['age', 18], ['gender', 'male'] ]

上面代码中，我们使用 Object.entries() 方法来获取 person 对象中的所有键值对，并将其存储在 entries 变量中。

二、深度遍历方法

有时候，我们需要遍历的对象是多层嵌套的，需要使用深度遍历的方式进行。下面介绍几种深度遍历的方法。

1. 递归法

const person = {
  name: '张三',
  age: 18,
  gender: 'male',
  father: {
    name: '张爸爸',
    age: 40,
    gender: 'male'
  }
};

function deepTraversal(obj) {
  for (const key in obj) {
    if (typeof obj[key] === 'object') {
      deepTraversal(obj[key]);
    } else {
      console.log(`${key}: ${obj[key]}`);
    }
  }
}

deepTraversal(person);

上面代码中，我们使用递归法遍历了深度嵌套的 person 对象。在 deepTraversal 函数中，我们首先判断键值类型是否为 object，如果是，继续递归遍历，否则打印键名及其对应的键值。

2. 栈方法

function stackTraversal(obj) {
  const stack = [];
  stack.push(obj);
  
  while(stack.length !== 0) {
    const node = stack.pop();
    if (typeof node === 'object') {
      for (const key in node) {
        stack.push(node[key]);
      }
    } else {
      console.log(node);
    }
  }
}

stackTraversal(person);

上面代码中，我们使用栈方法来遍历深度嵌套的 person 对象。首先，我们将需要遍历的对象推入栈中，然后不断从栈中 pop 出元素。如果该元素是 object 类型，则将其可遍历的子元素推入栈中，否则打印该元素。

三、常见应用场景

Object 遍历在实际编程中非常常见，下面介绍几个常见的应用场景。

1. 解构赋值

const person = {
  name: '张三',
  age: 18,
  gender: 'male'
};

const { name, age } = person;

console.log(name, age); // 张三 18

上面代码中，我们使用解构赋值的方式从 person 对象中获取 name 和 age 两个键值，实现了快速获取特定键值的功能。

2. 复制对象

const person = {
  name: '张三',
  age: 18,
  gender: 'male'
};

const newPerson = {};

for (const key in person) {
  newPerson[key] = person[key];
}

console.log(newPerson); // { "name": "张三", "age": 18, "gender": "male" }

上面代码中，我们通过遍历 person 对象并复制其中的键值对，得到了一个新的对象 newPerson，这可以用于实现对象的复制或者克隆。

3. 数据处理

const persons = [
  { id: 1, name: '张三', age: 18 },
  { id: 2, name: '李四', age: 20 },
  { id: 3, name: '王五', age: 22 }
];

const names = persons.map(person => person.name);

console.log(names); // ['张三', '李四', '王五']

上面代码中，我们使用 map 方法从 persons 数组中提取出 name 属性，得到了一个新数组 names，用于数据处理和转换。

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