箭头函数
// plus 是函数调用时的函数名
// a是参数,多个参数可以(a,b,c)
// =>后是函数体,如果只有一条语句,这条语句会被当成返回值;如果有多条语句,可以写在{ }中,返回值需要用return设置。
const plus = a => a + 1;
//打印出为3
console.log(plus(2));
用箭头函数写回调函数
const arr = [1, 2, 3, 4, 5,
6, 7];
// 1. 普通写法
// filter(),创建一个数组,包含通过所提供函数测试的所有元素
// filter()的参数为回调函数
const arr1 = arr.filter(function (item) {
//返回值为false表示不收到
数组中,true收入数组中
return item % 2;
});
//打印结果 [1, 3, 5, 7]
console.log(arr1);
// 2. 箭头函数写法
const arr1 = arr.filter(item => item % 2);
console.log(arr1);
箭头函数与 this
- 箭头函数内部没有this
普通函数
const person = {
name: "zs",
sayHi: function(){
//this 指代方法的调用者
console.log(`my name is ${this.name}`);
}
};
//调用结果为my name is zs
person.sayHi();
箭头函数
const person = {
name: "zs",
sayHi: () => {
console.log(`my name is ${this.name}`);
}
};
//调用结果为 my name is ,因为箭头函数内部没有this,
person.sayHi();
- 某些情况下没有this的箭头函数会更适合
const person = {
name: "zs",
sayHi: function(){
// const _this = this;
// 解决方法是用一个变量_this替代this,然后将下面延时器里的this改为_this。
setTimeout(function(){
//setTimeout里面的函数this 指代的是window
console.log(`my name is ${this.name}`);
},1000);
}
};
//调用结果是报错
person.sayHi();
const person = {
name: "zs",
sayHi: function(){
setTimeout(() => {
//箭头函数没有this,所以运行时会向外寻找
// 外层函数的this就是调用者的this
console.log(`my name is ${this.name}`);
}, 1000);
}
};
// 调用结果为 my name is zs
person.sayHi();