文章目录

一、普通的for循环
二、forEach()遍历
三、map()遍历
四、filter()遍历
五、some()方法
六、every()方法
七、reduce()方法
八、find() 与 findIndex()（ES6新增）
九、for...in...循环
十、for...of...循环（ES6新增）
- 1.keys()方法
- 2.values()方法
- 3.entries()方法

一、普通的for循环

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

这与C语言，C++，JAVA很像，就是普通的数组for循环遍历。

二、forEach()遍历

特点：没有返回值，只是针对每个元素调用function。
forEach()方法接受一个函数作为参数，一般用箭头函数。

let arr = ['a', 'b', 'c', 'd', 'e'];
arr.forEach((element, index, self) => {console.log(element, index, self);
})

可以看出这个箭头函数可接受三个参数，这三个参数分别表示：
element：遍历数组的当前元素。
index：当前元素的索引。
self：被遍历的数组。

let arr = ['a', 'b', 'c', 'd', 'e'];
let arr1 = arr.forEach((element, index, self) => {//console.log(element, index, self);
})
console.log(arr1);

这段代码可以说明forEach是没有返回值的。

三、map()遍历

特点：返回新的Array，Array中每个元素为调用function的结果。

let arr = ['a', 'b', 'c', 'd', 'e'];
let arr1 = arr.map((element, index, self) => {console.log(element, index, self);return element + 'gg';
})
console.log(arr1);

可以看出，map()方法里面也接受一个函数作为参数，这个函数也有三个参数，这三个参数表示的也和forEach()方法相同。
但是，map方法会有返回值，它会将每一步的返回值作为一个元素，最终返回一个拥有这些元素的数组。

四、filter()遍历

特点：返回符合function条件的元素数组（起到过滤作用）。

     let arr = [{name: 'zs',age: 12}, {name: 'lisi',age: 19}, {name: 'xiaoming',age: 22}, {name: 'xiaogang',age: 34}, {name: 'xiaohong',age: 25}]let arr1 = arr.filter((element, index, self) => {console.log(element, index, self);return element.age > 30})console.log(arr1);

可以看出，filter方法的参数和forEach，map完全一样。
而且filter和map都是有返回值的，
但是filter是返回满足条件的，起到一个过滤的作用。
像这里，就是返回了年龄大于30的对象。

五、some()方法

特点：返回boolean，判断是否有元素是否符合function条件

        let arr = [{name: 'zs',age: 12}, {name: 'lisi',age: 19}, {name: 'xiaoming',age: 22}, {name: 'xiaogang',age: 34}, {name: 'xiaohong',age: 25}]let res = arr.some((element, index) => {return element.age > 30})console.log(res);//true

some方法是只要数组元素中有满足return条件的就返回true，否则返回false。
这里因为有年龄大于30的，所以这里输出res为true。

六、every()方法

特点：返回boolean，判断每个元素是否符合function条件

        let arr = [{name: 'zs',age: 12}, {name: 'lisi',age: 19}, {name: 'xiaoming',age: 22}, {name: 'xiaogang',age: 34}, {name: 'xiaohong',age: 25}]let res = arr.every((element, index) => {return element.age > 30})console.log(res);//false

必须每个元素都满足条件才返回true，否则返回false。
因为这里不是每个对象的age都大于30，所以返回false。

七、reduce()方法

        let arr = [1, 5, 6, 23, 4];let num = arr.reduce((pre, now, index, self) => {console.log(pre, now);return pre + now;}, 2)console.log(num);

reduce方法可接受两个参数，第一个参数为函数，一般用箭头函数,第二个参数为箭头函数第一个参数的初值，即这里pre的初值。
箭头函数里面的后三个参数和forEach一样，
第一个参数为处在上一个元素时的函数返回值，即之间计算的累计。
所以当now=1时 pre为初值2
当now=5时，pre为2+1 = 3。
以此类推，上述代码输出结果为：

八、find() 与 findIndex()（ES6新增）

find()：返回第一个满足条件的元素。
findIndex()：返回的值为满足条件的第一个元素的索引。

        let arr = [1, 2, 5, 7, 8, 7];let str1 = arr.find(element => {return element > 5;})console.log(str1);//7let str2 = arr.findIndex(element => {return element > 5;})console.log(str2);//3

