loyalvi
迭代方法
loyalvi Lv7
  2026-03-13 16:44:14   2026-03-16 10:42:02    

迭代方法

迭代

JavaScript 提供了多种迭代方法，用于遍历数组、对象和其他可迭代结构。以下是一些常见的迭代方法：

数组迭代方法

1. for 循环

最基本的迭代方法，适用于数组和类数组对象。

1
2
3
4
const arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]); // 输出 1 2 3 4 5
}

2. for...of 循环

用于遍历可迭代对象（如数组、字符串、Map、Set 等），语法简洁，不涉及索引。

1
2
3
4
const arr = [1, 2, 3, 4, 5];
for (let value of arr) {
    console.log(value); // 输出 1 2 3 4 5
}

3. forEach 方法

数组的 forEach 方法接受一个回调函数，对数组的每个元素执行一次回调函数。

1
2
3
4
const arr = [1, 2, 3, 4, 5];
arr.forEach((value, index) => {
    console.log(index, value); // 输出 0 1, 1 2, 2 3, 3 4, 4 5
});

4. map 方法

map 方法创建一个新数组，其元素是调用一次提供的函数后的返回值。

1
2
3
const arr = [1, 2, 3, 4, 5];
const squared = arr.map(value => value * value);
console.log(squared); // 输出 [1, 4, 9, 16, 25]

5. filter 方法

filter 方法创建一个新数组，包含通过测试的所有元素。

1
2
3
const arr = [1, 2, 3, 4, 5];
const even = arr.filter(value => value % 2 === 0);
console.log(even); // 输出 [2, 4]

6. reduce 方法

reduce 方法对数组中的每个元素执行一个由你提供的 reducer 函数（升序执行），将其结果汇总为单个返回值。

1
2
3
const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 输出 15

7. some 方法

some 方法测试数组中的元素是否满足在提供的函数中实现的测试条件，一旦找到一个使提供的函数返回 true 的元素，立即返回 true，否则返回 false。

1
2
3
const arr = [1, 2, 3, 4, 5];
const hasEven = arr.some(value => value % 2 === 0);
console.log(hasEven); // 输出 true

8. every 方法

every 方法测试数组中的所有元素是否都满足在提供的函数中实现的测试条件，如果数组中所有元素都满足条件，则返回 true，否则返回 false。

1
2
3
const arr = [1, 2, 3, 4, 5];
const allEven = arr.every(value => value % 2 === 0);
console.log(allEven); // 输出 false

对象迭代方法

1. for...in 循环

用于遍历对象的属性，但也会遍历对象原型链上的属性，除非使用 hasOwnProperty 方法进行过滤。

1
2
3
4
5
6
const obj = { a: 1, b: 2, c: 3 };
for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
        console.log(key, obj[key]); // 输出 a 1, b 2, c 3
    }
}

2. Object.keys 方法

Object.keys 方法返回一个由给定对象的自身可枚举属性组成的数组。

1
2
3
4
const obj = { a: 1, b: 2, c: 3 };
Object.keys(obj).forEach(key => {
    console.log(key, obj[key]); // 输出 a 1, b 2, c 3
});

3. Object.values 方法

Object.values 方法返回一个由给定对象的自身可枚举属性值组成的数组。

1
2
3
4
const obj = { a: 1, b: 2, c: 3 };
Object.values(obj).forEach(value => {
    console.log(value); // 输出 1 2 3
});

4. Object.entries 方法

Object.entries 方法返回一个给定对象自身可枚举属性的键值对数组。

1
2
3
4
const obj = { a: 1, b: 2, c: 3 };
Object.entries(obj).forEach(([key, value]) => {
    console.log(key, value); // 输出 a 1, b 2, c 3
});

其他可迭代结构

1. for...of 循环（字符串）

1
2
3
4
const str = 'hello';
for (let char of str) {
    console.log(char); // 输出 h e l l o
}

2. for...of 循环（Map）

