JavaScript 语句之常用 for 循环详解
JavaScript中循环语句不少，for、for in、for of和forEach循环，今天对比Array、Object、Set(ES6)、Map(ES6)四种数据结构循环语句支持的情况及区别。 新建四种数据类型的测试数据 let arr = [1, 2, 3, 4, 5, 6]; let obj = { a: 1, b: 2, c: 3 }; let map = new Map([['a', 'a1'], ['b', 'b2'], ['c', 'c3']]); let set = new Set(['a', 'b', 'c
### JavaScript中的循环详解
在JavaScript中，循环是执行重复任务的一种常见方式，它允许开发者针对一组数据或条件多次运行相同的代码块。本文将详细介绍几种常用的循环类型：`for`、`for...in`、`for...of`以及`forEach`方法，并通过具体的示例展示这些循环如何应用于不同数据结构（如数组、对象、Set 和 Map）。
#### 1. 普通 `for` 循环
**用途与语法**：
- **数组**：`for` 循环非常适合遍历数组元素，因为可以通过索引来访问每个元素。
- **语法**：`for (初始化表达式; 条件表达式; 更新表达式)`。
**示例**：
```javascript
let arr = [1, 2, 3, 4, 5, 6];
for (let i = 0; i < arr.length; i++) {
console.log(i); // 打印索引
console.log(arr[i]); // 打印对应索引的值
}
```
#### 2. `for...in` 循环
**用途与语法**：
- **数组和对象**：`for...in` 可用于遍历对象的所有可枚举属性，包括继承自原型链的属性。
- **语法**：`for (变量 in 对象)`。
**示例**：
```javascript
let arr = [1, 2, 3, 4, 5, 6];
Array.prototype.a = "1";
for (let i in arr) {
console.log(i); // 打印索引
console.log(arr[i]); // 打印对应索引的值
}
// 过滤原型属性
for (let i in arr) {
if (arr.hasOwnProperty(i)) {
console.log(i);
console.log(arr[i]);
}
}
let obj = { a: 1, b: '2', c: 3 };
Object.prototype.d = 4;
for (let key in obj) {
console.log(key); // 打印键
console.log(obj[key]); // 打印值
}
// 过滤原型属性
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
console.log(key);
console.log(obj[key]);
}
}
```
#### 3. `for...of` 循环
**用途与语法**：
- **数组、Set、Map 和字符串**：`for...of` 可以遍历所有可迭代的数据结构。
- **语法**：`for (变量 of 可迭代对象)`。
**示例**：
- **数组**：
```javascript
for (let value of arr) {
console.log(value); // 打印值
}
```
- **Set**：
```javascript
for (let value of set) {
console.log(value); // 打印值
}
```
- **Map**：
```javascript
for (let [key, value] of map) {
console.log(key, value); // 打印键值对
}
```
- **对象**（需转换为可迭代格式）：
```javascript
for (let [key, value] of Object.entries(obj)) {
console.log(key, value); // 打印键值对
}
```
#### 4. `forEach` 方法
**用途与语法**：
- **数组**：`forEach` 是 Array 的方法之一，用于遍历数组中的每一个元素。
- **语法**：`array.forEach(callback(currentValue[, index[, array]])[, thisArg])`。
**示例**：
```javascript
arr.forEach((value, index) => {
console.log(index, value); // 打印索引和值
});
```
#### 总结
通过上述示例可以看出，不同的循环机制适用于不同的场景：
- **`for` 循环**：适用于任何需要按顺序处理数组或对象索引的情况。
- **`for...in` 循环**：主要用于遍历对象的属性名。
- **`for...of` 循环**：适用于遍历可迭代对象，如数组、Set、Map 和字符串等。
- **`forEach` 方法**：适用于简单的数组遍历需求，尤其是当只需要执行一个回调函数时。
每种循环都有其独特的优点和适用范围。选择合适的循环类型可以提高代码的效率和可读性。
