箭头函数
MDN:箭头函数表达式的语法比函数表达式更简洁,并且没有自己的this,arguments,super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方,并且它不能用作构造函数。
箭头函数的注意事项
- 箭头函数没有自己的this,只能沿着作用链的上一层继承this,最终都指向windows。严格模式下,this为undefined。
- 同理箭头函数无法使用当前函数的arguments,会向函数外找。但是箭头函数可以使用剩余参数...rest
- 箭头函数没有prototype,所以也不能new实例。
★箭头函数的简写形式
普通函数写法:
function(){};
箭头函数写法:
()=>{};
const requests = (a) => {};
简写为 const requests = a => {};
箭头函数,不确定参数个数时,只能使用剩余参数,不能使用arguments:
(a,b, ...rest) => ...rest.forEach(item => console.log(item))
(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
没什么好讲的,这是定义里已经说明了。也可以用作实际应用场景中初次加载中,因为用户点击而没有拿到参数值的时候,使用默认值渲染。
(a,b=1) => a+b
默认参数可用于后面的默认参数
const welcome = (name,gender, greetings = name + '' + gender) => {}
有默认值的解构参数
( [x, y] = [1, 2], {z: z} = {z: 3} )=> x + y + z;