1
2
3
4
const map = new Map([[1, 'one'], [2, 'two'], [3, 'three']]);
for (let [key, value] of map) {
    console.log(key, value); // 输出 1 one, 2 two, 3 three
}

3. for...of 循环（Set）

1
2
3
4
const set = new Set([1, 2, 3, 4, 5]);
for (let value of set) {
    console.log(value); // 输出 1 2 3 4 5
}

选择合适的迭代方法

  • 简单遍历：如果只需要遍历数组或对象的值，for...of 循环和 forEach 方法是不错的选择。
  • 需要索引：如果需要索引，for 循环和 forEach 方法更合适。
  • 生成新数组：map 方法用于生成新数组，每个元素是原数组元素经过回调函数处理后的结果。
  • 过滤数组：filter 方法用于生成一个新数组，包含满足条件的元素。
  • 累加操作：reduce 方法用于对数组中的元素进行累加或其他累加操作。
  • 条件检查：some 和 every 方法用于检查数组中的元素是否满足某个条件。
    选择合适的迭代方法可以提高代码的可读性和效率。

for循环

JavaScript 中的 for 循环是一种基本的循环结构，用于重复执行一段代码直到满足某个条件为止。以下是 for 循环的基本语法和一些常见用法：

基本语法

1
2
3
for (初始化表达式; 条件表达式; 更新表达式) {
    // 循环体
}
  • 初始化表达式：在循环开始前执行一次，通常用于初始化循环变量。
  • 条件表达式：在每次循环开始前进行判断，如果条件为 true，则执行循环体；如果条件为 false，则退出循环。
  • 更新表达式：在每次循环体执行完毕后执行，通常用于更新循环变量的值。

示例

示例1：基本用法

1
2
3
for (let i = 0; i < 5; i++) {
    console.log(i); // 输出 0 1 2 3 4
}

在这个例子中，i 是循环变量，初始化为 0，每次循环后 i 自增 1，直到 i 不再小于 5 时停止循环。

示例2：遍历数组

1
2
3
4
const arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]); // 输出 1 2 3 4 5
}

这里使用 for 循环遍历数组 arr，arr.length 获取数组的长度，arr[i] 访问数组中的每个元素。

示例3：遍历对象

虽然 for 循环通常用于遍历数组，但也可以用于遍历对象的属性，不过更常用的是 for...in 循环。

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

这里使用 for...in 循环遍历对象 obj 的每个属性，key 是属性名，obj[key] 是属性值。

注意事项

  • 避免在循环中修改数组长度：如果在 for 循环中修改数组的长度（如添加或删除元素），可能会导致循环行为异常。
  • 注意循环变量的作用域：在 for 循环中使用 let 或 const 声明循环变量，可以避免变量提升和作用域污染的问题。如果使用 var 声明，循环变量会在整个函数或全局作用域中有效。
  • 性能考虑：在处理大量数据时，for 循环的性能通常优于 for...of 和 for...in 循环，因为 for 循环的开销较小。

与其他循环结构的比较

  • for...of 循环：用于遍历可迭代对象（如数组、字符串等），语法更简洁。 
    1
    2
    3
    4
    const arr = [1, 2, 3, 4, 5];
    for (let value of arr) {
        console.log(value); // 输出 1 2 3 4 5
    }
  • for...in 循环：用于遍历对象的属性，但也会遍历对象原型链上的属性，除非使用 hasOwnProperty 方法进行过滤。 
    1
    2
    3
    4
    5
    6
    const obj = { a: 1, b: 2, c: 3 };
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            console.log(key, obj[key]); // 输出 a 1 b 2 c 3
        }
    }

Set 和 Map

在JavaScript中，Map和Set都提供了多种遍历方法，这些方法可以帮助你访问和操作集合中的元素。以下是Map和Set的遍历方法的详细介绍：

