一道关于解构赋值和参数默认值的编程题
在前端俱乐部QQ群中,有朋友发出这样的题目,说最近面试中遇到了,如下所示
1 | function fun( ? ) { |
问,fun 的参数应该填什么?
提示:利用结构赋值和参数默认值
经过我一番测试,其结果如下所示:
1 | function fun({ a = 123, b = 456 } = { a: 1, b: 2 }) { |
解题思路
先看第一个执行: console.log(fun( )) // {a:1,b:2}
fun()
不传参数,直接执行,结果 a 为 1,b 为 2。说明默认值为 a : 1,b : 2。
可以得出
1 | function fun(a = 1, b = 2) { |
再看第二个执行:console.log(fun({a:3})) // {a:3,b:456}
fun({a: 3})
,参数传入一个对象,对象中 a 为 3,其结果 a 为 3,b 为 456。说明其参数默认值为一个对象,对象中的值又有默认参数 a 与 b。
结合“执行 1”,如果不传参数,默认用 a = 1, b = 2
的选项;如果传入参数;则用对象中的默认参数。即
1 | function fun({ a = XX, b = 456 } = { a: 1, b: 2 }) { |
最后看第三个执行:console.log(fun({})) // {a:123,b:456}
很明显,我们还不知道对象中的默认 a 代表什么。第三个执行告诉我们它为 123
所以最后我们的答案是
1 | function fun({ a = 123, b = 456 } = { a: 1, b: 2 }) { |
难点
在做这道题的时候,我被赋值的 =
和 :
迷惑了。这里做笔记记录
:
针对对象赋值=
为默认值
如图所示:
1 | const obj = { |
=
赋予变量默认值
那么 :
何处使用,当解构赋值中的值为一个对象的时,设置对象中的值就用:
1 | const obj = { |
这里我们要注意:当解构的值在对象中,即使设置默认值,还是会以值为准;如果解构的值不在对象中,则会以默认值的形式出现在结果值中。
回头看题
1 | function fun( ? ) { |
为什么 a = 123, b = 456 要用等于号=
,而不是用冒号:
呢,因为它原本是”键“,只能赋予默认值而不能将键重命名
总结
解构赋值时,冒号:
是重命名,等于号=
是赋值默认值