今天要总结的内容是ES5中数组的新增方法,有forEach、map、filter、find、every、some、reduce,今天只总结使用,不研究原理,相关原理请百度。因为在下面例子中多次使用了箭头函数,如果对箭头函数不了解需要先了解箭头函数。
一、forEach
题目:遍历打印数组中的值
由图中可得出,forEach的功能和es5 for循环是一样的,forEach的参数必须是函数,否则报错,迭代函数的参数分别为:数组的值 colors[n],数组的下标 n,数组 colors,用 forEach 打印 colors 结果如下图
上面提到 forEach 的参数是个函数,所以 forEach 的参数是可以抽离出来一个函数表达式或者声明一个函数,因此上面代码还可以写成下面的方式
缺点:普通的 for循环,当你循环至一定条件可使用 break 跳出循环,但 forEach 不能,forEach 是要一直循环到数组最后一个值,在 forEach 里使用 break、continue 会报错,使用return;默认返回 undefined。
使用场景:当你想使用for循环来遍历执行某些事情时可使用 forEach
二、map
场景一:将数组 a 的每个值乘于2赋值给数组 b
场景一总结:array.map 的参数也是个函数,函数的参数值和 forEach 的一样,并且 array.map 的值是一个全新的数组,且这个数组并不是使用了原来的位置,不管map有没有改变数组的值,map之后的数组和原来数组的内存位置是两个不同的内存(下面详解)。
上图可看出,temp4 改变第0位时,numbers 的0位也改变了,因此可看出 temp4 只是浅拷贝了numbers2,和numbers2共用了一个内存位置,而 temp5 在 在改变了0位时,numbers2 并没有跟着改变,因此可看出 temp5 和 numbers5 的内存位置是不同的,因此可看出 map 是深拷贝(涉及深拷贝和浅拷贝,不懂可点击 浅拷贝深拷贝之理解 个人笔记 )
使用场景:当你想改变数组的某个值,但又想保存原数组,可使用map重新定义一个数组(数组的值可变或不变)
三、filter
场景:从动物对象中筛选出老鼠类型的对象
图中可看出,filter是筛选出所有type为老鼠的值,返回值也是一个数组,参数也是个函数,函数的参数值和 forEach 的一样。
使用场景:筛选某些值,或者抽离某些条件的值。
四、find
场景:获取animals中的名字为Tom的动物
从上图结果可看出,find是指返回一个值,并且是第一个值,在循环查找到第一个值时就跳出循环。如果find的值不在数组中,循环结束将返回结果值是undefined。
使用场景:筛选某些值,或者抽离某些条件的值。
五、every 和 some
every和some的返回都是Boolean值,every是一假为假,some是一真为真。every循环时,一旦查找到false将跳出循环,而some则是一旦查找到true则跳出循环。
题目:查找数组a中type值存在于数组b中type值的对象(filter+some)
六、reduce
reduce的第一个参数是函数,函数的参数分别为 a,b,c,d,第二个参数是 a 的初始值,如果没有第二个参数,a默认为0。reduce可替代forEach,map。
场景:累加数组的值
总结,forEach 、map 、filter 返回值是一个数组,find 的返回值是数组中的一个值(对象或者基本类型)或 undefined ,every 和 some 的返回值 true 或 false , reduce 的 返回值可以是数组,对象 或者 基本类型;而所有的方法的迭代函数中的参数都有数组的当前值,数组的当前下标及数组,reduce除了这三个参数,比其他数组还多一个参数;
学习资源:
视频:米斯特吴的ES6_Javascript_最全最新讲解 https://ke.qq.com/course/269571
书籍:阮一峰的ECMAScript 6 入门 http://es6.ruanyifeng.com/
网友评论