一、Map的遍历

  1. for...of循环
    • 使用for...of循环可以遍历Map中的所有键值对。每次迭代会返回一个包含键和值的数组。
    • 示例： 
      1
      2
      3
      4
      5
      6
      7
      8
      const myMap = new Map([
        ['key1', 'value1'],
        ['key2', 'value2'],
        ['key3', 'value3']
      ]);
      for (const [key, value] of myMap) {
        console.log(key, value); // 输出键和值
      }
  2. forEach方法
    • forEach方法可以遍历Map中的所有键值对，并为每个键值对执行一次提供的函数。
    • 示例： 
      1
      2
      3
      4
      5
      6
      7
      8
      const myMap = new Map([
        ['key1', 'value1'],
        ['key2', 'value2'],
        ['key3', 'value3']
      ]);
      myMap.forEach((value, key) => {
        console.log(key, value); // 输出键和值
      });
  3. keys方法
    • keys方法返回一个迭代器，该迭代器生成Map中所有键的值。
    • 示例： 
      1
      2
      3
      4
      5
      6
      7
      8
      const myMap = new Map([
        ['key1', 'value1'],
        ['key2', 'value2'],
        ['key3', 'value3']
      ]);
      for (const key of myMap.keys()) {
        console.log(key); // 输出键
      }
  4. values方法
    • values方法返回一个迭代器，该迭代器生成Map中所有值的值。
    • 示例： 
      1
      2
      3
      4
      5
      6
      7
      8
      const myMap = new Map([
        ['key1', 'value1'],
        ['key2', 'value2'],
        ['key3', 'value3']
      ]);
      for (const value of myMap.values()) {
        console.log(value); // 输出值
      }
  5. entries方法
    • entries方法返回一个迭代器，该迭代器生成Map中所有键值对的值。
    • 示例： 
      1
      2
      3
      4
      5
      6
      7
      8
      const myMap = new Map([
        ['key1', 'value1'],
        ['key2', 'value2'],
        ['key3', 'value3']
      ]);
      for (const [key, value] of myMap.entries()) {
        console.log(key, value); // 输出键和值
      }

二、Set的遍历

  1. for...of循环
    • 使用for...of循环可以遍历Set中的所有元素。每次迭代会返回一个元素。
    • 示例： 
      1
      2
      3
      4
      const mySet = new Set([1, 2, 3, 4, 5]);
      for (const value of mySet) {
        console.log(value); // 输出元素
      }
  2. forEach方法
    • forEach方法可以遍历Set中的所有元素，并为每个元素执行一次提供的函数。
    • 示例： 
      1
      2
      3
      4
      const mySet = new Set([1, 2, 3, 4, 5]);
      mySet.forEach((value) => {
        console.log(value); // 输出元素
      });
  3. values方法
    • values方法返回一个迭代器，该迭代器生成Set中所有元素的值。实际上，Set的values方法和for...of循环是等效的。
    • 示例： 
      1
      2
      3
      4
      const mySet = new Set([1, 2, 3, 4, 5]);
      for (const value of mySet.values()) {
        console.log(value); // 输出元素
      }
  4. keys方法
    • keys方法返回一个迭代器，该迭代器生成Set中所有元素的值。实际上，Set的keys方法和values方法是等效的。
    • 示例： 
      1
      2
      3
      4
      const mySet = new Set([1, 2, 3, 4, 5]);
      for (const key of mySet.keys()) {
        console.log(key); // 输出元素
      }
  5. entries方法
    • entries方法返回一个迭代器，该迭代器生成Set中所有元素的键值对。每个键值对的键和值都是相同的，因为Set中的元素没有键值对的概念。
    • 示例： 
      1
      2
      3
      4
      const mySet = new Set([1, 2, 3, 4, 5]);
      for (const [key, value] of mySet.entries()) {
        console.log(key, value); // 输出元素，键和值相同
      }

