当前位置：首页 > 全部内容 > JavaScript 数组遍历的五种方法详解

JavaScript 数组遍历的五种方法详解

作者：拾光时间：2026-10-25 01:03:28浏览：167

本文详细介绍JavaScript中遍历数组的五种常用方法：for循环、forEach、map、for...in和for...of。重点解析各方法的参数、适用场景及区别，特别是for...of提供的key、value和entries遍历方式，以及break/continue在回调函数中的限制与替代方案。

在JavaScript开发中，遍历数组是常见操作，主要包含for循环、forEach、map、for...in以及for...of这五种方式。

一、for 循环：基础、简单

这是最基础且通用的数组遍历方式，绝大多数编程语言均支持该语法。


let arr = ['a','b','c','d','e'];
for (let i = 0, len = arr.length; i < len; i++) {
  console.log(i);    // 0 1 2 3 4
  console.log(arr[i]); //a b c d e
}

二、forEach() 方法：使用回调函数

forEach()是数组对象内置的方法，接收一个回调函数作为参数。该回调函数包含三个参数：

  • 第一个参数为当前数组元素（必选）
  • 第二个参数为当前元素的索引值（可选）
  • 第三个参数为数组本身（可选）

let arr = ['a','b','c','d','e'];
arr.forEach((item,index,arr)=> {
  console.log(item);  // a b c d e 
  console.log(index); // 0 1 2 3 4
  console.log(arr);  // ['a','b','c','d','e']
})

三、map() 方法：使用回调函数

map()的使用方式与forEach()类似，同样接收回调函数。


var arr = [
  {name:'a',age:'18'},
  {name:'b',age:'19'},
  {name:'c',age:'20'}
];
arr.map(function(item,index) {
  if(item.name == 'b') {
    console.log(index) // 1
  }
})

四、for..in 循环：遍历对象和数组

for...in循环既可用于遍历对象，也可用于数组。通常推荐用于遍历对象属性，同时也适用于遍历JSON数据。


let obj = {
  name: '王大锤',
  age: '18',
  weight: '70kg'
}
for(var key in obj) {
  console.log(key);    // name age weight
  console.log(obj[key]); // 王大锤 18 70kg
}
----------------------------
let arr = ['a','b','c','d','e'];
for(var key in arr) {
  console.log(key); // 0 1 2 3 4 返回数组索引
  console.log(arr[key]) // a b c d e
}

五、for…of 循环：遍历对象和数组

该循环可处理数组和对象，但主要推荐用于遍历数组元素。

for...of提供了三种新的遍历方式：

  • key()用于遍历键名
  • value()用于遍历键值
  • entries()用于遍历键值对

let arr = ['科大讯飞', '政法BG', '前端开发'];
for (let item of arr) { 
 console.log(item); // 科大讯飞 政法BG 前端开发
}
// 输出数组索引
for (let item of arr.keys()) { 
 console.log(item); // 0 1 2
}
// 输出内容和索引
for (let [item, val] of arr.entries()) { 
 console.log(item + ':' + val); // 0:科大讯飞 1：政法BG 2：前端开发
}

六、补充

6.1、break 和 Continue 问题

在forEach、map、filter、reduce、every、some函数中，break和 continue 关键词均无法生效，因为这些方法内部封装了function，虽然解决了闭包陷阱问题。若需使用break或continue，应改用for、for...in、for...of、while。

6.2、数组和对象

遍历数组元素推荐使用：for()，forEach()，map()，for...of。遍历对象属性则使用：for...in。

以上为JavaScript数组遍历五种方法的详细内容，更多相关技术文章请查阅本站其他资源。

作者最新文章

JS处理含Emoji或中文的字符串转数组乱码问题

2026-11-05 16:12:28

JS怎么使用展开运算符合并对象

2026-11-05 14:42:18

ES6+环境下判断JS对象为空的简洁写法

2026-11-05 12:12:23

怎么通过replacer函数自定义JS中JSON的格式化输出

2026-11-05 11:19:44

JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符

2026-11-05 11:16:58

相关标签：

JavaScript数组遍历