JS 数组的遍历 —— 两种方式详解

小雪_Snow2026-07-15 9:28

JS 数组的遍历 ------ 两种方式详解

一、普通 for 循环

语法

javascript 复制代码

for (var i = 0; i < 数组名.length; i++) {
    // 数组名[i] 就是当前元素
}

示例

javascript 复制代码

let fruits = ['apple', 'banana', 'cherry', 'durian'];

for (var i = 0; i < fruits.length; i++) {
    console.log('第' + i + '个元素：' + fruits[i]);
}

// 输出：
// 第0个元素：apple
// 第1个元素：banana
// 第2个元素：cherry
// 第3个元素：durian

二、增强 for 循环（for...of）

语法

javascript 复制代码

for (var 变量名 of 数组名) {
    // 变量名 就是当前元素的值
}

示例

javascript 复制代码

let fruits = ['apple', 'banana', 'cherry', 'durian'];

for (var fruit of fruits) {
    console.log(fruit);
}

// 输出：
// apple
// banana
// cherry
// durian

与普通 for 的对比

javascript 复制代码

let arr = ['a', 'b', 'c'];

// 普通 for：需要手动通过 arr[i] 取值
for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]); // 输出：a b c
}

// for...of：直接拿到元素值
for (var item of arr) {
    console.log(item); // 输出：a b c
}

for...of 更简洁，但无法直接获取索引。如果同时需要索引和值，普通 for 更合适。