ES6中的箭头函数、剩余参数、扩展运算符

箭头函数

箭头函数是用来简化函数定义语法的

const fn = () => {
	console.log(2132);
}
fn();

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

const sum = (num1,num2) => num1 + num2;

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

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

• 箭头函数不绑定this关键字，箭头函数中的this指向的是函数定义位置的上下文this

const obj = {name : 'lilsi'};
function fn(){
	console.log(this);
	return () => {
		console.log(this);
	}
}
const func = fn.call(obj);
func();
//两个都是输出 obj 对象，箭头函数的this指向是函数定义位置的fn函数的this

剩余参数

允许将一个不定数量的参数表示为一个数组

const sum = (...args) =>{
	let total = 0;
	args.forEach(item => total += item);
	return total;
}
console.log(sum(10,20,30,40));

剩余参数 和 解构 配合使用

let arr = [1,2,3,4];
let [a1,...a2] = arr;
cosnole.log(a1);
console.log(a2);// [2,3,4]

扩展运算符

可以将数组或者对象转为用逗号分隔的参数序列。

let ary = [1,2,3];
...ary //1,2,3
console.log(...ary); // 1 2 3

用于数组合并

let ary1 = [1,2,3];
let ary2 = [4,5,6];
let ary3 = [...ary1,...ary2];
//方法二
ary1.push(...ary2);

将类数组活可遍历对象转换为真正的数组，伪数组转换为真正的数组

let divs = document.getElementsByTagName('div');
divs = [...divs];