JavaScript 数组遍历的五种方法

在使用 JavaScript 编写代码过程中，可以使用多个方法对数组进行遍历；包括 for循环、forEach循环、map 循环、forIn循环和forOf循环等方法。

一、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() 这是数组对象的一个方法；其接受一个回调函数为参数。
回调函数中有三个参数：

  • 1st：数组元素(必选)
  • 2nd：数组元素索引值(可选)
  • 3rd：数组本身(可选)
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() 方法：使用回调函数

其使用方式和 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中，但function解决了闭包陷阱的问题。
要想使用 break、continue 可以使用 for、for...in、for...of、while。

6.2、数组和对象

用于遍历数组元素使用：for()，forEach()，map()，for...of 。
用于循环对象属性使用：for...in。

以上就是JavaScript 数组遍历的五种方法的详细内容，更多关于JavaScript 数组遍历的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • JavaScript实现前端网页版倒计时

    JavaScript实现前端网页版倒计时

    使用原生JavaScript简单实现倒计时,供大家参考,具体内容如下 效果 代码 // An highlighted block <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- css样式 --> <style type="text/css"> * { margin: 0;

  • javascript类数组的深入理解

    javascript类数组的深入理解

    js数组,相比大家都很熟悉,因为走到哪都要用,但它有个"双胞胎弟弟" ,叫类数组(也叫伪数组),可能有的人了解,有的人不了解,今天我们来看一看. 什么是类数组 顾名思义,这玩意儿肯定是个长得像数组,但又不算数组的东西.那到底是个啥,其实它就是一个对象,一个长的像数组的对象. 和数组的区别 那类数组和数组有啥区别: 1.都有length属性 2.类数组也可以for循环遍历,有的类数组还可以通过 for of 遍历 3.类数组不具备数组的原型方法,因此类数组不可调用相关数组方法(如,pus

  • javascript实现用户必须勾选协议实例讲解

    javascript实现用户必须勾选协议实例讲解

    在js中设置用户必须阅读完某项协议 才能勾选登陆或注册 (disabled的使用技巧) 仔细观看两张图片画圈部分是不一样的 当滚轮在上面时下面的表单是不可选中的 第二张在底部表单是可选中的 其中方法为为监听这个滚轮,当滚轮到达底部时 表单变为可选中状态 info.scrollHeight - info.scrollTop == info.clientHeight //判断滚条是否到达了底部 <!DOCTYPE html> <html> <head> <meta c

  • javascript实现图片预加载和懒加载

    javascript实现图片预加载和懒加载

    本文实例为大家分享了javascript实现图片预加载和懒加载的具体代码,供大家参考,具体内容如下 预加载 预加载是预先加载好后面需要用到的资源, 后面使用的时候直接去缓存里取.举个栗子, 比如一个网站的开场动画, 这些动画是由很多图片组成的, 假如不预先加载好, 那就会造成动画不流畅产生闪动白屏.图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,保证了图片快速.无缝地发布,使用户在浏览你网站内容时获得更好的用户体验. //这里我把图片数量写死了,而且对图片名也有要求必须是阿拉伯数字后缀

  • JavaScript中的for循环与双重for循环详解

    for循环 for循环就是对数组的元素进行循环. 语法: for (初始化变量; 条件表达式; 迭代语句) {      需要执行的代码块: } 初始化变量:一般用来对循环变量进行初始化赋值. 条件表达式:作为循环条件,一个包含比较运算符的表达式,用来限定循环变量的边限.如果循环变量的值超出了该边限,则停止该循环语句的执行. 迭代语句:用来改变循环变量的值,从而控制循环的次数,通常是对循环变量的值进行递增或者递减的操作. for循环执行顺序: // 1. 声明变量: // 2. 判断循环执行条件

  • JavaScript 数组遍历的五种方法

    在使用 JavaScript 编写代码过程中,可以使用多个方法对数组进行遍历:包括 for循环.forEach循环.map 循环.forIn循环和forOf循环等方法. 一.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 cons

  • JavaScript数组去重的五种方法

    javascript数组去重是一个比较常见的需求,解决方法也有很多种,网上都可以找到答案的,下面小编给大家整理了一份关于同类型的数组去重的方法,先给大家介绍下简单实现思路. 思路: 遍历数组,一一比较,比较到相同的就删除后面的 遍历数组,一一比较,比较到相同的,跳过前面重复的,不相同的放入新数组 任取一个数组元素放入新数组,遍历剩下的数组元素任取一个,与新数组的元素一一比较,如果有不同的,放入新数组. 遍历数组,取一个元素,作为对象的属性,判断属性是否存在 1. 删除后面重复的: functio

  • JavaScript数组去重的两种方法推荐

    1.数组去重: Array类型并没有提供去重复的方法,如果要把数组的重复元素干掉,那得自己想办法: 方法一:利用indexOf方法: var aa=[1,3,5,4,3,3,1,4] function arr(arr) { var result=[] for(var i=0; i<arr.length; i++){ if(result.indexOf(arr[i])==-1){ result.push(arr[i]) } } console.log(result) } arr(aa) 方法二:

  • JavaScript生成UUID的五种方法详解

    目录 简介 1.第一种 2.第二种 3.第三种 4.第四种 5.第五种 简介 UUID(Universally Unique IDentifier) 全局唯一标识符. UUID是一种由算法生成的二进制长度为128位的数字标识符.UUID的格式为“xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx”,其中的 x 是 0-9 或 a-f范围内的一个32位十六进制数.在理想情况下,任何计算机和计算机集群都不会生成两个相同的UUID. 1.第一种 function guid() {

  • Java中Map循环遍历的五种方法实现

    目录 1.创建一个Enum 2.开始遍历 方法一 方法二 方法三 方法四 方法五 因为Map比较常用,所以今天来总结下Map取值比较常用的几种遍历方法. 1.创建一个Enum public enum FactoryStatus {     BAD(0,"ou"),     GOOD(1,"yeah");     private int status;     private String description;     FactoryStatus(int stat

  • javascript数组定义的几种方法

    1.什么是数组 数组就是一组数据的集合 其表现形式就是内存中的一段连续的内存地址 数组名称其实就是连续内存地址的首地址 2.关于js中的数组特点 数组定义时无需指定数据类型 数组定义时可以无需指定数组长度 数组可以存储任何数据类型的数据(比如说一个元素保存整型,一个元素保存字符串型,这个在JS中是可以的) 创建数组的语法: var arr=[值1,值2,值3];                     //隐式创建 var arr=new Array(值1,值2,值3);      //直接实例

  • JavaScript数组去重的几种方法

    前言 有时候我们做项目的时候往往会需要把数组里面一些重复的项去掉,但是原生JS有排序,有筛选等等,但是就是没有数组去重怎么办呢? 这能怎么办,自己手动实现嘛. 数组不像对象和hash有唯一的标志特征(key).所以,数组去重的核心就是[1]数组内元素互相比较,然后放入新的数组中.[2]参照对象构建一个唯一的特征标志,然后放入新数组中.以下就是依照这种思路产生的方法.[3]数组中含对象的去重方式我采用使用JSON.stringify()将对象转换成JSON字符串进行比较的方式. 1.最基础的去重:

  • JavaScript数组去重的3种方法和代码实例

    数组去重的方法有很多,到底哪种是最理想的,自己不清楚.于是自己测试了下数组去重的效果和性能.测试十万个数据,代码和所耗大概时间如下. 到底采用哪种方法,根据实际情况而定吧. /*方法一: 1,'1' 会被认为是相同的; 所有hash对象,如:{x;1},{y:1}会被认为是相同的 //10ms */ Array.prototype.unique=function(){ var newArr=[],obj={}; for(var i=0,len=this.length;i<len;i++){ if

  • JavaScript数组去重的几种方法效率测试

    JavaScript数组去重的几种方法效率测试

    以下是我针对网上三种高效率方法总结与效率测试,如果大家有更好的意见或建议也可以提出,大家共勉学习. 数组去重法1: Array.prototype.unique1 = function(){ console.time("数组去重法1"); //记录开始执行的时间 var arr = []; //创建一个临时数组 var obj = {}; //创建一个空对象 for(var i = 0; i < this.length; i++){ //遍历当前要去重的数组 if(!obj[th

  • Javascript数组去重的几种方法详解

    目录 数组去重 1 双层for循环(类似冒泡排序的双层循环写法) 2 循环和indexof.循环和includes 3 利用对象属性不能重复去重 4 ES6 Set 5 ES6 Array. prototype.filter() 6 ES6 Array. prototype.reduce() 总结 数组去重 1 双层for循环(类似冒泡排序的双层循环写法) var arr = [2,3,4,2,34,21,1,12,3,4,1] for(var i =0;i<arr.length;i++){ /

随机推荐