建站
咨询
售后
建站咨询
这篇文章主要介绍了es6中迭代数组的方法有哪些的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇es6中迭代数组的方法有哪些文章都会有所收获，下面我们一起来看看吧。
专注于为中小企业提供网站建设、网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业垣曲免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了近1000家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。
迭代方法：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字符串
示例：
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
关于“es6中迭代数组的方法有哪些”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“es6中迭代数组的方法有哪些”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注创新互联行业资讯频道。
当前文章：es6中迭代数组的方法有哪些
文章转载：http://lswzjz.com/article/jejpig.html
