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

简介: 一道关于解构赋值和参数默认值的编程题

在前端俱乐部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 要用等于号=,而不是用冒号:呢,因为它原本是”键“,只能赋予默认值而不能将键重命名


总结



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


相关文章
|
7月前
|
JavaScript 前端开发
变量和对象的解构赋值
变量和对象的解构赋值
40 0
|
21天前
|
JavaScript 前端开发
如何使用解构赋值来处理具有默认值的函数?
使用解构赋值来处理具有默认值的函数,可以使函数的参数和返回值更加灵活和易于使用,提高代码的可读性和可维护性,同时也减少了因参数缺失或返回值不完整而导致的错误。
43 7
|
21天前
|
JavaScript 前端开发
如何在函数中使用解构赋值来处理具有默认值的函数的返回值?
在函数中使用解构赋值来处理具有默认值的函数的返回值,可以使代码更加简洁、清晰,并且能够更好地应对各种可能的返回情况,增强代码的健壮性和可维护性。
32 5
|
24天前
|
JavaScript 前端开发 网络架构
数组解构赋值时,对变量的命名有什么要求?
【10月更文挑战第30天】数组解构赋值对变量命名的要求主要是遵循JavaScript标识符的命名规则,以及与数组元素位置的对应关系。合理的变量命名可以使代码更加清晰易懂,提高代码的可读性和可维护性。
|
23天前
解构赋值时如果数组元素的值是嵌套对象,如何进行解构赋值?
【10月更文挑战第30天】可以灵活地对数组中包含嵌套对象的元素进行解构赋值,根据具体的需求提取出所需的值,从而使代码更加简洁、清晰,提高代码的可读性和可维护性。
|
2月前
|
JavaScript 前端开发
解构赋值及其原理
解构赋值及其原理
43 0
|
5月前
|
JavaScript 前端开发 网络架构
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
59 1
|
前端开发 JavaScript API
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(五)
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(五)
|
前端开发 JavaScript 网络架构
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(三)
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map(三)