JavaScript 遍历对象

对于一个JavaScript初学者来说，了解通过 可枚举数据集 进行迭代是至关重要的。当您想要迭代某个东西时，它可以是任何类型，比如 列表、对象、映射 和数组。在JavaScript中，通过使用各种方法可以迭代对象，从而可以获取多个键和值对。有主要四种方法可用于在JavaScript中迭代对象，例如 Object.keys()方法，for…in循环，Objects.entries()方法和objects.values()方法 。

1）通过使用for…in循环，在JavaScript中迭代对象

为了迭代对象的属性，JavaScript中最常用的方法是使用 for…in循环 。对于JavaScript中对象的每个属性， for…in循环 将执行一次我们在其中添加的代码。

示例：

让我们通过一个示例来了解如何使用 for…in循环 在JavaScript中遍历对象。

const programmer = {
name: 'saswat sahoo',
age: 26,
email: 'sahoosaswat@gmail.com',
active: true };
for (const key in programmer)
{ console.log(` ${key}:$ {programmer[key]}`);
}

输出：

name: saswat sahoo
age: 26
email: stash
active: true

解释：

首先，在JavaScript程序中，我们必须创建一个对象。我们创建了一个名为 程序员对象 的对象，它具有属性 名称、电子邮件、年龄 和 活跃状态 。然后，我们将使用 for…in 循环迭代程序员对象。该 for…in 循环将返回键和值对的对象属性。

2) 使用对象的 Object.keys() 方法在JavaScript中迭代对象

在 ES6 之前，循环遍历对象的唯一方法是使用 for…in 循环。在 ES6 中添加了 Object.keys() 方法，以简化对象遍历。它接受要遍历的对象作为输入，并返回一个包含所有 属性名（或键） 的数组。

然后，您可以通过使用任何数组循环方法（例如 forEach() ）迭代数组并提取每个属性的值。

示例：

我们来看一个示例，了解如何使用 object.keys()方法 在JavaScript中迭代对象。

const tutorials = {
javascript: 77,
html: 33,
CSS: 53,
database: 15 };
const keys = Object.keys(tutorials);
console.log(keys);
keys.forEach((key, index) => {
console.log(` ${key}:$ {tutorials[key]}`);
});

输出：

[ 'javascript', 'html', 'CSS', 'database' ]
javascript: 77
html: 33
CSS: 53
database: 15

解释：

在这个示例中，我们创建了一个名为 tutorials 的对象，它拥有不同类型的教程作为其属性，比如 javascript，html，CSS 和 database ，并给它们分配了特定的值。我们将名为 tutorial 的对象更改为名为 keys 的数组。然后，借助 tutorial 对象，我们将使用keys数组对其进行迭代。在迭代中，我们使用了 “forEach()” 循环。

3) 通过使用JavaScript中的 object.values() 方法对对象进行迭代

Object.key() 方法是JavaScript中 Object.values() 方法的精确相反，它嵌入在 ES8 中。通过 Object.values() 方法，将从添加的项目的属性值创建一个数组。之后，我们可以通过在JavaScript中使用循环方法，如 foreach()循环 ，通过对象来进行迭代。

示例：

让我们来看一个示例，以了解如何使用 object.values() 方法 在JavaScript中对对象进行迭代。

const trees = {
mango: 1,
banana: 2,
apple: 3,
lemon: 4 

};
// iterate over object values
Object.values(trees).forEach(val => console.log(val));
// iterate over object entries
const entries = Object.entries(trees);
console.log(entries);
// iterate over for?of loop
for (const [key, value] of Object.entries(trees)) {
console.log(` ${key}:$ {value}`);
}
// iterate over forEach
Object.entries(trees).forEach(([key, value]) => {
    console.log(` ${key}:$ {value}`)
});

输出：

1
2 
3
4
[ [ 'mango', 1 ], [ 'banana', 2 ], [ 'apple', 3 ], [ 'lemon', 4 ] ]
mango: 1
banana: 2
apple: 3
lemon: 4
mango: 1
banana: 2
apple: 3
lemon: 4

解释:

在这个示例中，我们将看到如何通过对象值，在JavaScript中使用 Object.values 方法进行迭代。我们将使用一个名为 trees 的对象，它具有像 mango、banana、apple 和 lemon 这样的属性，以及它们各自的值。现在，我们将把我们的 “trees” 对象作为参数传递给 “Object.entries()” 方法来迭代 object 的值，并将返回值存储在 entries 变量中。

从下面给出的输出中可以看到， “Object.entries()” 方法返回了四个内部数组，其中每个数组除了其值之外，还存储了 “trees” 对象的一个属性。我们还可以使用 “for…of” 循环或 “forEach()” 方法来迭代由JavaScript Object.trees() 方法返回的数组。

我们清楚地通过 “for…of” 循环迭代了 “trees” 对象。

在这种情况下，如果我们想要使用 “forEach()” 方法实现相同的目的，我们将调用 Object.trees() 方法，并将其作为参数传递给创建的对象，然后调用 “forEach()” 方法。对象的属性或键将由 forEach() 方法返回，以及它们的相应值。

结论

我们可以通过 for…in 循环、 Object.values() 方法、 Object.key() 方法和 Object.entries() 方法来迭代JavaScript对象。通过 for…in 循环、 Object.entries() 方法和 Object.keys() 方法，我们可以遍历对象键值对。