这里第一个大于5的元素是7，它的索引是3。

九、for…in…循环

for…in…循环可遍历数组，对象，Set，Map等所有可迭代数据类型。

let arr = [1, 2, 3, 4, 5];
let obj = {name: 'zs',age: 18,sex: 'male'
}
for(let key in arr){console.log(key);
}
for(let key in obj){console.log(key);
}

可以看出，对于数组来说，这里的key是索引，
对于对象来说，这里的key是键值。

十、for…of…循环（ES6新增）

let arr = [1, 2, 3, 4, 5];
for(let val of arr){console.log(val);
}

这里输出：

for…of…遍历数组参数是数组的值。

我们可以在of后边的数组上加一些方法来控制我们of前面的变量的值。

1.keys()方法

let arr = [1, 2, 3, 4, 5];
for(let key of arr.keys()){console.log(key);
}

加keys()方法获得索引。

2.values()方法

let arr = [1, 2, 3, 4, 5];
for(let val of arr.values()){console.log(val);
}

加values方法获取元素值（额…和没加没什么区别）。

3.entries()方法

let arr = [1, 2, 3, 4, 5];
for(let [val, index] of arr.entries()){console.log(val, index);
}

加entries方法既可获得索引，也可获得元素值，但要注意参数的先后顺序。

另注：for…of…循环不可用为对象的循环。

        let obj = {name: 'zs',age: 18,sex: 'male'}for (let val of obj) {console.log(val);}

js数组遍历相关方法相关推荐

JS数组遍历的几种方式
JS数组遍历的几种方式 JS数组遍历,基本就是for,forin,foreach,forof,map等等一些方法,以下介绍几种本文分析用到的数组遍历方式以及进行性能分析对比第一种:普通for循环代 ...
js数组遍历和对象遍历
针对js各种遍历作一个总结分析,从类型用处:分数组遍历和对象遍历:还有性能,优缺点等. JS数组遍历: 1,普通for循环,经常用的数组遍历 var arr = [1,2,0,3,9];for ( v ...
转→js数组遍历千万不要使用for...in...
看到一篇内容还不错,但是排版实在糟糕, 逼死强迫症患者啊,直接拉下去找原文连接,找到了,但是已经消失了···500错误... 第一次因为实在看不下去一篇博客的排版, 为了排版而转载... 转载地址:h ...
JS遍历(循环)——JS对象遍历(循环)JS数组遍历(循环)
最近在处理一些偏逻辑的代码块经常遇到遍历问题,接下来跟大家一起温习一下有关于JS的遍历吧. js数组遍历 1.for循环 //不缓存 var arr = [5,2,0,1,3,1,4]; for ( ...
html遍历数组,JS数组遍历的几种方式
JS数组遍历,基本就是for,forin,foreach,forof,map等等一些方法,以下介绍几种本文分析用到的数组遍历方式以及进行性能分析对比第一种:普通for循环代码如下: for(j = ...
js 数组遍历符合条件跳出循环体_Javascript数组循环遍历之forEach详解
1.js 数组循环遍历. 数组循环变量,最先想到的就是 for(var i=0;i除此之外,也可以使用较简便的forEach 方式 2.forEach函数. Firefox 和Chrome 的Arra ...
html js 遍历数组,分享几种原生JS数组遍历的方法和应用
数组遍历,对于前后端开发人员,是必须掌握的方法,那么数组遍历有哪些方法呢? OK,今天就分享几种原生JS方法,从原生开始学习,有助于大家应用到各种框架[小程序.三大框架等]中去,毕竟原生才是基本.一共 ...
js 数组遍历方法详解（map、filter、find、findIndex、reduce）
目录前言 map map是什么 map方法的结构及入参语法糖 map一般不改变原数组 filter 说明例子 find 和 findIndex 说明例子 reduce 说明例子尾言前言 ...
js数组遍历、对象遍历、字符串遍历
2019独角兽企业重金招聘Python工程师标准>>> 数组遍历 for --使用变量将数组长度缓存起来,在数组较长时性能优化效果明显 for(var i=0,len=arr.len ...

js数组遍历相关方法