下一个 → ← 上一个

JavaScript for…of Loop

2025年4月16日 | 阅读 4 分钟

引言

JavaScript for…of 循环遍历的是对象的值而不是其键。使用循环，您可以直接访问元素，而不是通过索引引用。

这是一个现代的迭代语句，它在 ECMAScript 2015(ES6) 中引入。它适用于可迭代对象，如数组、字符串、Map、Set 等。

与传统的 for 或 for…in 循环相比，JavaScript for…of 循环是遍历可迭代对象元素的更好选择，尤其是在我们有 break 或 continue 语句时。

JavaScript for…of Loop 语法

for…of 循环的语法如下

for(variable of iterable){
    //code to execute
}

iterable: 可迭代对象，如数组、Set、字符串等。

variable: 可迭代对象中的一个元素。

JavaScript for…of 配合数组

JavaScript for…of 循环可用于遍历数组。

示例

const students = ['Ani', 'Affi', 'Rex'];
for ( let element of students ) {
    console.log(element);
}

输出

Ani
Affi
Rex

说明

在上面的示例中，for…of 循环用于遍历 students 数组对象并显示其所有值。

JavaScript for…of 配合字符串

在 JavaScript 中，您可以使用 for…of 循环来遍历字符串值。

示例

const string = 'Tpoint';
for( let i of string){
  console.log(i);
}

输出

T
p
o
i
n
t

JavaScript for…of 配合 Map

您还可以使用 JavaScript for…of 循环遍历 Map 元素。

示例

let map = new Map();
map.set('name', 'Ash');
map.set('age', '21');
for (let [key, value] of map) {
    console.log(key + '- ' + value);
}

输出

name- Ash
age- 21

JavaScript for…of 配合 Set

您还可以使用 JavaScript for…of 循环遍历 Set 元素。

示例

let s = new Set([11, 22, 33, 44, 55]);
for (let value of s) {
    console.log(value);
}

输出

在 for…of 循环中嵌套 for 循环

在此方法中，一个 for 循环嵌套在 for…of 循环中。for…of 循环遍历数组等可迭代对象，而内部的 for 循环可以为每个元素执行额外的迭代。

语法

在 for…of 循环中嵌套 for 循环的语法如下

for (let value of arr) {
    for (let i = 0; i < limit; i++) {
        // Code to execute
    }
}

示例

const arr = [1, 2, 3];

for (let value of arr) {
    console.log(`Value: ${value}`);
    for (let i = 1; i <= 3; i++) {
        console.log(`  Value plus ${i}: ${value + i}`);
    }
}

输出

Value: 1
  Value plus 1: 2
  Value plus 2: 3
  Value plus 3: 4
Value: 2
  Value plus 1: 3
  Value plus 2: 4
  Value plus 3: 5
Value: 3
  Value plus 1: 4
  Value plus 2: 5
  Value plus 3: 6

示例

for (const num of [2, 3, 4]) { // Outer loop iterates over base numbers
    console.log(`Multiplication Table of ${num}:`);
    
    for (let i = 1; i <= 3; i++) { // Inner loop iterates over multipliers
        console.log(`  ${num} x ${i} = ${num * i}`);
    }
}

输出

Multiplication Table of 2:
  2 x 1 = 2
  2 x 2 = 4
  2 x 3 = 6
Multiplication Table of 3:
  3 x 1 = 3
  3 x 2 = 6
  3 x 3 = 9
Multiplication Table of 4:
  4 x 1 = 4
  4 x 2 = 8
  4 x 3 = 12

JavaScript for…of Loop 的特性

简单性

JavaScript for…of 循环为遍历元素提供了简洁明了的语法，这减少了出错的可能性，并使代码更易于阅读和维护。

多功能性

在 JavaScript 中，for…of 循环可以遍历任何可迭代对象，如数组、字符串、Set，甚至自定义的可迭代对象，这在处理各种数据结构时提供了更好的灵活性。

直接访问元素

与 forEach() 不同，forEach() 需要一个回调函数，for…of 循环在循环体中直接访问元素，这允许更简单的代码结构并对每个元素立即采取行动。

控制流

在 JavaScript 中，for…of 循环可以使用 break、continue 或 return（在函数内部使用时）来提前终止；与 forEach() 不同，它提供了对迭代过程的更好控制。

for…of 和 for…in 的区别

for…of	for…in
JavaScript for…of 循环用于遍历可迭代对象的值。	JavaScript for…in 循环用于遍历对象的键。
for…of 循环不能用于遍历对象。	您可以使用 for…in 遍历数组和字符串等变量，但应避免将 for…in 用于可迭代对象。

下一个主题JavaScript for…in Loop

← 上一个下一个 →

相关帖子

我们提供所有技术（如 Java 教程、Android、Java 框架）的教程和面试问题

联系信息

G-13, 2nd Floor, Sec-3, Noida, UP, 201301, India

hr@tpointtech.com

关注我们

教程

Java 数据结构 C 语言 C++ 教程 C# 教程 PHP 教程 HTML 教程 JavaScript 教程 jQuery 教程 Spring 教程

面试题

Microsoft Amazon Adobe Intuit Accenture Cognizant Capgemini Wipro Tcs Infosys

在线编译器

C R C++ Php Java Html Swift Python JavaScript TypeScript

最新帖子 | 教程列表 | 隐私政策 | 关于我们 | 联系我们

© 版权所有 2011 - 2025 TpointTech.com。保留所有权利。