关于javascript:面试题一道关于解构赋值和参数默认值的编程题

在前端俱乐部 QQ 群中，有敌人收回这样的题目，说最近面试中遇到了，如下所示

function fun(?) {return {a,b}
}
console.log(fun()) // {a:1,b:2}
console.log(fun({a:3})) // {a:3,b:456}
console.log(fun({})) // {a:123,b:456}

问，fun 的参数应该填什么？

提醒：利用构造赋值和参数默认值

通过我一番测试，其后果如下所示：

function fun({a = 123, b = 456} = {a: 1, b: 2}) {return { a, b}
}

解题思路

先看第一个执行：console.log(fun()) // {a:1,b:2}

fun() 不传参数，间接执行，后果 a 为 1，b 为 2。阐明默认值为 a : 1，b : 2。

能够得出

function fun(a = 1, b = 2) {return { a, b}
}

再看第二个执行：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 的选项；如果传入参数；则用对象中的默认参数。即

function fun({a = XX, b = 456} = {a: 1, b: 2}) {return { a, b}
}

最初看第三个执行：console.log(fun({})) // {a:123,b:456}

很显著，咱们还不晓得对象中的默认 a 代表什么。第三个执行通知咱们它为 123

所以最初咱们的答案是

function fun({a = 123, b = 456} = {a: 1, b: 2}) {return { a, b}
}

难点

在做这道题的时候，我被赋值的 = 和 : 蛊惑了。这里做笔记记录

• : 针对对象赋值
• = 为默认值

如图所示：

const obj = {
  a: 1,
  b: 2,
  c: 3,
  d: 4,
}
const {a, b} = obj // 解构赋值 a,b, a 为 1，b 为 2
const {a = 11, b = 21, e = 51} = obj // 给解构赋值的 设置默认值，a 为 1，b 为 2，e 为 51，得默认值是当你对象中没有值时，赋予该变量的默认值

= 赋予变量默认值

那么 : 何处应用，当解构赋值中的值为一个对象的时，设置对象中的值就用：

const obj = {
  a: {
    aa: 11,
    bb: 22,
  },
  b: 2,
  c: 3,
  d: 4,
}
const {a, b} = obj // a={aa: 11, bb: 22} b=2
const {a = { aa: 111, bb: 222}, b = 22, e = {aa: 111, bb: 222} } = obj
// a={aa: 11, bb: 22},b = 22, e={aa: 111, bb: 222}

这里咱们要留神：当解构的值在对象中，即便设置默认值，还是会以值为准；如果解构的值不在对象中，则会以默认值的模式呈现在后果值中。

回头看题

function fun(?) {return {a,b}
}
console.log(fun()) // {a:1,b:2}
console.log(fun({a:3})) // {a:3,b:456}
console.log(fun({})) // {a:123,b:456}

为什么 a = 123, b = 456 要用等于号 =，而不是用冒号: 呢，因为它本来是”键“，只能赋予默认值而不能将键重命名

总结

解构赋值时，冒号: 是重命名，等于号= 是赋值默认值

本文参加了 SegmentFault 思否征文「如何“反杀”面试官？」，欢送正在浏览的你也退出。