箭头函数、剩余参数

2020年10月19日真是痛苦的一天

箭头函数

ES6新增的定义函数的方式

()=> {}
const fn = () => {}

如果函数体中只有一句代码 并且代码的执行结果就是函数的返回值 函数体大括号可以省略

		// 在箭头函数中 如果函数体中只有一句代码 并且代码的执行结果就是函数的返回值 函数体大括号可以省略
		 const sum = (n1, n2) => n1 + n2;	 
		 const result = sum(10, 20);
		 console.log(result) //30

如果形参只有一个，可以省略小括号

 const fn = v => {
		 	alert(v);
		 }
		 fn(20) //20

箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义为值得上下文this

// 箭头函数不绑定this 箭头函数没有自己的this关键字 如果在箭头函数中使用this this关键字将指向箭头函数定义位置中的this
		
		function fn () {
			console.log(this);
			return () => {
				console.log(this)
			}
		}
		const obj = {name: 'zhangsan'};
		const resFn = fn.call(obj);
		resFn();

//箭头函数面试题
		var age = 100;
		var obj = {
			age: 20,
			say: () => {
				alert(this.age)
			}
		}
		obj.say();

剩余参数
剩余参数语法允许我们将一个补丁数量的参数表示为一个数组

 const sum = (...args) => {
		 	let total = 0;
		 	args.forEach(item => total += item);
		 	return total;
		 };

		// console.log(sum(10, 20));
		// console.log(sum(10, 20, 30));

剩余参数和解构配合使用

let ary1 = ['张三' , '李四', '王五'];
		let [s1, ...s2] = ary1;
		console.log(s1)
		console.log(s2)