ES6箭头函数

箭头函数

箭头函数的使用

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);