本文已参与「[掘力星计划],赢取创作大礼包,挑战创作激励金。
小知识,大挑战!本文正在参与“[程序员必备小知识]创作活动。
前言
Array应该是es6中最常用的类型了,它和其他语言中的数组一样也是一组有序的数据,但是不同的是,ECMAscript数组中数组的每个槽位可以储存任意类型的数据,意思就是说,我们可以在第一个槽位中储存字符串,第二个是数值,第三个是对象。而ECMAscript数组中最常使用的就是迭代方法,下面为大家详细介绍一下。
迭代方法
ECMAscript为数组定义了五个方法,每个数组接收两个参数,分别是以每一项为参数运行的函数以及可选的作为函数运行上下文的作用域对象(影响函数中this的值)。然后每一个方法的函数可以接收三个参数:数组元素、元素索引和数组本身。因具体方法而异,该函数的执行结果有的会影响方法的返回值。
-
every():对数组每一项都传入运行函数,若每一项都返回true,则这个方法为true。
-
filter():对数组每一项都传入运行函数,函数返回true的项会组成数组之后返回。
-
forEach():对数组每一项都传入运行函数,没有返回值。
-
map():对数组每一项都传入运行函数,返回由每次函数调用的结果构成的数组。
-
some():对数组每一项都传入运行函数,若有一项函数返回true,则这个方法返回true.
注意: 这些方法都不改变调用它们的数组。
方法的区别与细节
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的基础,我推荐由李松峰老师译javascript高级程序设计这本书,确实很棒。