javascript箭头函数和this的指向问题

箭头函数

下面两代码等价:

const fun1 = function(x){return x*x;}const fun = x => x*x;

function换成=>，放在参数和函数体中间

注意：如果没有参数，或有多个参数，需要使用（）来定义参数列表
如果有一个参数，可以不()
如果函数体中只有一条语句，可以不用{}

排序：

let arr = [1,5,2,34,22];
let narr = arr.sort(function(a,b){ return a-b;});
console.log(narr);

也可以换成:

let narr = arr.sort((a,b)=>a - b);
//省略了{}

运行：

1.如果箭头函数返回对象时，一定要在对象外边加上小括号

<script>const fun = id =>({id:id,namee:'Hang三'});console.log(fun(10))</script>

运行结果:

this的指向

普通函数的this:指向它的调用者，如果没有调用者则默认指向window.
箭头函数的this:指向箭头函数定义时所处的对象，而不是箭头函数使用时所在的对象，默认使用父级的this
综上，箭头函数没有自己的this，它的this是继承而来，默认指向在定义它时所处的对象
代码块多于一条语句，就用大括号括起来，并且用return返回
箭头函数能够简化回调函数

点击块的背景颜色后变色，用普通函数实现：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style>#box{width: 100px;height: 50px;background: red;}#box.bgcolor{background:teal;}</style>
</head>
<body>
<div id = "box"></div>
</body>
<script>const box = document.getElementById('box');box.onclick = function(){this.className = 'bgcolor';}
</script></html>

效果:

点击红色的之后:

用箭头函数：（加延迟函数setTimeOut)

    const box = document.getElementById('box');
box.onclick = function () {setTimeout(() => {console.log(this);this.className = 'bgcolor';}, 3000);
}

由这个箭头函数的this的用法也可以知道箭头函数中的this并不是谁调用这个方法就代表哪个对象，而是在它所声明的位置的父级对象

goods = [11,2,43,21,4];
let good1 = good.filter(function(n) {return n >=10 ;})
let good2 = good1.map(function(n) {return n*0.5;})
let sum = good2.reduce(function(s,n){return s+n;},0);

上面的函数转化成钩子函数写可以简化为:

goods = [11,2,43,21,4];
let sum = goods.filter(n =>n >= 10).map(n => n*0.5).reduce((s,n)=>s+n);

map filter reduce方法

其中:
map()方法定义在JavaScript的Array中，它返回一个新的数组，数组中的元素为原始数组调用函数处理后的值。

1.map方法
注意：

map()不会对空数组进行检测

map()不会改变原始数组

语法:
array.map(function(currentValue, index, arr), thisIndex)
参数说明：

function(currentValue, index, arr)：必须。为一个函数，数组中的每个元素都会执行这个函数。其中函数参数：

currentValue：必须。当前元素的的值。

index：可选。当前元素的索引。

arr：可选。当前元素属于的数组对象。

thisValue：可选。对象作为该执行回调时使用，传递给函数，用作"this"的值。

2.reduce方法:
reduce() 方法
实例
计算数组元素相加后的总和：

var numbers = [65, 44, 12, 4];function getSum(total, num) {return total + num;
}
function myFunction(item) {document.getElementById("demo").innerHTML = numbers.reduce(getSum);
}

输出结果：

125
reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

reduce() 可以作为一个高阶函数，用于函数的 compose。

注意: reduce() 对于空数组是不会执行回调函数的。

语法：
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
function(total,currentValue, index,arr) 必需。用于执行每个数组元素的函数。
initialValue 可选。传递给函数的初始值
3.JavaScript Array filter() 方法

返回数组 ages 中所有元素都大于 18 的元素:

var ages = [32, 33, 16, 40];function checkAdult(age) {return age >= 18;
}function myFunction() {document.getElementById("demo").innerHTML = ages.filter(checkAdult);
}

输出结果为:

32,33,40

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

注意： filter() 不会对空数组进行检测。

注意： filter() 不会改变原始数组。
语法
array.filter(function(currentValue,index,arr), thisValue)
function(currentValue, index,arr) 必须。函数，数组中的每个元素都会执行这个函数
thisValue 可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。
如果省略了 thisValue ，“this” 的值为 “undefined”