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

2022/4/30 23:15:41

本文主要是介绍【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;



这篇关于【ES6】箭头函数、剩余参数、函数参数的默认值的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程