JavaScript 遍历：掌握遍历数组、对象和 DOM 的多种方法332

在 JavaScript 中，遍历数据结构是一个常见的任务。它允许我们逐个访问集合中的每个元素，以执行各种操作，例如检索信息、修改数据或执行计算。

JavaScript 提供了多种遍历方法，适用于不同的数据结构和场景。以下是一些最常用的方法：

1. 数组遍历

JavaScript 数组是一种有序的元素集合。我们可以使用以下方法遍历数组：

forEach()

forEach() 方法依次调用回调函数，并将数组中的每个元素作为参数传递。它不会返回任何值。
const numbers = [1, 2, 3, 4, 5];
((number) => {
(number);
});

map()

map() 方法将数组中的每个元素映射到一个新数组中。它返回一个新的数组，其中包含经过转换的元素。
const doubledNumbers = ((number) => number * 2);

filter()

filter() 方法返回一个包含数组中满足给定条件的所有元素的新数组。它返回一个新的数组，其中包含通过过滤器函数的元素。
const evenNumbers = ((number) => number % 2 === 0);

2. 对象遍历

JavaScript 对象是无序的键值对集合。我们可以使用以下方法遍历对象：

for...in

for...in 循环遍历对象的所有可枚举的键。它返回键作为字符串。
const person = { name: "John", age: 30, occupation: "Developer" };
for (const key in person) {
(key, person[key]);
}

()

() 方法返回一个数组，其中包含对象的所有键。它返回键作为字符串数组。
const objectKeys = (person);

()

() 方法返回一个数组，其中包含对象的所有值。它返回值作为数组。
const objectValues = (person);

()

() 方法返回一个数组，其中包含对象的所有键值对。每个键值对是一个数组，其中第一个元素是键，第二个元素是值。
const objectEntries = (person);

3. DOM 遍历

DOM（文档对象模型）表示 HTML 文档的结构。我们可以使用以下方法遍历 DOM：

()

() 方法返回一个 NodeList 对象，其中包含与给定 CSS 选择器匹配的所有元素。
const elements = ("p");

属性返回一个 HTMLCollection 对象，其中包含给定元素的所有子元素。
const paragraph = ("p");
const children = ;

属性返回给定元素的父元素。
const parentElement = ;

属性返回给定元素的上一个兄弟元素。
const previousSibling = ;

属性返回给定元素的下一个兄弟元素。
const nextSibling = ;

JavaScript 遍历提供了多种方法，适用于不同的数据结构和场景。掌握这些方法对于高效地访问、修改和处理数据至关重要。通过熟练使用这些遍历技术，您可以编写高效、健壮的 JavaScript 应用程序。

2024-12-10

上一篇：JavaScript 控件：提升 Web 应用程序交互性和功能性的利器

下一篇：如何在 JavaScript 中运行代码