函数参数的解构赋值

学习ES6语法中,对于函数参数的解构赋值刚开始看有点儿懵,做个笔记记录一下。

function add([x, y]){
  console.log(x + y)
}
add([1, 2])  //结果是3

这块没什么问题,容易误解的地方在于赋值给参数默认值的时候。

function add({x = 1, y = 2}={}){
  console.log(x + y)
}
add() //3
add({x:2}) //4
add({x:2,y: 3}) //5
add({z:2}) //3

这个例子中,是给匹配模式x和y分别赋予了一个初始值,x = 1,y = 2。当add函数不传入参数,或者传入的对象没有x或y的属性的时候,函数体内的实际上console.log(1 + 2)。
为什么叫匹配模式,看下下面的例子:

function add({x:cc,y:dd}){
 // console.log(x);// x is not defined
 // console.log(y);// y is not defined
  console.log(cc + dd); //15
}
add({x: 7, y: 8})

x和y对应add函数传入对象的属性名,当参数对象中存在名为x和y的属性名时,将其对应的属性值赋给cc和dd两个变量。如果属性名称x和y不存在,那么cc和dd的值就会是undefined。
接下来体验一种不同的赋值参数默认值的方式。

function add({x, y} = {x:1,y: 2}){
  console.log(x+ y)
}
add() //3
add({x: 4,y: 5}) //9
add({x: 4}) //NaN

等号右侧其实是add函数接收的参数对象,这种赋值方式相比于第二个例子中,我们是提供给了add函数一个默认的参数对象。当我们什么都不传的时候匹配模式{x, y}解构的是{x:1,y:2}这个对象,所以输出的是3。然而当我们传入一个{x: 4}这样的对象时。我们的匹配就编程了{x, y} = {x: 4}。所以x = 4,而y = undefined。导致最终的结果变成了 NaN。
这两种解构赋予默认值的方式,还是挺不一样的。一种是给匹配变量x,y赋予默认值,一种是为函数参数赋予默认值。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容