JS 遍历字典|极客教程

JS 遍历字典

1. 前言

字典是一种常见的数据结构，它以键-值对的形式存储数据。在 JavaScript 中，字典被称为对象。遍历字典是一种常见的操作，它允许我们访问和处理字典中的所有键或值。

本文将介绍在 JavaScript 中遍历字典的几种常见方法，并提供示例代码和运行结果。

2. for…in 循环

使用 for…in 循环是一种遍历字典的常见方法。它遍历字典的键，并允许我们访问每个键对应的值。

以下是使用 for…in 循环遍历字典的示例代码：

const dictionary = {
  key1: "value1",
  key2: "value2",
  key3: "value3"
};

for (const key in dictionary) {
  console.log(key + ": " + dictionary[key]);
}

上述代码首先定义了一个字典 dictionary，它包含了三个键值对。然后，使用 for…in 循环遍历字典的键，并通过 console.log 输出每个键和对应的值。

运行结果如下：

key1: value1
key2: value2
key3: value3

可以看到，for…in 循环按照字典中键的添加顺序进行遍历，打印出了每个键和对应值。

需要注意的是，for…in 循环还会遍历对象的原型链上的属性。为了避免意外的遍历，可以使用 hasOwnProperty 方法来判断属性是否属于对象自身：

for (const key in dictionary) {
  if (dictionary.hasOwnProperty(key)) {
    console.log(key + ": " + dictionary[key]);
  }
}

3. Object.keys() 和 forEach()

除了 for…in 循环，JavaScript 还提供了 Object.keys() 方法和 forEach() 方法来遍历字典。

Object.keys() 方法返回一个包含字典所有键的数组，我们可以使用它来遍历字典的键。

以下是使用 Object.keys() 方法遍历字典的示例代码：

const dictionary = {
  key1: "value1",
  key2: "value2",
  key3: "value3"
};

Object.keys(dictionary).forEach(key => {
  console.log(key + ": " + dictionary[key]);
});

上述代码中，我们通过 Object.keys(dictionary) 获取字典的所有键，并使用 forEach() 方法遍历键的数组。在 forEach() 方法的回调函数中，我们输出每个键和对应的值。

运行结果与上一节中的示例相同。

需要注意的是，forEach() 方法仅适用于数组，而 Object.keys() 返回的是一个数组，因此我们可以使用 forEach() 来遍历字典的键。

4. Object.values() 和 forEach()

除了遍历字典的键，我们还可以遍历字典的值。为此，我们可以使用 Object.values() 方法来获取字典的所有值，并使用 forEach() 方法遍历值的数组。

以下是使用 Object.values() 方法和 forEach() 方法遍历字典值的示例代码：

const dictionary = {
  key1: "value1",
  key2: "value2",
  key3: "value3"
};

Object.values(dictionary).forEach(value => {
  console.log(value);
});

上述代码中，我们通过 Object.values(dictionary) 获取字典的所有值，并使用 forEach() 方法遍历值的数组。在 forEach() 方法的回调函数中，输出每个值。

运行结果如下：

value1
value2
value3

可以看到，我们成功遍历了字典的所有值。

需要注意的是，Object.values() 方法在部分较旧的 JavaScript 环境中可能不受支持。如果你的项目中需要支持这些环境，请使用其他方法或者使用 polyfill 进行兼容性处理。

5. Object.entries() 和 forEach()

在遍历字典时，有时候我们既需要访问键，又要访问值。要同时遍历字典的键和值，可以使用 Object.entries() 方法来获取字典的键值对数组，并使用 forEach() 方法遍历这个数组。

以下是使用 Object.entries() 方法和 forEach() 方法遍历字典的键值对的示例代码：

const dictionary = {
  key1: "value1",
  key2: "value2",
  key3: "value3"
};

Object.entries(dictionary).forEach(([key, value]) => {
  console.log(key + ": " + value);
});