三、总结

  • Map的遍历方法：
    • for...of循环：遍历键值对
    • forEach方法：遍历键值对
    • keys方法：遍历键
    • values方法：遍历值
    • entries方法：遍历键值对
  • Set的遍历方法：
    • for...of循环：遍历元素
    • forEach方法：遍历元素
    • values方法：遍历元素
    • keys方法：遍历元素
    • entries方法：遍历键值对（键和值相同）
      通过这些遍历方法，可以灵活地访问和操作 Map 和 Set 中的元素。

forof

在 JavaScript 中，for...of 是一种用于遍历可迭代对象（Iterable Objects） 的循环语法。它直接遍历对象的值（而非键或索引），提供了一种简洁且语义清晰的遍历方式。

1. 基本语法

1
2
3
for (variable of iterable) {
  // 循环体
}
  • variable：每次迭代中接收当前值的变量。
  • iterable：可迭代对象（如数组、字符串、Map、Set 等）。

2. 使用场景

（1）遍历数组

直接获取数组元素的值：

1
2
3
4
const arr = [10, 20, 30];
for (const value of arr) {
  console.log(value); // 依次输出 10, 20, 30
}

（2）遍历字符串

逐个访问字符：

1
2
3
4
const str = "hello";
for (const char of str) {
  console.log(char); // 依次输出 'h', 'e', 'l', 'l', 'o'
}

（3）遍历 Map/Set

1
2
3
4
5
6
7
8
const map = new Map([["a", 1], ["b", 2]]);
for (const [key, value] of map) {
  console.log(key, value); // 输出 "a 1", "b 2"
}
const set = new Set([10, 20, 30]);
for (const value of set) {
  console.log(value); // 输出 10, 20, 30
}

（4）遍历类数组对象

如 arguments 或 DOM 集合：

1
2
3
4
5
6
function test() {
  for (const arg of arguments) {
    console.log(arg);
  }
}
test(1, 2, 3); // 输出 1, 2, 3

3. 与 for...in 的区别

特性 for...of for...in
遍历目标 遍历可迭代对象的值 遍历对象的可枚举属性名
适用对象 数组、字符串、Map、Set 等 普通对象（Object）
原型链属性 不遍历原型链上的属性 遍历原型链上的可枚举属性
索引/键类型 无索引（直接获取值） 键为字符串类型
示例对比： 
1
2
3
4
5
6
7
8
9
10
const arr = [10, 20, 30];
arr.foo = "bar"; // 添加自定义属性
// for...of：只遍历数组元素的值
for (const value of arr) {
  console.log(value); // 输出 10, 20, 30
}
// for...in：遍历所有可枚举属性（包括自定义属性）
for (const key in arr) {
  console.log(key); // 输出 "0", "1", "2", "foo"
}

4. 获取索引与值

若需要同时获取索引和值，可结合 Array.entries()：

1
2
3
4
const arr = ["a", "b", "c"];
for (const [index, value] of arr.entries()) {
  console.log(index, value); // 输出 "0 a", "1 b", "2 c"
}

5. 自定义可迭代对象

通过实现 Symbol.iterator 方法，使对象支持 for...of：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const customIterable = {
  data: [1, 2, 3],
  [Symbol.iterator]() {
    let index = 0;
    return {
      next: () => {
        if (index < this.data.length) {
          return { value: this.data[index++], done: false };
        } else {
          return { done: true };
        }
      },
    };
  },
};
for (const value of customIterable) {
  console.log(value); // 输出 1, 2, 3
}

6. 优势与限制

优势

  • 简洁性：无需手动管理索引或键。
  • 通用性：支持所有内置可迭代对象（如 Map、Set）。
  • 可中断性：可通过 break 或 return 提前终止循环。

限制

  • 不适用于普通对象：默认不支持遍历普通对象（需结合 Object.keys() 或 Object.entries()）。
  • 性能略低：在极端性能敏感场景下，传统 for 循环可能更快。

7. 与其他遍历方法对比

