js 对象循环遍历|极客笔记

js 对象循环遍历

在 JavaScript 中，我们经常会遇到需要遍历对象（Object）的情况。对象是一种复合数据类型，它由键值对组成，可以用来表示实体的属性和方法。在一些项目中，我们可能需要对对象的属性进行操作或者展示，这时就需要用到对象的循环遍历了。

本文将详细介绍如何在 JavaScript 中对对象进行循环遍历，包括遍历对象的属性和值，以及常见的遍历方法。

遍历对象的属性和值

在 JavaScript 中，对象的属性和值是以键值对的形式存在的。要遍历对象的属性和值，可以使用 for…in 循环或者 Object.keys() 方法。下面分别介绍这两种方法的用法。

for…in 循环

for…in 循环是一种遍历对象属性的方式，它会枚举对象的可枚举属性，包括对象自身的属性和原型链上的属性。其语法格式如下：

for (var key in obj) {
  // key 为属性名
  var value = obj[key];  // 获取属性值
  console.log(key + ': ' + value);
}

接下来，我们通过一个示例来演示 for…in 循环的用法。假设有一个表示学生信息的对象 student，包含姓名、年龄和成绩三个属性：

var student = {
  name: '张三',
  age: 20,
  score: 90
};

for (var key in student) {
  var value = student[key];
  console.log(key + ': ' + value);
}

上述代码将输出：

name: 张三
age: 20
score: 90

Object.keys() 方法

Object.keys() 方法会返回一个给定对象的所有可枚举属性的数组。我们可以使用这个方法来轻松获取对象的属性名，然后再根据属性名获取属性值。其用法如下：

var keys = Object.keys(obj);
keys.forEach(function(key) {
  var value = obj[key];
  console.log(key + ': ' + value);
});

接着同样以示例来演示 Object.keys() 方法：

var student = {
  name: '张三',
  age: 20,
  score: 90
};

var keys = Object.keys(student);
keys.forEach(function(key) {
  var value = student[key];
  console.log(key + ': ' + value);
});

运行上述代码将得到相同的输出：

name: 张三
age: 20
score: 90

常见遍历方法

除了 for…in 循环和 Object.keys() 方法外，JavaScript 还提供了一些其他遍历对象的方法，如 forEach() 方法和 map() 方法。下面将一一介绍这些方法的用法。

forEach() 方法

forEach() 方法是数组的方法，不适用于对象，但可以通过 Object.keys() 方法将对象转为数组再使用。其语法格式如下：

Object.keys(obj).forEach(function(key) {
  var value = obj[key];
  console.log(key + ': ' + value);
});

示例代码如下，演示 forEach() 方法的用法：

var student = {
  name: '张三',
  age: 20,
  score: 90
};

Object.keys(student).forEach(function(key) {
  var value = student[key];
  console.log(key + ': ' + value);
});

运行上述代码将得到同样的输出：

name: 张三
age: 20
score: 90

map() 方法

map() 方法也是数组的方法，不适用于对象。但我们可以通过 Object.keys() 方法将对象转为数组再使用。map() 方法会返回一个新数组，数组的元素是原数组经过处理后的结果。其语法格式如下：

var result = Object.keys(obj).map(function(key) {
  return obj[key];
});

console.log(result);

接下来，我们通过一个示例来演示 map() 方法的用法：

var student = {
  name: '张三',
  age: 20,
  score: 90
};

var result = Object.keys(student).map(function(key) {
  return student[key];
});

console.log(result);

运行上述代码将输出包含属性值的新数组：