【ES6】箭头函数、函数参数的默认值、剩余参数

箭头函数

MDN：箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。

箭头函数的注意事项

1. 箭头函数没有自己的this,只能沿着作用链的上一层继承this，最终都指向windows。严格模式下，this为undefined。
2. 同理箭头函数无法使用当前函数的arguments，会向函数外找。但是箭头函数可以使用剩余参数...rest
3. 箭头函数没有prototype，所以也不能new实例。

★箭头函数的简写形式

普通函数写法：
function(){};

箭头函数写法：
()=>{};

箭头函数只带一个参数时,去除形参外的括号()：

const requests = (a) => {}; 简写为 const requests = a => {};

箭头函数,不确定参数个数时,只能使用剩余参数，不能使用arguments：

(a,b, ...rest) => ...rest.forEach(item => console.log(item))

箭头函数内的函数体只有一行代码，去除{return }：

(a,b) => {return a+b} 简写为 (a,b) => a+b

箭头函数内的函数体返回的是一个对象，不能直接去除{return}，要在对象外加(),否则对象外的{}被视为函数外的花括号报错：

(a,b) => {return {name:a, gender:b}} 简写为 const requests = a => ({name:a, gender:b})

箭头函数与解构配合

const fullName = (user) => { return user.firstnName + '' + user.lastName} 简写为 const fullName = ({firstName,lastName}) => firstName + '' + lastName

箭头函数三目运算符
(a,b) => a>b ? a : b

函数参数的默认值

函数默认参数允许在没有值或undefined被传入时使用默认形参。

解决了缺省参数报错undefined

没什么好讲的，这是定义里已经说明了。也可以用作实际应用场景中初次加载中，因为用户点击而没有拿到参数值的时候，使用默认值渲染。
(a,b=1) => a+b

默认参数可用于后面的默认参数

const welcome = (name,gender, greetings = name + '' + gender) => {}

有默认值的解构参数

( [x, y] = [1, 2], {z: z} = {z: 3} )=> x + y + z;

剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组。

函数的剩余参数

const fn = (a,b,...args) => { 
    console.log(a,b)
    console.log(args)
};
fn(1,2,3,4,5,6)

数组的剩余参数

const [a,b,...arr] = [1,2,3,4,5,6];
    console.log(a,b)
    console.log(arr)

对象的剩余参数

const {nickName,age,...obj} ={ nickName:'paul', age:19, hobby:'rap' };
    console.log(nickName,age)
    console.log(obj)