学习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赋予默认值,一种是为函数参数赋予默认值。