【ES6】期望对象属性为null或undefined时，设置默认值

于 2023-08-29 10:41:04 发布
阅读量286 收藏
点赞数 1
分类专栏： 前端 文章标签： es6 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_22744093/article/details/132556495
版权
本文介绍了JavaScript中的?.链式调用运算符，演示如何在对象属性可能为null或undefined时提供默认值。通过实例展示了`.isBig`、`.age`、`.sex`和自定义属性`.fck`的使用情况。
摘要由CSDN通过智能技术生成 
<!DOCTYPE html>

<script>



    //期望对象属性为null或undefined时，设置默认值
    let person = {
        "name": "xiaoming",
        "age": 12,
        "score": 12,
        "sex": null,
        "isBig": false
    }

    //说明： ?. 链判断运算符,直接在链式调用的时候判断，左侧的对象是否为null或undefined。如果是的，就不再往下运算，而是返回undefined。

    console.log(person?.isBig || 100);//输出：100,不能满足需求，||为false或者0是不能满足需求

    console.log(person?.age || 11);//输出：12

    console.log(person?.sex ?? 1);//输出：1 ，满足需求

    console.log(person?.fck ?? 'shirt');//输出：shirt



</script>
科学熊
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Javascript中判断一个值是否为undefined的方法详解
11-23
前言 相信大家都知道当声明一个变量，并且没有给赋值的情况下，它的初始值是undefined。但是在javascript中，怎么检查一个值是否为undefined呢？ 简单来说，在现代浏览器中，你可以安全的比较变量是否为undefined if (name === undefined) {...} 一些人反对直接使用undefined变量进行比较，因为在旧的浏览器中允许它的值被重新赋值，比如下面这样: undefined = "test" 在被重新赋值后,使用undefined指令将不能正确的检测一个变量是否被赋值。 不过，这个行为在2009年的ECMAScript 5被修复了。 15
es6解构赋值探坑
qq_41831345的博客
02-16 735
数组的解构 不给默认值 const [a] = [] // a undefined const [b] = [undefined] // b = undefined const [c] = [null] // c = null 看结果并没有什么异常,往下看. 给默认值 const [a = 1] = [] // a 1 const [b = 2] = [undefined] // b = 2 const [c = 3] = [null] // c = null 为什么es6undef
ES6运算符的扩展之null判断运算符-某个属性的值是null或undefined指定默认值
qq_36818931的博客
03-12 2116
es6扩展运算符??
ES6知识点总结
weixin_71228058的博客
11-21 230
在外部添加方法的步骤1.主要运用了protoype是对象原型【构造函数】的属性例子：person.prototype.show2=function(){console.log("这是利用prototype增加的方法")}2.object.assaign(目标对象{}，源1，源2...)例子：1.}return `名字为: ${this.name}`;};return `年龄为: ${this.age}`;}return `名字为: ${this.name}`;},
ES6 新增特性
qq_32947593的博客
11-23 166
es6的一些新特性总结
es6新增的几个运算符：三目运算符，链判断运算符，Null判断运算符
sdaulee的博客
05-19 2568
?:和?.和??
ES6数组与对象的解构赋值详解
10-16
如果对象中没有匹配的属性，变量会得到`undefined`，而不是默认值。当对象的属性包含嵌套的对象时，可以进行深度解构： ```javascript var obj = {first: "hello", last: "world"}; let {first: f, last: l} = obj;...
js设置function参数默认值(适合没有传参情况)
12-02
当你尝试在ES5或更低版本中使用这样的语法时，如果函数被调用而没有传递`title`参数，`title`将会是`undefined`，而不是你期望的默认值"提示信息"。 解决这个问题的一种常见方法是利用`arguments`对象，就像你在`...
ES6入门教程之变量的解构赋值详解
10-17
需要注意的是，如果尝试从非数组值进行解构赋值，如数字、布尔值、NaN、undefined、null或对象，会抛出错误，除非该值可转换为数组（例如字符串，会取第一个字符）。例如： ```javascript let [a] = 1; // 报错 let...
es6笔记补充es6笔记补充
04-03
基本类型包括字符串（String）、数字（Number）、布尔值（Boolean）、null、undefined、以及在ES6中新增的Symbol和BigInt。引用类型主要是对象（Object），包括数组（Array）、函数（Function）等。ES6中，我们还...
ES6解构赋值实例详解
08-28
ES6解构赋值是ES6中的一种新的赋值方式，它可以将数组或对象的值赋值给变量，并且可以使用默认值、解构对象和字符串等多种方式。本文将详细介绍ES6解构赋值的基本概念、原理与使用方法。 基本用法 解构赋值的基本...
ES6链判断运算符（用于读取对象属性时判断是否为null或者undefined）
qq_45971405的博客
06-30 4942
使用场景 当我们需要调用一个对象的某个属性但是我们却不确定这个属性是否存在时，如果直接读取的话可能就会报错，所以我们需要在调用之前先判断这个属性是否存在。 // 错误的写法，可能会报错 const firstName = message.body.user.firstName; // 正确的写法 const firstName = (message && message.body && message.body.user && message.
ES6-解构赋值 -对象默认值
weixin_47295886的博客
09-27 1193
对象中的属性值严格等于undefined 默认值生效
js判断是否为null，undefined，NaN，空串或者空对象
最新发布
qq_23858785的博客
04-30 4032
js判断是否为null，undefined，NaN，空串或者空对象
js(ES6)中感叹号和三个点。
NFX_niuniu的博客
02-04 906
js(ES6)中感叹号和三个点。 一、感叹号 1. 一个感叹号 一个感叹号(!)最好理解，也是我们经常使用的。!可以将变量转为boolean值，所有的truthy和falsy都可以被转化，比如null、undefined、数字0和空字符串取反都为true，其余都为false。 !null = true !undefined = true !"" = true !0 = true !100 = false !“asdss” = false 注意:truthy和falsy不是true和false 2. 两个感叹
ES6 函数参数的默认值
热门推荐
qq_32021031的博客
09-11 1万+
基本用法在ES6之前，不能直接为函数的参数指定默认值，只能采取变通的方法。function log(x,y){ y = y||'world'; console.log(x,y); } log('kkk');//kkk world这种写法的缺点在于： 如果参数y赋值了，但是对应的布尔值为false，则该赋值不起作用。如果在调用函数的时候，传入的y参数是一个空字符串，那么y就会被修改
es6 解构一个属性是对象可能为null的问题!
wqs15192095633的专栏
11-08 3769
今天遇到一个问题是，解构一个属性对象，这个属性能为null，要用的这个属性对象的属性 有数据时候是不会有问题的，但是属性对象为null之后默认值不好使，因为es6只有是undefined时候才用默认值。为null 时候不会加载默认值的，我先把那个属性解出来在处理一下。记录一下。 ...
ES6 -- find 详解
聪明勇敢有力气的博客
10-05 1万+
find 详解 两个参数 返回值 手写myFind
JavaScript / ES6
Ahua_Core的博客
08-13 1059
前端开发技能 —— JavaScript / ES6JavaScriptJavaScript 事件流与事件模型ES6三级目录 JavaScript JavaScript 事件流与事件模型 事件流 当子元素所绑定的事件被用户触发时，页面接收事件的顺序是什么，就涉及到事件流。事件流即事件的传播方式。 事件捕获：由上到下的传播方式，从不具体的节点逐级向下传播到最具体的节点。（Netscape事件流） 事件冒泡：由下到上的传播方式，从最具体的元素接收再逐级向上传播到document节点。（IE事件流） 事件模型
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

科学熊

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值