详解Javascript对象的5种循环遍历方法-猿码集

1. Javascript对象循环遍历简介

在Javascript中，对象是一种集合类型数据结构，其中键值对表示对象的属性。对象的循环遍历是指对对象属性集合进行迭代的过程，以便可以访问每个属性的值。

对象循环遍历是Javascript编程中一项基础技能，能够帮助我们更有效地读取和操作对象的属性。下面我们将详细介绍Javascript对象的5种循环遍历方法。

2. for...in循环

2.1 for...in循环语法

for...in循环是Javascript中最常用的遍历对象属性的方法之一。for...in语法如下：

for(variable in object)
{
   // 执行代码块
}

其中，变量variable表示对象的属性名，object表示待迭代的对象。循环体内的代码块将被执行一次，每次循环迭代对象的一个属性。

2.2 for...in循环实例

下面是一个使用for...in循环遍历对象的例子：

// 定义一个对象
var car = {make: "bmw", model: "m3", year: "2022"};
// 遍历对象属性
for(var prop in car)
{
   console.log(prop + " = " + car[prop]);
}

上面例子定义了一个名为"car"的对象，对象中包含三个属性：make、model和year。使用for...in循环遍历对象，将对象的键值对打印到控制台上：

make = bmw
model = m3
year = 2022

3. Object.keys循环

3.1 Object.keys循环语法

Object.keys()方法返回一个由对象的所有属性名组成的数组。我们可以使用该方法和数组的forEach()方法来遍历对象属性。Object.keys()方法语法如下：

Object.keys(object).forEach(function(key) {
    // code...
});

其中，Object.keys()方法将返回待迭代对象的所有属性名组成的数组。然后使用forEach()方法遍历数组，对于每个属性名，将执行传入的回调函数。

3.2 Object.keys循环实例

下面是一个使用Object.keys()和forEach()方法遍历对象的例子：

// 定义一个对象
var car = {make: "bmw", model: "m3", year: "2022"};
// 遍历对象属性
Object.keys(car).forEach(function(key) {
    console.log(key + " = " + car[key]);
});

上面例子定义了一个名为"car"的对象，对象中包含三个属性：make、model和year。使用Object.keys()方法和forEach()方法遍历对象，将对象的键值对打印到控制台上：

make = bmw
model = m3
year = 2022

4. Object.getOwnPropertyNames循环

4.1 Object.getOwnPropertyNames循环语法

Object.getOwnPropertyNames()方法返回一个由指定对象的所有自身属性的属性名组成的数组。我们可以使用该方法和数组的forEach()方法来遍历对象属性。Object.getOwnPropertyNames()方法语法如下：

Object.getOwnPropertyNames(object).forEach(function(key) {
    // code...
});

其中，Object.getOwnPropertyNames()方法将返回待迭代对象的所有自身属性的属性名组成的数组。然后使用forEach()方法遍历数组，对于每个属性名，将执行传入的回调函数。

4.2 Object.getOwnPropertyNames循环实例

下面是一个使用Object.getOwnPropertyNames()和forEach()方法遍历对象的例子：

// 定义一个对象
var car = {make: "bmw", model: "m3", year: "2022"};
// 遍历对象属性
Object.getOwnPropertyNames(car).forEach(function(key) {
    console.log(key + " = " + car[key]);
});

上面例子定义了一个名为"car"的对象，对象中包含三个属性：make、model和year。使用Object.getOwnPropertyNames()方法和forEach()方法遍历对象，将对象的键值对打印到控制台上：

make = bmw
model = m3
year = 2022

5. Object.entries循环

5.1 Object.entries循环语法

Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组。我们可以使用该方法和数组的forEach()方法来遍历对象属性。Object.entries()方法语法如下：

Object.entries(object).forEach(function(entry) {
    // code...
});

其中，Object.entries()方法将返回待迭代对象自身可枚举属性的键值对组成的数组。然后使用forEach()方法遍历数组，对于每个键值对，将执行传入的回调函数。

5.2 Object.entries循环实例

下面是一个使用Object.entries()和forEach()方法遍历对象的例子：

// 定义一个对象
var car = {make: "bmw", model: "m3", year: "2022"};
// 遍历对象属性
Object.entries(car).forEach(function(entry) {
    console.log(entry[0] + " = " + entry[1]);
});

上面例子定义了一个名为"car"的对象，对象中包含三个属性：make、model和year。使用Object.entries()方法和forEach()方法遍历对象，将对象的键值对打印到控制台上：

make = bmw
model = m3
year = 2022

6. Reflect.ownKeys循环

6.1 Reflect.ownKeys循环语法

Reflect.ownKeys()方法返回一个由目标对象自身属性键组成的数组。我们可以使用该方法和数组的forEach()方法来遍历对象属性。Reflect.ownKeys()方法语法如下：

Reflect.ownKeys(object).forEach(function(key) {
    // code...
});

其中，Reflect.ownKeys()方法将返回目标对象自身属性键组成的数组。然后使用forEach()方法遍历数组，对于每个属性键，将执行传入的回调函数。

6.2 Reflect.ownKeys循环实例

下面是一个使用Reflect.ownKeys()和forEach()方法遍历对象的例子：

// 定义一个对象
var car = {make: "bmw", model: "m3", year: "2022"};
// 遍历对象属性
Reflect.ownKeys(car).forEach(function(key) {
    console.log(key + " = " + car[key]);
});

上面例子定义了一个名为"car"的对象，对象中包含三个属性：make、model和year。使用Reflect.ownKeys()方法和forEach()方法遍历对象，将对象的键值对打印到控制台上：

make = bmw
model = m3
year = 2022

7. 小结

本文介绍了Javascript对象的5种循环遍历方法，包括for...in循环、Object.keys循环、Object.getOwnPropertyNames循环、Object.entries循环和Reflect.ownKeys循环。每种方法都有其特点和使用场景，需要根据实际情况选择合适的方法。

对象循环遍历是Javascript编程中的基础技能，希望本文对读者了解该技能有所帮助。更多关于Javascript对象的内容，请参阅相关文档。

详解Javascript对象的5种循环遍历方法