六虎

JavaScript 灵活遍历：掌握数组与对象的多种迭代技巧

作者：

柠檬清茶

在

前言

当咱们在JavaScript中处理数据时，经常需求遍历数组和目标来获取或操作它们的元素或特点。了解怎么有效地遍历这些数据结构是编写高效、明晰且可保护的代码的关键。在本文中，我将详细介绍JavaScript中遍历数组和目标的各种办法，并进行比较，以便你能够根据具体状况挑选最适宜的办法。

数组遍历办法：

for 循环：

首要便是咱们最熟悉的for循环了，运用传统的for循环，咱们能够经过索引逐一拜访数组元素。这种办法在处理大型数组时可能会比较繁琐，但它是一种十分灵敏的办法。

示例

let array = [1, 2, 3, 4, 5];
for (let i = 0; i < array.length; i  ) {
    console.log(array[i]);
}

forEach() 办法：

forEach() 办法是数组供给的一种愈加简练和语义化的遍历办法。它接受一个回调函数作为参数，对数组的每个元素履行该函数。

示例

let array = [1, 2, 3, 4, 5];
array.forEach(element => {
    console.log(element);
});

在这个比如中，咱们调用数组的forEach()办法，并传入一个匿名函数作为参数。对于数组中的每个元素，该函数都会被调用一次，参数element表明当时元素的值。在函数体内，咱们简单地打印当时元素的值。

for…of 循环：

for...of 循环供给了一种简练的语法来遍历可迭代目标的值，包括数组。这种办法愈加直观和易读。

示例

let array = [1, 2, 3, 4, 5];
for (const element of array) {
    console.log(element);
}

上述比如，在每次迭代中，for...of循环将把数组的当时元素赋给element变量。咱们直接运用console.log()打印element的值。

目标遍历办法：

for…in 循环：

for...in 循环允许咱们遍历目标的可枚举特点。它将遍历目标本身及其原型链上的一切可枚举特点。

示例

let obj = {a: 1, b: 2, c: 3};
for (const key in obj) {
    console.log(`${key}: ${obj[key]}`);
}

在这个比如中，在每次迭代中，for...in循环将枚举目标的每个可枚举特点，并将特点名赋给key变量。咱们运用key来拜访目标的特点值，并打印键值对。

Object.keys() 办法：

Object.keys() 办法回来一个包括目标的一切可枚举特点的数组。咱们能够将其与数组的forEach()办法结合运用来遍历目标的特点。

示例

let obj = {a: 1, b: 2, c: 3};
Object.keys(obj).forEach(key => {
    console.log(`${key}: ${obj[key]}`);
});

在这个比如中，Object.keys()回来一个包括目标一切可枚举特点的数组。咱们运用forEach()办法遍历这个数组，并为每个特点调用一个匿名函数。在函数体内，咱们运用特点名来拜访目标的特点值，并打印键值对。

Object.entries() 办法：

Object.entries() 办法回来一个给定目标本身可枚举特点的键值对数组，每个键值对是一个包括键和值的数组。这种办法能够很便利地同时拜访键和值。

示例

let obj = {a: 1, b: 2, c: 3};
Object.entries(obj).forEach(([key, value]) => {
    console.log(`${key}: ${value}`);
});

在这个比如中，Object.entries()回来一个包括目标一切可枚举特点的键值对数组。咱们运用forEach()办法遍历这个数组，并为每个键值对调用一个匿名函数。在函数体内，咱们运用解构赋值来获取键和值，并打印键值对。

结语

各种办法的比较总结

数组遍历办法：

  1. for 循环：

    • 长处：灵敏性高，适用于各种复杂的遍历状况，功能相对较好。
    • 缺陷：代码相对冗长，可读性较差，容易出错。

  2. forEach() 办法：

    • 长处：简练明了，语义化强，适用于对每个元素履行相同操作的状况，可读性较好。
    • 缺陷：无法在循环过程中运用break和continue等控制流句子，不支持前期回来。

  3. for…of 循环：

    • 长处：简练易读，代码明晰，语义化强，适用于遍历数组元素的状况。
    • 缺陷：无法获取当时元素的索引，无法跳过或中止循环。

目标遍历办法：

  1. for…in 循环：

    • 长处：遍历目标特点，包括原型链上的特点，灵敏性高。
    • 缺陷：可能会遍历到不想要的特点，不适用于需求严厉遍历目标本身特点的状况。

  2. Object.keys() 办法：

    • 长处：回来目标本身可枚举特点的数组，适用于只需求遍历目标本身特点的状况。
    • 缺陷：需求额定的办法来拜访特点值，不够简练。

  3. Object.entries() 办法：

    • 长处：回来键值对数组，可同时拜访键和值，十分便利。
    • 缺陷：相对于其他办法，稍微有些复杂，可能会发生一些功能开销。

总结：

  • 数组遍历：对于数组，推荐运用forEach()或for...of，前者适宜每个元素履行相同操作的状况，后者则适用于简单的元素遍历场景。
  • 目标遍历：对于目标，假如需求遍历本身和原型链上的特点，能够运用for...in，假如只需求遍历本身特点，推荐运用Object.keys()或Object.entries()，前者更简练，后者更灵敏。

经过挑选适宜的遍历办法，能够使代码愈加明晰、简练，并提高履行效率。

更多文章