es6中迭代数组的方法有哪些

这篇文章主要介绍了es6中迭代数组的方法有哪些的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇es6中迭代数组的方法有哪些文章都会有所收获，下面我们一起来看看吧。 迭代方法：1、map，用于根据某种规则映射数组，得到映射之后的新数组；2、filter，用于根据判断的条件，进行元素筛选；3、forEach，相当于使用for循环遍历数组；4、some，用于判断数组中是否有满足条件的元素；5、every，用于判断数组中是否所有元素都满足条件；6、findIndex，用于找元素下标；7、reduce，可遍历数组元素，为每一个元素执行一次回调函数。Array应该是es6中最常用的类型了，它和其他语言中的数组一样也是一组有序的数据，但是不同的是，ECMAscript数组中数组的每个槽位可以储存任意类型的数据，意思就是说，我们可以在第一个槽位中储存字符串，第二个是数值，第三个是对象。而ECMAscript数组中最常使用的就是迭代方法，下面为大家详细介绍一下。ES6数组的7种迭代方法1、map()方法对数组每一项都传入运行函数，返回由每次函数调用的结果构成的数组。作用: 根据某种规则映射数组，得到映射之后的新数组应用场景：(1)数组中所有的元素 * 0.8(2)将数组中的js对象，映射成 html字符串示例：

constarr=[10,20,30,40,50]
//完整写法
//letres=arr.map((item,index)=>{
//returnitem*0.8
//})
//熟练写法
letres=arr.map(item=>item*0.8)
console.log(res)
//返回处理后的新数组[8,16,24,32,40]

2、filter()方法对数组每一项都传入运行函数，函数返回true的项会组成数组之后返回。作用：根据判断的条件，进行筛选。应用场景：(1)筛选数组中的偶数(2)商品价格筛选示例：

//需求：筛选数组里的偶数
constarr=[10,20,33,44,55]
//letres=arr.filter(item=>{
//if(item%2==0){
//returntrue
//}else{
//returnfalse
//}
//})
//console.log(res)
letres1=arr.filter(item=>item%2==0)
console.log(res1)//[10,20,44]

3、forEach()方法对数组每一项都传入运行函数，没有返回值。作用：相当于 for循环另一种写法应用场景：遍历数组示例：

//类似for循环遍历
constarr=[13,22,10,55,60]
arr.forEach((item,index)=>{
console.log(item,index)
//item->数组里每一个元素
//index->对应的下标
})

4、some()方法对数组每一项都传入运行函数，若有一项函数返回true，则这个方法返回true。作用：判断数组中是否有满足条件的元素 (逻辑或 ||, 有任意一个满足即可)应用场景：(1)判断数组中有没有奇数(2)非空判断 : 判断表单数组中，有没有元素value为空示例：判断是否有奇数

//判断是否有奇数
constarr=[10,20,30,40,50]
//letres=arr.some(item=>{
//if(item%2==1){
//returntrue
//}else{
//returnfalse
//}
//})
letres=arr.some(item=>item%2==1)
console.log(res)
//true:有满足条件的元素
//false:没有满足条件的元素

5、every()方法对数组每一项都传入运行函数，若每一项都返回true，则这个方法为true。作用：判断数组中是否 所有元素 都满足条件 (逻辑&&, 全部满足)应用场景：(1)判断数组中是否所有元素都是 偶数(2)开关思想 : 购物车是否全选示例：判断是否全是偶数

//判断是否全是偶数
constarr=[10,20,30,40,50]
//letres=arr.some(item=>{
//if(item%2==1){
//returntrue
//}else{
//returnfalse
//}
//})
letres=arr.every免费云主机、域名(item=>item%2==0)
console.log(res)
//true:所有满足都满足条件
//false:有元素不满足条件

6、findIndex()方法作用：找元素下标应用场景：(1)如果数组中是值类型，找元素下标用： arr.indexOf( 元素 )(2)如果数组中是引用类型，找元素下标： arr.findIndex( )示例：

/*
arr.findIndex()查询数组下标
如果找到目标元素，则返回改数组的下标
如果没找到，则返回固定值-1
*/
letarr=[
{name:'李四',age:20},
{name:'王五',age:20},
{name:'张三',age:20},
]

letindex=arr.findIndex(item=>item.name=='王五')
console.log(index)

7、reduce()方法作用：遍历数组元素，为每一个元素执行一次回调函数应用场景：数组求和/平均值/最大值/最小值示例：

constarr=[10,20,30,40,50]
letres=arr.reduce((sum,item,index)=>{
returnsum+item
//console.log(sum,item,index)
},0)

every()和some()这些方法中，every()和some()是最相似的，都是从数组中搜素符合某个条件的元素。对every()来说，传入的参数必须对每一项都返回true，它才会返回true。而对于some()来说，只要有一项让传入的函数返回true，它就返回true，下面举个例子：

letnumbers=[2,1,4,3,5,4,3];

leteveryResult=numbers.every((item,index,array)=>item>2);
console.log(everyResult);//false

letsomeResult=numbers.some((item,index,array)=>item>2);
console.log(someResult);//true

filter()方法这个方法基于给定的函数来决定每一项是否应该包含在它返回的数组中。例如：

letnumbers=[2,1,4,3,5,4,3];
letfilterResult=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，并返回包含所有结果的数组，如下：

letnumbers=[2,1,4,3];
letmapResult=numbers.map((item,index,array)=>item*2);
console.log(mapResult);//4,2,8,6

这个方法返回的数组包含了原始数组中每给数值乘以2的结果。这个方法很适应于创建一个与原数组一一对应的新数组。forEach()最后看一看forEach这个方法，这个方法只会对每一项运行传入的函数，没有返回值。其实，本质上，forEach()方法相当于使用for循环遍历数组。例如：

letnumbers=[2,1,4,3];
numbers.forEach((item,index,array)=>{
console.log(item)
});//2,1,4,3

关于“es6中迭代数组的方法有哪些”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“es6中迭代数组的方法有哪些”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注云技术行业资讯频道。

相关推荐: vue中父组件和子组件怎么通讯

这篇文章主要介绍“vue中父组件和子组件怎么通讯”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“vue中父组件和子组件怎么通讯”文章能帮助大家解决问题。 一、单向数据流在 Vue.js 中，父组件向子组件传递数据一般采用…