站长资讯网
迭代方法：1、map，用于根据某种规则映射数组，得到映射之后的新数组；2、filter，用于根据判断的条件，进行元素筛选；3、forEach，相当于使用for循环遍历数组；4、some，用于判断数组中是否有满足条件的元素；5、every，用于判断数组中是否所有元素都满足条件；6、findIndex，用于找元素下标；7、reduce，可遍历数组元素，为每一个元素执行一次回调函数。
前端（vue）入门到精通课程：进入学习
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具：点击使用
本教程操作环境：windows7系统、ECMAScript 6版、Dell G3电脑。
Array应该是es6中最常用的类型了，它和其他语言中的数组一样也是一组有序的数据，但是不同的是，ECMAscript数组中数组的每个槽位可以储存任意类型的数据，意思就是说，我们可以在第一个槽位中储存字符串，第二个是数值，第三个是对象。而ECMAscript数组中最常使用的就是迭代方法，下面为大家详细介绍一下。
ES6数组的7种迭代方法
1、map()方法
对数组每一项都传入运行函数，返回由每次函数调用的结果构成的数组。
作用: 根据某种规则映射数组，得到映射之后的新数组
应用场景：
-
(1)数组中所有的元素 * 0.8
-
(2)将数组中的js对象，映射成 html字符串
示例：
const arr = [10,20,30,40,50] // 完整写法 // let res = arr.map((item,index)=>{ // return item * 0.8 // }) // 熟练写法 let res = arr.map(item=>item*0.8) console.log(res) // 返回处理后的新数组 [8, 16, 24, 32, 40]
2、filter()方法
对数组每一项都传入运行函数，函数返回true的项会组成数组之后返回。
作用：根据判断的条件，进行筛选。
应用场景：
-
(1)筛选数组中的偶数
-
(2)商品价格筛选
示例：
//需求： 筛选数组里的偶数 const arr = [10,20,33,44,55] // let res = arr.filter(item=>{ // if(item % 2 == 0){ // return true // } else{ // return false // } // }) // console.log(res) let res1 = arr.filter(item => item % 2==0) console.log(res1) // [10, 20, 44]
3、forEach()方法
对数组每一项都传入运行函数，没有返回值。
作用：相当于 for循环另一种写法
应用场景：遍历数组
示例：
// 类似for循环遍历 const arr = [13,22,10,55,60] arr.forEach((item,index)=>{ console.log(item,index) // item->数组里每一个元素 // index->对应的下标 })
4、some()方法
对数组每一项都传入运行函数，若有一项函数返回true，则这个方法返回true。
作用：判断数组中是否有满足条件的元素 (逻辑或 ||, 有任意一个满足即可)
应用场景：
-
(1)判断数组中有没有奇数
-
(2)非空判断 : 判断表单数组中，有没有元素value为空
示例：判断是否有奇数
// 判断是否有奇数 const arr = [10,20,30,40,50] // let res = arr.some(item=>{ // if(item % 2 == 1){ // return true // } else{ // return false // } // }) let res = arr.some(item =>item % 2 == 1) console.log(res) // true: 有满足条件的元素 // false: 没有满足条件的元素
5、every()方法
对数组每一项都传入运行函数，若每一项都返回true，则这个方法为true。
作用：判断数组中是否 所有元素 都满足条件 (逻辑&&, 全部满足)
应用场景：
-
(1)判断数组中是否所有元素都是 偶数
-
(2)开关思想 : 购物车是否全选
示例：判断是否全是偶数
// 判断是否全是偶数 const arr = [10,20,30,40,50] // let res = arr.some(item=>{ // if(item % 2 == 1){ // return true // } else{ // return false // } // }) let res = arr.every(item =>item % 2 == 0) console.log(res) // true: 所有满足都满足条件 // false: 有元素不满足条件
6、findIndex()方法
作用：找元素下标
应用场景：
-
(1)如果数组中是值类型，找元素下标用： arr.indexOf( 元素 )
-
(2)如果数组中是引用类型，找元素下标： arr.findIndex( )
示例：
/* arr.findIndex()查询数组下标 如果找到目标元素，则返回改数组的下标 如果没找到，则返回固定值-1 */ let arr = [ {name:'李四',age:20}, {name:'王五',age:20}, {name:'张三',age:20}, ] let index = arr.findIndex(item=>item.name == '王五') console.log(index)
7、reduce()方法
作用：遍历数组元素，为每一个元素执行一次回调函数
应用场景：数组求和/平均值/最大值/最小值
示例：
const arr = [10,20,30,40,50] let res = arr.reduce((sum,item,index)=>{ return sum + item // console.log(sum,item,index) },0)
方法的区别与细节
every()和some()
这些方法中，every()和some()是最相似的，都是从数组中搜素符合某个条件的元素。对every()来说，传入的参数必须对每一项都返回true，它才会返回true。而对于some()来说，只要有一项让传入的函数返回true，它就返回true，下面举个例子：
let numbers = [2,1,4,3,5,4,3]; let everyResult = numbers.every((item,index,array) => item >2); console.log(everyResult); // false let someResult = numbers.some((item,index,array) => item >2); console.log(someResult); // true
filter()方法
这个方法基于给定的函数来决定每一项是否应该包含在它返回的数组中。例如：
let numbers = [2,1,4,3,5,4,3]; let filterResult = numbers.filter((item,index,array) => item >2); console.log(filterResult); // 4,3,5,4,3
这里filter返回的数组包含了4,3,5,4,3，因为只有对这些项传入的函数才返回 true，这个方法非常适合从数组中筛选满足给定条件的元素，也是非常常用的迭代方法。
map()
map()方法也是返回一个数组。这个数组的每一项都是对原始数组中同样位置的元素运行传入函数而返回的结果，例如，可以将数组中的每一项都乘以2，并返回包含所有结果的数组，如下：
let numbers = [2,1,4,3]; let mapResult = numbers.map((item,index,array) => item *2); console.log(mapResult); // 4,2,8,6
这个方法返回的数组包含了原始数组中每给数值乘以2的结果。这个方法很适应于创建一个与原数组一一对应的新数组。
forEach()
最后看一看forEach这个方法，这个方法只会对每一项运行传入的函数，没有返回值。其实，本质上，forEach()方法相当于使用for循环遍历数组。例如：
let numbers = [2,1,4,3]; numbers.forEach((item,index,array) => { console.log(item) }); // 2,1,4,3
【
