介绍5种常用 for循环：for、forEach、map、for in、for of。

最新推荐文章于 2024-11-26 21:43:29 发布

隔壁的程序员大表哥

最新推荐文章于 2024-11-26 21:43:29 发布

阅读量853

点赞数 2

文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/weixin_70024734/article/details/131637207

版权

文章详细介绍了JavaScript中五种不同的遍历方式：普通for循环、forEach、map、forin和forof，分别应用于数组、对象、字符串和可迭代对象。for循环是最基础的形式，forEach和map是数组操作的便捷方式，forin遍历对象的可枚举属性，forof则适用于ES6的可迭代对象。性能上，for循环通常优于其他遍历方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、for

普通for循环是最早出现的遍历语句，能满足开发人员的绝大多数需求。

// 遍历数组
let arr = [1,2,3,4,5];
for(let i = 0; i < arr.length; i++){
    console.log(i);   // 索引，数组下标 0 1 2 3 4
    console.log(arr[i]);   // 数组下标所对应的元素 1 2 3 4 5
}
 
// 遍历对象
let obj = {name:"leo", age:20, country:"China"};
for(let i = 0, keys = Object.keys(obj); i < keys.length; i++){
    console.log(keys[i]);   // 对象的键值 name age country
    console.log(obj[keys[i]]);   // 对象的键对应的值 leo 20 China
}
 
// 遍历字符串
let str = "abcdef";
for(let i = 0; i < str.length; i++){
    console.log(i);   // 索引，字符串的下标 0 1 2 3 4 5
    console.log(str[i]);   // 字符串下标所对应的元素 a b c d e f
}

2、forEach

forEach 是ES5版本发布的，按升序为数组中含有效值的每一项执行一次回调函数，那些已删除或者未初始化的项将被跳过（例如在稀疏数组上），一般认为是普通for循环的加强版。

// 遍历数组
let arr = [1,2,3,4,5];
arr.forEach(item => {
    console.log(item);   // 直接输出了数组的元素 1 2 3 4 5
});
 
// 遍历对象
let obj = {name:"leo", age:20, country:"China"};
let keys = Object.keys(obj);
keys.forEach(i => {
    console.log(i);   // 对象的键值 name age country
    console.log(obj[i]);   // 对象的键对应的值 leo 20 China
});

3、map

map 是ES5版本发布的，遍历时可以返回一个新数组，新数组的结果是原数组中的每个元素都调用一次提供的函数后的返回值。

let arr = [1,2,3,4,5];
let newArr = arr.map(i => i * i);
 
console.log(newArr);   // [1, 4, 9, 16, 25]

4、for in

for in 是ES5版本发布的，以随机顺序遍历一个对象中除 Symbol 以外的可枚举属性（包括原型对象上的可枚举属性）。

// 遍历数组
let arr = [1,2,3,4,5];
for(let i in arr){
    console.log(i);   // 索引，数组下标 0 1 2 3 4
    console.log(arr[i]);   // 数组下标所对应的元素 1 2 3 4 5
}
 
// 遍历对象
let obj = {name:"leo", age:20, country:"China"};
for(let key in obj){
    console.log(key);   // 对象的键 name age country
    console.log(obj[key]);   // 对象的键对应的值 leo 20 China
}
 
// 遍历字符串
let str = "abcdef";
for(let i in str){
    console.log(i);   // 索引，字符串下标 0 1 2 3 4 5
    console.log(str[i]);   // 字符串下标所对应的元素 a b c d e f
}

5、for of

for of 是ES6版本发布的，在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。

// 迭代数组
let arr = [1,2,3,4,5];
for(let item of arr){
    console.log(item);   // 遍历数组元素 1 2 3 4 5
}
 
// 迭代字符串
let str = "abcdef";
for(let item of str) {
    console.log(item);   // 遍历字符串元素 a b c d e f
}
 
// 迭代Map
let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
for (let entry of iterable) {
    console.log(entry);  // 遍历Map中可迭代元素 ["a", 1] ["b", 2] ["c", 3]
}
 
// 迭代Set
let iterable = new Set([1, 1, 2, 2, 3, 3,4]);
for (let value of iterable) {
    console.log(value);   // 遍历Set中可迭代元素 1 2 3 4
}
 
// 迭代arguments类数组对象
function fn(){
  for (let argument of arguments) {
    console.log(argument);
  }
}
fn(1, 2, 3);   // 1 2 3