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

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

时间:2023-03-16 09:23:12浏览次数:46  
标签: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://www.cnblogs.com/echohye/p/17221095.html

相关文章

  • 6_JSTL格式化标签
    ​ JSTL格式化标签格式化标签库格式化标签库,也叫作fmt标签,是JTSL中的第二大组成部分,主要解决数据显示格式问题,让JSP页面的数据格式更加规范格式化标签库导入的语......
  • 6_JSTL格式化标签
    ​ JSTL格式化标签格式化标签库格式化标签库,也叫作fmt标签,是JTSL中的第二大组成部分,主要解决数据显示格式问题,让JSP页面的数据格式更加规范格式化标签库导入的语......
  • npm和node.js安装与环境配置
    nodejs和npm的关系node.js是javascript的一种运行环境,是对GoogleV8引擎进行的封装,是一个服务器端的javascript的解释器。npm是nodejs的包管理器(packagemanager)。nodej......
  • JS当前时间(可直接复制使用)
    1<divclass="showTime"></div>2<script>3vart=null;4t=setTimeout(time,1000);//開始运行5functiontime(){6......
  • Vue.js 计算属性(p18~p20)
    视频18视频19视频20姓名案例_插值语法实现<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"/> <title>姓名案例_插值语法实现</title> <!--引入Vue-->......
  • Node.js 微服务 All In One
    Node.js微服务AllInOneNest.js微服务(......
  • js快速入门
    前言之前曾学习了html和css,在学js的时候懈怠了,如今大三不得不面对自己web网页做不出来的现实,所以又前来学习web。因为之前js没有怎么学,所以直接从js开始了。不过js需要htm......
  • SSM jsp众筹平台
    SSMjsp众筹平台系统功能首页登录注册图片轮播新闻公告众筹资讯网站公告众筹项目发起众筹 在线留言关于我们合作伙伴后台管理首页系统用户管理新闻数据管......
  • JSP学习笔记
    responsesendRedirect();重定向操作,使用后重新生成新的response(不能传递request对象)request.getRequestDispatcher("login.jsp").forward(request,response);getParamet......
  • P4054 [JSOI2009] 计数问题
    二维树状数组板子,C[color][x][y] #include<bits/stdc++.h>usingnamespacestd;constintN=403,M=2e5+4;#defineintlonglongintA[N][N],c[101][N......