方法 适用场景 是否支持中断 是否直接获取值
for...of 可迭代对象的值遍历 是 是
for...in 对象属性名遍历 是 否（需手动取值）
Array.forEach 数组遍历（无法中断） 否 是
for 循环 需要索引控制的遍历 是 否（需手动索引）

8. 常见问题

如何遍历对象？

普通对象默认不可迭代，需结合 Object.keys()、Object.values() 或 Object.entries()：

1
2
3
4
const obj = { a: 1, b: 2 };
for (const key of Object.keys(obj)) {
  console.log(key); // 输出 "a", "b"
}

如何异步遍历？

使用 for await...of 遍历异步可迭代对象（如异步生成器）：

1
2
3
4
5
6
7
8
9
async function* asyncGenerator() {
  yield 1;
  yield 2;
}
(async () => {
  for await (const value of asyncGenerator()) {
    console.log(value); // 输出 1, 2
  }
})();

总结

for...of 是 JavaScript 中处理可迭代对象的首选遍历语法，它以简洁的语法直接访问值，避免了传统循环中的索引管理问题。结合 Symbol.iterator，还可以自定义对象的遍历行为，灵活且强大。

iterable

在 JavaScript 中，可迭代对象（Iterable） 是指那些实现了 Symbol.iterator 方法的对象。这个方法返回一个迭代器（Iterator），迭代器是一个对象，它定义了如何遍历数据结构中的元素。可迭代对象是许多现代 JavaScript 特性（如 for...of 循环、扩展运算符 ...、Array.from() 等）的基础。

1. 什么是可迭代对象？

一个对象是可迭代的，如果它实现了 Symbol.iterator 方法。这个方法返回一个迭代器，迭代器是一个对象，它必须实现以下两个方法：

  • next()：返回一个包含两个属性的对象：
    • value：当前迭代的值。
    • done：一个布尔值，表示迭代是否完成。
  • return()（可选）：用于提前结束迭代，返回一个对象，包含 value 和 done 属性。
  • throw()（可选）：用于在迭代器中抛出异常。

2. 内置的可迭代对象

JavaScript 中许多内置对象都是可迭代的，包括：

  • 数组（Array）
  • 字符串（String）
  • 映射（Map）
  • 集合（Set）
  • arguments 对象
  • NodeList（DOM 中的节点列表）
  • TypedArray（如 Uint8Array 等）

3. 自定义可迭代对象

你可以通过实现 Symbol.iterator 方法来创建自定义的可迭代对象。

示例：自定义可迭代对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
class Range {
  constructor(start, end) {
    this.start = start;
    this.end = end;
  }
  [Symbol.iterator]() {
    return {
      current: this.start,
      last: this.end,
      next() {
        if (this.current <= this.last) {
          return { done: false, value: this.current++ };
        } else {
          return { done: true, value: undefined };
        }
      }
    };
  }
}
const range = new Range(1, 5);
for (const num of range) {
  console.log(num); // 输出：1, 2, 3, 4, 5
}

4. 可迭代对象的应用

可迭代对象在许多现代 JavaScript 特性中都有应用，以下是一些常见场景：

4.1 for...of 循环

for...of 循环是遍历可迭代对象的标准方式：

1
2
3
4
5
6
7
8
const arr = [1, 2, 3];
for (const item of arr) {
  console.log(item); // 输出：1, 2, 3
}
const str = "hello";
for (const char of str) {
  console.log(char); // 输出：h, e, l, l, o
}

4.2 扩展运算符（...）

扩展运算符可以将可迭代对象展开为独立的元素：

1
2
3
4
5
6
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // 输出：[1, 2, 3, 4, 5]
const str = "hello";
const chars = [...str];
console.log(chars); // 输出：['h', 'e', 'l', 'l', 'o']

4.3 Array.from()

Array.from() 方法可以将可迭代对象转换为数组：

