ES6新增的箭头函数

箭头函数:是一种函数的语法,符合函数的概念

特点如下:
1. 简单方便:()=>{}
2. 不允许直接存在,必须作为值存在
var fn = ()=>{
	console.log("hello");
}
fn();							//hello
3. 箭头函数内部没有自己的this,使用的是外层函数的this
var obj = {
	fn1:function(){
		console.log(this);
	},
	fn2:()=>{
		console.log(this);
	}
}
obj.fn1();						//obj
obj.fn2();						//window
4. 箭头函数内部没有自带的arguments

例1:普通函数

var fn = function(){
	console.log(arguments);
}
fn2();							//Arguments[]
fn2(1,2,3);						//Arguments[1,2,3]

例2:箭头函数

var fn = ()=>{
	console.log(arguments);	
}
fn();							//报错:arguments is not defined	参数为定义
5. 当只有一个形参时,小括号可以省略
var fn = a=>{
	console.log(a);
}
fn("hello");					//hello
6. 在简单语句中,若想返回函数的内容,可以省略花括号的同时省略return
var fn = a=>a;
console.log(fn("hello"));		//hello
使用场景:
1. 一般来说,箭头函数用在回调函数上,较为方便

例1:普通函数

var arr = [3, 6, 2, 1, 7, 8];
arr.sort(function(a,b){			//sort()为ES6新增的数组方法,功能是排序
	return a - b;
});
console.log(arr);				// [1, 2, 3, 6, 7, 8]

例2:箭头函数

var arr = [3, 6, 2, 1, 7, 8];
arr.sort((a,b) => a - b);
console.log(arr);				// [1, 2, 3, 6, 7, 8]
2. 事件监听式绑定事件,尽量不要使用箭头函数,会丢失this
document.addEventListener("click", () => {
 	console.log(this);			 // window
 })
  • 4
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值