ES6语法学习笔记之箭头函数、剩余参数

箭头函数

无参数写法示例：

                function show(){
			return 1;
		}
		console.log(show());//旧写法

		let show = () => 1;
		console.log(show());
复制代码

此处箭头前面是函数名show及参数()（虽然这里没传），后面是返回值。

有参数写法示例：

		/*function show(a,b){
			return a+b;
		}
		console.log(show(12,5));*/

		let showab = (a,b) => a+b;
		console.log(showab(12,5));
复制代码

此处箭头前面是函数名和参数(a,b)，后面是返回值（可以是表达式）。

有复杂语句的写法示例：

		let showcd = (c=12,d=5) =>{
			console.log(c,d);
			return c+d;
		};
		showcd();
复制代码

次数箭头前面是函数名和参数，并直接对参数赋了值。箭头后面则是语句，包括返回值。注意，语句需要用{}包起来。

注意一：箭头函数也会影响this对象

这里的结果是1，this指的就是调用其的函数的对象

		let json={
			id:1,
			show:function(){
				alert(this.id);
			}
		}

		json.show();//结果是1
复制代码

这里的结果是未定义，因为this是被setTimeout调用的，setTimeout所指的是window对象，而这里window对象没有定义id。当var一个id等于10时，结果变成10，尽管setTimeout所指的是window对象，由于var在json2外面，id2属于全局变量，setTimeout调用时就能访问到了。

		// var id=10;//如果加上这一行，下面的结果就变成10，因为这里属于全局，而setTimeout的对象正好是window，其参数函数的this对象也就是window的id。

		let json2={
			id2:1,
			show2:function(){
				setTimeout(function(){
					alert(this.id);
				},2000);
			}
		}
		json2.show2();//undefined
复制代码

但是！！！用箭头函数后作用域又变了！！！箭头函数让调用函数访问的对象固定为该函数所处的对象。

		let json3={
			id3:1,
			show3:function(){
				setTimeout(()=>{
					alert(this.id3);
				},2000);
			}
		}

		json3.show3();//1
复制代码

注意二：箭头函数里没有auguments，用...

		let show5=function(){
		console.log(arguments);
		}

		show5(1,2,3,4,5);
复制代码

这里输出的是数组[1,2,3,4,5]，但如果用箭头函数，那就报错：

		let show4=()=>{
			console.log(arguments);
		}

		show4(1,2,3,4,5);
复制代码

但是，用...也可以达到同样效果：

                let show6=(...args)=>{
			console.log(args);
		};
		show6(1,2,3,4,5);
复制代码

注意三：箭头函数不能当构造函数：

		// function show7(){
		// 	this.name='abc';
		// };

		let show7 = ()=>{
			this.name='abc';
		}

		let ss= new show7();
		alert(ss.name);
复制代码

如果是注释中的写法，结果会正常显示为abc，如果是箭头函数，则会报错。

转载于:https://juejin.im/post/5c4ebfb06fb9a049e93d1f2b