1
2
3
4
5
const arr = Array.from([1, 2, 3]);
console.log(arr); // 输出：[1, 2, 3]
const str = "hello";
const chars = Array.from(str);
console.log(chars); // 输出：['h', 'e', 'l', 'l', 'o']

4.4 Map 和 Set

Map 和 Set 也是可迭代对象，它们的迭代器会返回键值对或值：

1
2
3
4
5
6
7
8
const map = new Map([[1, 'one'], [2, 'two']]);
for (const [key, value] of map) {
  console.log(key, value); // 输出：1 'one', 2 'two'
}
const set = new Set([1, 2, 3]);
for (const value of set) {
  console.log(value); // 输出：1, 2, 3
}

5. 迭代器的高级用法

5.1 提前结束迭代

通过 return() 方法可以提前结束迭代器：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const iterator = {
  current: 0,
  max: 5,
  next() {
    if (this.current < this.max) {
      return { done: false, value: this.current++ };
    } else {
      return { done: true };
    }
  },
  return() {
    return { done: true };
  }
};
const it = iterator;
console.log(it.next()); // { value: 0, done: false }
console.log(it.next()); // { value: 1, done: false }
console.log(it.return()); // { done: true }

5.2 在迭代器中抛出异常

通过 throw() 方法可以在迭代器中抛出异常：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const iterator = {
  current: 0,
  max: 5,
  next() {
    if (this.current < this.max) {
      return { done: false, value: this.current++ };
    } else {
      return { done: true };
    }
  },
  throw(error) {
    throw error;
  }
};
const it = iterator;
console.log(it.next()); // { value: 0, done: false }
try {
  it.throw(new Error('Something went wrong'));
} catch (e) {
  console.error(e.message); // 输出：Something went wrong
}

6. 总结

  • 可迭代对象 是那些实现了 Symbol.iterator 方法的对象。
  • 迭代器 是一个返回 { value, done } 对象的对象。
  • 内置可迭代对象 包括数组、字符串、映射、集合等。
  • 可迭代对象的应用 包括 for...of 循环、扩展运算符、Array.from() 等。
  • 高级用法 包括提前结束迭代和在迭代器中抛出异常。
    通过理解和使用可迭代对象，你可以更高效地处理数据结构，并利用 JavaScript 的现代特性。

枚举和迭代

在 JavaScript 中，枚举（Enumeration） 和 迭代（Iteration） 是两个不同的概念，但它们都与遍历和处理数据结构有关。以下是对这两个概念的详细解释和示例。

1. 枚举（Enumeration）

枚举是一种数据结构，用于定义一组命名的常量。在 JavaScript 中，没有内置的枚举类型，但可以通过对象或类来模拟枚举。

示例：使用对象模拟枚举

1
2
3
4
5
6
7
8
const Color = {
  RED: 0,
  GREEN: 1,
  BLUE: 2
};
console.log(Color.RED); // 输出：0
console.log(Color.GREEN); // 输出：1
console.log(Color.BLUE); // 输出：2

示例：使用类模拟枚举

从 ES6 开始，可以使用类来定义枚举：

1
2
3
4
5
6
7
8
class Color {
  static RED = 0;
  static GREEN = 1;
  static BLUE = 2;
}
console.log(Color.RED); // 输出：0
console.log(Color.GREEN); // 输出：1
console.log(Color.BLUE); // 输出：2

2. 迭代（Iteration）

迭代是指通过某种方式逐个访问数据结构中的每个元素。JavaScript 提供了多种迭代方式，包括 for 循环、for...of 循环、forEach 方法等。

2.1 基本迭代方法

  • for 循环：传统的迭代方式，适用于数组和对象。
  • for...of 循环：用于遍历可迭代对象（如数组、字符串、映射、集合等）。
  • forEach 方法：数组特有的方法，用于遍历数组中的每个元素。

示例：for 循环

1
2
3
4
const arr = [1, 2, 3];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]); // 输出：1, 2, 3
}

示例：for...of 循环

