箭头函数
箭头函数
箭头函数的使用
1. 可以把普通函数 改成箭头函数
//匿名函数 赋值式
//ES5
var fn1 = function(){
console.log('fn1');
};
fn1();
//ES6
var fn1 = ()=>{console.log('fn1')};
fn1();
//命名函数 声明式
function fn2(){
console.log('fn2');
};
fn2();
2. 箭头函数传参
//多个参数情况
//ES5
var fn = function(a,b){
console.log('a,b');
};
fn(a,b);
//ES6
var fn = (a,b)=>{console.log(a,b)};
fn(a,b);
//一个参数的情况 可以省略括号
//ES5
var fun = function(a){
console.log('a');
};
func();
//ES6
var func = a=>{console.log(a);};
func(1);
3. 改造有返还值的函数
//ES5
var fn = function(a,b){
return a+b;
};
fn(a,b);
//ES6
//方式一 箭头自带return,隐式返还
var fn = (a,b)=>(a+b);
console.log(fn(a,b));
//方式二
var fn = (a,b)=>{
return a+b;
};
console.log(fn(a,b));
4. 避免大括号歧义
//大括号歧义
var fn = ()=>{name:'张三',age:14}; //本意是返回一个对象,箭头函数把{}识别成函数的{}
//解决方式一
var fn = ()=>{
{name:'张三',age:14};
};
fn();
//解决方式二
var fn = ()=>({name:'张三',age:14};);
fn();
箭头函数注意点
1. 箭头函数里的this
箭头函数内没有 this。它的this是上层作用域的this
// this的穿透
let btn = document.querySelector("button");
btn.onclick = ()=>{
var arr = [1,2];
arr.forEach(item=>{
setTimeout(()=>{
console.log(this);
}, 1000);
})
}
输出:
window
window //箭头函数内没有this,一直找上层作用域里的this,直到window
let btn = document.querySelector("button");
btn.onclick = function(){
var arr = [1,2];
arr.forEach(item=>{
setTimeout(()=>{
console.log(this);
}, 1000);
})
}
输出:
<button>点击</button/>
<button>点击</button/> //btn获取的元素
2. 事件函数使用 箭头函数如何获取事件源
<button>点击</button/>
<script>
//ES5
let btn = document.querySelector('button');
btn.oncllick = function(event){
event.target.style.background = 'red';
};
//ES6
btn.addEventListener('click',event=>{
event.target.style.background = 'red';
})
</script>
3. 箭头函数没有隐藏参数arguments
var fn = ()=>{
console.log(arguments);
};
fn(1,2,3,4);
输出:
arguments is not defined
解决箭头函数处理不定参数arguments
var fn = (...arr)=>{ //展开运算符...
console.log(arr);
};
fn(1,2,3,4);
4. 箭头函数不能作为构造函数
var Fn = ()=>{
this.name = "张三";
};
var myfn = new Fn(); // 不行
箭头函数练习
要求: 把数组按照年龄进行排序==》获取二十多岁以上的对象,再让他们实现降序排序;
var arr = [
{
name:'张三1',
age:44,
height:123
},
{
name:'张三2',
age:19,
height:123
},
{
name:'张三3',
age:32,
height:123
},
{
name:'张三4',
age:16,
height:123
},
{
name:'张三5',
age:11,
height:123
},
];
//ES5
var a = arr.filter(function(item,index){
return item.age>=20;
});
var b = a.sort(function(next,prve){
next.age - prve.age;
});
console.log(b);
//ES6
var a = arr.filter(item=>item.age>=20).sort((next,prve)=>(next.age - prve.age));
console.log(a);