箭头函数
下面两代码等价:
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”