1
2
3
4
5
6
7
8
const arr = [1, 2, 3];
for (const item of arr) {
  console.log(item); // 输出：1, 2, 3
}
const str = "hello";
for (const char of str) {
  console.log(char); // 输出：h, e, l, l, o
}

示例：forEach 方法

1
2
3
4
const arr = [1, 2, 3];
arr.forEach(item => {
  console.log(item); // 输出：1, 2, 3
});

3. 迭代器（Iterator）

迭代器是一种特殊的对象，它定义了如何遍历数据结构中的元素。迭代器必须实现 next() 方法，返回一个包含 value 和 done 属性的对象。

示例：自定义迭代器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const myIterable = {
  [Symbol.iterator]() {
    let step = 0;
    const steps = ['start', 'middle', 'end'];
    return {
      next() {
        if (step < steps.length) {
          return { done: false, value: steps[step++] };
        } else {
          return { done: true };
        }
      }
    };
  }
};
for (const step of myIterable) {
  console.log(step); // 输出：start, middle, end
}

4. 可迭代对象（Iterable）

可迭代对象是那些实现了 Symbol.iterator 方法的对象。可迭代对象可以被 for...of 循环、扩展运算符 ... 等使用。

示例：自定义可迭代对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
class Range {
  constructor(start, end) {
    this.start = start;
    this.end = end;
  }
  [Symbol.iterator]() {
    return {
      current: this.start,
      last: this.end,
      next() {
        if (this.current <= this.last) {
          return { done: false, value: this.current++ };
        } else {
          return { done: true };
        }
      }
    };
  }
}
const range = new Range(1, 5);
for (const num of range) {
  console.log(num); // 输出：1, 2, 3, 4, 5
}

5. 总结

  • 枚举：用于定义一组命名的常量，可以通过对象或类来模拟。
  • 迭代：通过某种方式逐个访问数据结构中的每个元素，常见的迭代方法包括 for 循环、for...of 循环、forEach 方法等。
  • 迭代器：定义了如何遍历数据结构中的元素，必须实现 next() 方法。
  • 可迭代对象：实现了 Symbol.iterator 方法的对象，可以被 for...of 循环、扩展运算符等使用。
    通过理解和使用这些概念，你可以更高效地处理和遍历数据结构。
迭代方法
posts/235f7625/
作者
loyalvi
发布于
2026-03-13 16:44
许可
  1. 迭代方法
    1. 迭代
      1. 数组迭代方法
        1. 1. for 循环
        2. 2. for...of 循环
        3. 3. forEach 方法
        4. 4. map 方法
        5. 5. filter 方法
        6. 6. reduce 方法
        7. 7. some 方法
        8. 8. every 方法
      2. 对象迭代方法
        1. 1. for...in 循环
        2. 2. Object.keys 方法
        3. 3. Object.values 方法
        4. 4. Object.entries 方法
      3. 其他可迭代结构
        1. 1. for...of 循环（字符串）
        2. 2. for...of 循环（Map）
        3. 3. for...of 循环（Set）
      4. 选择合适的迭代方法
    2. for循环
      1. 基本语法
      2. 示例
        1. 示例1：基本用法
        2. 示例2：遍历数组
        3. 示例3：遍历对象
      3. 注意事项
      4. 与其他循环结构的比较
    3. Set 和 Map
      1. 一、Map的遍历
      2. 二、Set的遍历
      3. 三、总结
    4. forof
      1. 1. 基本语法
      2. 2. 使用场景
        1. （1）遍历数组
        2. （2）遍历字符串
        3. （3）遍历 Map/Set
        4. （4）遍历类数组对象
      3. 3. 与 for...in 的区别
      4. 4. 获取索引与值
      5. 5. 自定义可迭代对象
      6. 6. 优势与限制
        1. 优势
        2. 限制
      7. 7. 与其他遍历方法对比
      8. 8. 常见问题
        1. 如何遍历对象？
        2. 如何异步遍历？
      9. 总结
    5. iterable
      1. 1. 什么是可迭代对象？
      2. 2. 内置的可迭代对象
      3. 3. 自定义可迭代对象
        1. 示例：自定义可迭代对象
      4. 4. 可迭代对象的应用
        1. 4.1 for...of 循环
        2. 4.2 扩展运算符（...）
        3. 4.3 Array.from()
        4. 4.4 Map 和 Set
      5. 5. 迭代器的高级用法
        1. 5.1 提前结束迭代
        2. 5.2 在迭代器中抛出异常
      6. 6. 总结
    6. 枚举和迭代
      1. 1. 枚举（Enumeration）
        1. 示例：使用对象模拟枚举
        2. 示例：使用类模拟枚举
      2. 2. 迭代（Iteration）
        1. 2.1 基本迭代方法
        2. 示例：for 循环
        3. 示例：for...of 循环
        4. 示例：forEach 方法
      3. 3. 迭代器（Iterator）
        1. 示例：自定义迭代器
      4. 4. 可迭代对象（Iterable）
        1. 示例：自定义可迭代对象
      5. 5. 总结
