ES6学习笔记之数组方法和纯函数_数组纯函数-优快云博客

本文链接：https://blog.youkuaiyun.com/wjswangjinsheng/article/details/104714248

一、ES6得新增数组方法

ES6中对数组新增了四大“金刚”函数：forEach()、map()、filter()、reduce()，都是一些语法糖。forEach()是es5语法

1 forEach()遍历数组
forEach()方法用来循环遍历数组，方法中的function回调函数接收3个参数
第1个是遍历的数组内容(item)；第2个是对应的数组索引(index)，第3个是数组本身(array)。

var arr = ["白板","幺鸡","红中","发财","三饼"];
arr.forEach(function(item,index,array){
    console.log(item,index,array)
});
注意：forEach()没有return返回值。

2 map()映射
map方法的作用不难理解，“映射”也就是原数组被“映射”成对应的新数组。

var arr = [10,20,30,40,50,99];
var newArr = arr.map(function(item,index,array){
    return item * 2; //返回一个新的结果，给变量接收，原数组不变
});

在这里插入图片描述
map函数的本质是依次遍历原数组的每一项，将每一项都执行一遍函数中的语句，返回一个新的数组。
注意：

函数需要有return值，如果没有，数组所有项都被映射成undefined。
map返回的数组一定和原数组的长度一样。
在实际使用时，可以利用map()方便获取对象数组中的特定属性值们

3 filter()过滤
filter为“过滤、筛选”之意，指原数组中filter某些项后，返回过滤后的新数组，用法和map相似。
比如想从原数组中，挑选所有的偶数，返回新的数组。

var arr = [312,55,77,11,13,15,18,26,30,40,50,99];
var newArr = arr.filter(function(item,index,array){
    return item % 2 == 0;
});
console.log(arr)
console.log(newArr)

在这里插入图片描述
描述：

arr中的每一项会依次的执行函数，filter的callback函数需要返回布尔值true或false。true则将值放到新数组中，false无情地将你抛弃…
filter和map相同点：都会遍历数组的每一项 filter和map
不同点：map返回数组不会少项，filter可能少项。

4 reduce()迭代

arr.reduce(callback[,initialValue])

第一个参数的callback回调函数有四个参数，第二个为设定的初始值（可选）。
callback函数有四个参数：
previous ：上一次叠加的结果值或初始值
current ：当前会参与叠加的项
index ：当前值的下标
array ：原数组本身

求数组的最大值【经典面试】：
var arr = [43,5,4,6,4567,78,8,69,568];
// var max = Math.max.apply(null,arr);
// console.log(max)
 
var max = arr.reduce(function(prev,cur){
    console.log(prev) //43、43、43、43、4567、4567、4567...
    return prev > cur ? prev : cur;
});
console.log(max); //4567

在这里插入图片描述
reduce的机理：从下标1的项开始遍历，每次return的值将作为遍历的下一项的prev的值，这一次的遍历是cur，prev有种累加的感觉。
reduce可以设置初始参数（参数自定义），当reduce有第二个参数时，此时reduce遍历将从第0项开始遍历，而不是第1项开始。

二.数组用途-写纯函数

什么是纯函数？
纯函数是指不依赖于且不改变它作用域之外的变量状态的函数。

这个函数内部不改变传入的参数。
传入这个函数一定有参数，一定会返回某一个确定的值。
函数中的语句，不能有随机性，比如Math.random()、new Date()，传入的参数相同，返回的值必定相同；
这个函数里面不能有任何异步语句，比如$.get()、fs.readFile()、setInterval()

【例子1】请写一个纯函数addItem()，接收arr、n当做参数，能够将arr的尾部增加n。

var arr = [99,77,66];
function addItem(arr,n){
    return [...arr,n];
}
var arr2 = addItem(arr,88); //返回一个新数组
console.log(arr); //原数组不变
console.log(arr2);

在这里插入图片描述

【例子4】请写一个纯函数changeItem，接受arr、n、a当做参数，能够将arr第下标为n的那项改变值为a。
var arr = ["白板","幺鸡","二条","三万"];
function changeItem(arr,n,a){
    return arr.map((item,index)=> index == n ? a : item )
}
var arr2 = changeItem(arr,2,"九条");
console.log(arr);
console.log(arr2);

在这里插入图片描述
纯函数的条件：

一个函数的返回结果只依赖于它的参数
不依赖外部状态
执行过程中没有副作用

什么叫函数执行过程没有副作用？
一个函数执行过程中对外部产生了编号，那么就说这个函数是有副作用的。

l 总结
为什么要煞费苦心地构建纯函数？因为纯函数非常“靠谱”，执行一个纯函数你不用担心它会干什么坏事，它不会产生不可预料的行为，也不会对外部产生影响。不管何时何地，你给它什么它就会乖乖地吐出什么。如果你的应用程序大多数函数都是由纯函数组成，那么你的程序测试、调试起来会非常方便。
l 使用纯函数的好处
最主要的好处是没有副作用。纯函数不会修改作用域之外的状态，做到这一点，代码就变得足够简单和清晰：当你调用一个纯函数，你只要关注它的返回值，而不用担心因为别处的问题导致错误。

纯函数是健壮的，改变执行次序不会对系统造成影响，因此纯函数的操作可以并行执行。
纯函数非常容易进行单元测试，因为不需要考虑上下文环境，只需要考虑输入和输出。
在这里插入图片描述
函数是接受一些输入，并产生一些输出的过程。这些输入称为参数，输出称为返回值。
纯函数的返回值只由它调用时的参数决定，它的执行不依赖于系统的状态（比如：何时、何处调用它）。