如何在 JavaScript 对象中迭代或循环

Abdul Mateen 2023年10月12日
  1. for-in 循环来循环浏览 JavaScript 对象
  2. 使用 for-of 循环在 JavaScript 对象中循环
  3. 使用 forEach 方法对 JavaScript 对象进行循环
如何在 JavaScript 对象中迭代或循环

本篇教程文章将介绍我们如何对一个 JavaScript 对象进行迭代。

有几个循环语句,用于迭代一个 JavaScript 对象的方法如下。

  • for-in 循环
  • for-of 循环
  • forEach 方法

for-in 循环来循环浏览 JavaScript 对象

for-in 语句是一个循环,用于用键值对迭代 JavaScript 对象。这个循环对 JavaScript 对象的所有元素进行迭代。

使用 for-in 循环循环 JavaScript 对象的示例代码如下。

var Cities = {
  City1: 'Tokyo',
  City2: 'Paris',
  City3: 'Dubai',
  City3: 'Rome',
  City4: 'London'
} for (var city in Cities) {
  console.log(city, ':', Cities[city]);
}

输出:

City1 : Tokyo
City2 : Paris
City3 : Dubai
City4 : Rome 
City5 : London

当使用 for-in 循环时,我们不需要使用任何特殊函数来迭代或循环一个对象。

使用 for-of 循环在 JavaScript 对象中循环

for-of 语句也是一个循环,它可以迭代一个没有键值对的可迭代对象。我们也可以用这个循环来迭代有键值对的 JavaScript 对象,但要用一些特殊的函数,如下所示。

  • Object.getOwnPropertyNames
  • Object.entries
  • Object.keys
  • Reflect.ownKeys

Object.getOwnPropertyNames

这个方法返回一个存储在对象中的所有键值对的数组。但是,为了迭代 JavaScript 对象的所有键值对,我们需要使用这个方法与 for-of 循环。

使用 for-ofObject.getOwnPropertyNames() 循环来迭代对象的例子代码如下。

var Cities = {
  City1: 'Tokyo',
  City2: 'Paris',
  City3: 'Dubai',
  City3: 'Rome',
  City4: 'London'
};
for (var city of Object.getOwnPropertyNames(Cities)) {
  const CityName = Cities[city];
  console.log(city, ':', CityName);
}

输出:

City1 : Tokyo
City2 : Paris
City3 : Dubai
City4 : Rome 
City5 : London

Object. entries

这个方法返回对象的键值对的数组。但是,如果要迭代一个键和值,我们需要用这个方法的 for-of 循环来对 JavaScript 对象进行循环。

使用 for-ofObject.entry() 循环迭代对象的示例代码如下。

var Cities = {
  City1: 'Tokyo',
  City2: 'Paris',
  City3: 'Dubai',
  City3: 'Rome',
  City4: 'London'
};
for (var [city, CityName] of Object.entries(Cities)) {
  console.log(city, ':', CityName);
}

输出:

City1 : Tokyo
City2 : Paris
City3 : Dubai
City4 : Rome 
City5 : London

Object.keys

这个方法返回对象的键的数组。但是如果要迭代一个对象的键值对,我们需要将这个函数与 for-of 循环一起使用。

使用 for-ofObject.keys() 循环来迭代对象的示例代码如下。

var Cities = {
  City1: 'Tokyo',
  City2: 'Paris',
  City3: 'Dubai',
  City3: 'Rome',
  City4: 'London'
};
for (var city of Object.keys(Cities)) {
  console.log(city, ':', cities[city]);
}

输出:

City1 : Tokyo
City2 : Paris
City3 : Dubai
City4 : Rome 
City5 : London

Reflect.ownKeys

这个方法也返回对象的键值。但是如果要迭代对象的键值对,我们需要使用这个函数与 for-of 循环。

使用 for-ofReflect.ownKeys 循环来迭代对象的例子代码如下。

var Cities = {
  City1: 'Tokyo',
  City2: 'Paris',
  City3: 'Dubai',
  City3: 'Rome',
  City4: 'London'
};
for (var city of Reflect.ownKeys(Cities)) {
  console.log(city, ':', cities[city]);
}

输出:

City1 : Tokyo
City2 : Paris
City3 : Dubai
City4 : Rome 
City5 : London

使用 forEach 方法对 JavaScript 对象进行循环

forEach 方法的作用是作为迭代器,依次调用其他方法。但是我们可以使用这个方法通过使用其他几个函数来迭代对象,这些函数如下。

  • Object.keys
  • Reflect.ownKeys

Object.keys

使用这个方法和 forEach 方法,我们可以迭代一个对象的键值对。

var Cities = {
  City1: 'Tokyo',
  City2: 'Paris',
  City3: 'Dubai',
  City3: 'Rome',
  City4: 'London'
};
Object.keys.forEach(city => {console.log(city, ':', Cities[city])})

输出:

City1 : Tokyo
City2 : Paris
City3 : Dubai
City4 : Rome 
City5 : London

Reflect.ownKeys

使用这个方法和 forEach 方法,我们可以迭代一个对象的键值对。

var Cities = {
  City1: 'Tokyo',
  City2: 'Paris',
  City3: 'Dubai',
  City3: 'Rome',
  City4: 'London'
};
Reflect.ownKeys.forEach(city => {console.log(city, ':', Cities[city])})

输出:

City1 : Tokyo
City2 : Paris
City3 : Dubai
City4 : Rome 
City5 : London

相关文章 - JavaScript Object