© 2020 - 2026    loyalvi
由 Hexo 驱动 & 主题 Keep
访客数 访问量
  1. 迭代方法
    1. 迭代
      1. 数组迭代方法
        1. 1. for 循环
        2. 2. for...of 循环
        3. 3. forEach 方法
        4. 4. map 方法
        5. 5. filter 方法
        6. 6. reduce 方法
        7. 7. some 方法
        8. 8. every 方法
      2. 对象迭代方法
        1. 1. for...in 循环
        2. 2. Object.keys 方法
        3. 3. Object.values 方法
        4. 4. Object.entries 方法
      3. 其他可迭代结构
        1. 1. for...of 循环（字符串）
        2. 2. for...of 循环（Map）
        3. 3. for...of 循环（Set）
      4. 选择合适的迭代方法
    2. for循环
      1. 基本语法
      2. 示例
        1. 示例1：基本用法
        2. 示例2：遍历数组
        3. 示例3：遍历对象
      3. 注意事项
      4. 与其他循环结构的比较
    3. Set 和 Map
      1. 一、Map的遍历
      2. 二、Set的遍历
      3. 三、总结
    4. forof
      1. 1. 基本语法
      2. 2. 使用场景
        1. （1）遍历数组
        2. （2）遍历字符串
        3. （3）遍历 Map/Set
        4. （4）遍历类数组对象
      3. 3. 与 for...in 的区别
      4. 4. 获取索引与值
      5. 5. 自定义可迭代对象
      6. 6. 优势与限制
        1. 优势
        2. 限制
      7. 7. 与其他遍历方法对比
      8. 8. 常见问题
        1. 如何遍历对象？
        2. 如何异步遍历？
      9. 总结
    5. iterable
      1. 1. 什么是可迭代对象？
      2. 2. 内置的可迭代对象
      3. 3. 自定义可迭代对象
        1. 示例：自定义可迭代对象
      4. 4. 可迭代对象的应用
        1. 4.1 for...of 循环
        2. 4.2 扩展运算符（...）
        3. 4.3 Array.from()
        4. 4.4 Map 和 Set
      5. 5. 迭代器的高级用法
        1. 5.1 提前结束迭代
        2. 5.2 在迭代器中抛出异常
      6. 6. 总结
    6. 枚举和迭代
      1. 1. 枚举（Enumeration）
        1. 示例：使用对象模拟枚举
        2. 示例：使用类模拟枚举
      2. 2. 迭代（Iteration）
        1. 2.1 基本迭代方法
        2. 示例：for 循环
        3. 示例：for...of 循环
        4. 示例：forEach 方法
      3. 3. 迭代器（Iterator）
        1. 示例：自定义迭代器
      4. 4. 可迭代对象（Iterable）
        1. 示例：自定义可迭代对象
      5. 5. 总结