javascript的for循环浅析

在 JavaScript 中，有多种方式可以遍历数据结构（如数组、对象等）。以下是常见的遍历方法：

1.索引访问数组元素或对象属性

const arr = [1, 2, 3, 4];

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

const obj = { a: 1, b: 2, c: 3 };

2.for…in

for (let key in obj) {
  console.log(obj[key]);
}

3.for…of 循环：for…of 循环用于遍历可迭代对象（如数组、字符串等），可以直接访问元素的值，而不需要索引。示例如下：

const arr = [1, 2, 3, 4];

for (let element of arr) {
  console.log(element);
}

const str = 'Hello';

for (let char of str) {
  console.log(char);
}

for…in 和 for…of 是 JavaScript 中两种不同的遍历方式，适用于不同的数据结构。

for…in 循环：
用于遍历对象的可枚举属性。
迭代的是对象的属性名（键），而不是属性值。
可以遍历对象自身的属性以及继承的属性（可枚举）。
不保证属性的遍历顺序。
通常用于遍历对象，不推荐用于遍历数组。

const obj = { a: 1, b: 2, c: 3 };

for (let key in obj) {
  console.log(key);   // 输出属性名：a, b, c
  console.log(obj[key]);   // 输出属性值：1, 2, 3
}

for…of 循环：
用于遍历可迭代对象的元素。
迭代的是对象的属性值（元素值），而不是属性名。
适用于数组、字符串、Set、Map 等可迭代对象。
不可遍历普通对象，需要通过转换或自定义迭代器实现。
保证元素的遍历顺序与插入顺序一致（对于数组和字符串）。

const arr = [1, 2, 3, 4];

for (let element of arr) {
  console.log(element);   // 输出元素值：1, 2, 3, 4
}

const str = 'Hello';

for (let char of str) {
  console.log(char);   // 输出字符：H, e, l, l, o
}

总结：

for…in 用于遍历对象的属性名，适用于对象的遍历。
for…of 用于遍历可迭代对象的元素值，适用于数组、字符串等可迭代对象的遍历。
4.forEach 方法：数组对象提供了 forEach 方法，用于遍历数组并对每个元素执行指定的回调函数。示例如下：

const arr = [1, 2, 3, 4];

arr.forEach(function(element) {
  console.log(element);
});

5.Object.keys 和 Object.values 方法：Object.keys 方法返回一个包含对象所有可枚举属性的数组，Object.values 方法返回一个包含对象所有可枚举属性的值的数组。示例如下：

const obj = { a: 1, b: 2, c: 3 };

const keys = Object.keys(obj);
keys.forEach(function(key) {
  console.log(obj[key]);
});

const values = Object.values(obj);
values.forEach(function(value) {
  console.log(value);
});

这些是 JavaScript 中常用的遍历方法，它们适用于不同的数据结构和场景。您可以根据具体需求选择合适的遍历方式。

6.在 for循环中，使用 let 或 const 声明迭代变量的差异与其在其他上下文中的差异相同。这主要涉及到变量的作用域和可变性。

for (let key in obj)：
使用 let 声明的变量具有块级作用域，每次迭代都会创建一个新的变量实例。
在每次循环迭代中，key 是可变的，可以被重新赋值。
循环结束后，key 变量在循环外不可访问。

const obj = { a: 1, b: 2, c: 3 };

for (let key in obj) {
  console.log(key);   // 输出属性名：a, b, c
}

console.log(key);   // 报错，key 不可访问
for (const key in obj)：

使用 const 声明的变量也具有块级作用域，但它是一个常量，不可被重新赋值。
在每次循环迭代中，key 是不可变的，不能被重新赋值。
循环结束后，key 变量在循环外不可访问。

const obj = { a: 1, b: 2, c: 3 };

for (const key in obj) {
  console.log(key);   // 输出属性名：a, b, c
}

key = 'd';   // 报错，key 不可重新赋值

console.log(key);   // 报错，key 不可访问

总结：

使用 let 声明的变量在 for…in 循环中是可变的，具有块级作用域。
使用 const 声明的变量在 for…in 循环中是不可变的，也具有块级作用域。
在大多数情况下，推荐使用 const 来声明迭代变量，以避免意外的重新赋值。