首页 > 其他分享 >JS中对象解构时指定默认值

JS中对象解构时指定默认值

时间:2023-03-20 14:07:45浏览次数:48  
标签:const log console JS 解构 obj 默认值

待解构字段为原始值

正常情况下

const obj = { a: 1, b: 2}; 
const { a, b } = obj;
console.log(a, b); // 1 2

当被解构字段缺失时

const obj = { a: 1,};
const { a, b } = obj;
console.log(a, b); // 1 undefined

此时可在解构时使用 = 指定默认值:

const obj = { a: 1,};
const { a, b = 2 } = obj;
console.log(a, b); // 1 2

解构时指定别名
你甚至可以在解构字段的同时为其重命名

const obj = { a: 1, b: undefined};
const { a, b: c = 2 } = obj;
console.log(a, c) // 1 2

上述过程其实为:创建变量 c获取 obj.b 并赋值给 c如果 obj.b 为 undefined,则将指定的默认值 2 赋值给 c上面的过程等同于:​​const c = obj.b || 2​

待解构字段为对象

考察如下的对象:​​const obj = {=innerObj: {=a: 1,=b: 2 }}​​ 正常情况下可通过如下的形式解构以得到内层的字段:

const obj = { innerObj: {a:1,b:2},}; 
const { innerObj: { a, b = 2 },} = obj;
console.log(a, b); // 1 2

但如果里面嵌套的对象缺失时,上面的解构会报错

const obj = {}; 
const { innerObj: { a, b = 2 },} = obj;
console.log(a, b); // error: Uncaught TypeError: Cannot read property 'a' of undefined

此时需要在解构时对内层对象也指定默认值,形式如下

const obj = {}; 
const { innerObj: { a, b = 2 } = {},} = obj;
console.log(a, b); // undefined 2

解构字段包含在多层嵌套内当被解构字段包含在多层嵌套内时,甚至可以通过上面的方式为每一层都指定默认值

const obj = {}
const { foo: { bar: { a, b = 2 } = {} } = {} } = obj;
console.log(a, b) // undefined 2

对象解构时需要注意,当其为 null 时,上述默认值并不生效,仍会报错。具体见下方讨论。

const obj = { foo: {  bar: null }}
const { foo: { bar: { a, b = 2 } = {} } = {} } = obj;
console.log(a, b) // error: Uncaught TypeError: Cannot destructure property 'a' of '{}' as it is null.

undefined & null

上面讨论的默认值仅在被解构字段的值为 undefined 时生效。拿被解构字段为原始为例,下面两种情况默认值都会生效:被解构字段缺失

const obj = { a: 1,}; 
const { a, b = 2 } = obj;
console.log(a, b); // 1 2

被解构字段显式地拥有 undefined 值

const obj = { a: 1 b: undefined};
const { a, b = 2 } = obj;
console.log(a, b) // 1 2

但如果被解构字段的值为非 undefined 时,比如 null,此时默认值并不生效,因为字段拥有 null 本身就是一种合法的值,所以再对其指定默认值便毫无意义。于是,如下情况默认值不会生效:

const obj = { a: 1 b: null};
const { a, b = 2 } = obj;
console.log(a, b) // 1 null

这一规则在被解构字段为对象时同样适用。

箴言:因为这些东西是非常简单的。不要抱怨自己学不会,那是因为你没有足够用心。



标签:const,log,console,JS,解构,obj,默认值
From: https://blog.51cto.com/echohye/6132704

相关文章

  • js直接操作数据库会怎么样
        这几天刷脉脉的时候看到一个话题初看觉得可笑,再看陷入沉思,最后还是决定花点时间想清楚,写下来。 确实没见人这么干过,为什么呢?技术限制被技术限制了?据我......
  • js根据起始日期加间隔天数计算出结束日期
    getNewDay(dateTemp,days){dateTemp=dateTemp.split("-");//转换为MM-DD-YYYY格式varnDate=newDate(dateTemp[1]+"-"+dateTemp[2]+......
  • Qt Json 处理
    chatgpt#include<QJsonDocument>#include<QJsonObject>#include<QDebug>//从JSON字符串中解析数据voidparseJson(constQString&jsonString){//将JS......
  • Node.js的安装
    前面讲到了vue3的一些概念性的东西,今天我们就来讲Node.js的安装吧1.关于Node.js的安装这个是官方地址​​节点.js(nodejs.org)​​打开后是这个样子 选择左边长时间维护的......
  • JavaScript解析JSON
    一个对象以“{”开始,“}”结束。每个“key”后跟一“:”,“‘key/value’对”之间运用“,”分隔。遍历JSON对象中的数据,可通过for-in循环实现。数据{"主题":{......
  • SpringMVC返回JSON对象遇到的错误
    SPringMVC返回JSON对象遇到报错:org.springframework.web.servlet.handler.AbstractHandlerExceptionResolver.logExceptionResolved[org.springframework.http.converter......
  • JSONP、XHR的属性
    JSONP1、JSONP的原理script标签跨域不会被浏览器阻止JSONP主要就是利用scrip标签,加载跨域文件2、使用JSONP实现跨域服务端准备好JSONP接口https://www.imooc.com/api/......
  • orcle 查询出来的是空集给默认值的方法
    经常会遇到这种情景,查询语句必须要有一个返回值,但是现在的查询条件没有符合的结果。今天遇到了这个问题,解决方法:查询时用casewhen 这种方式selectcase(selectcount......
  • Three.js自定义shader实现离相机越近越透明效果
    constcustomShader=newTHREE.ShaderMaterial({uniforms:{},defines:{nearDis:0.3},transparent:true,side:THREE.DoubleSide,vertexShader:......
  • Three.js 进阶之旅:物理效果-3D乒乓球小游戏
    声明:本文涉及图文和模型素材仅用于个人学习、研究和欣赏,请勿二次修改、非法传播、转载、出版、商用、及进行其他获利行为。摘要本文在专栏上一篇内容《Three.js进阶之......