JS 链判断运算符(?.)

简介：

?.操作符：用于使用隐式空检查访问嵌套对象属性。

使用场景：

在使用后端返回的数据时，前端常常要对其进行判空操作，那么当嵌套属性比较多，写起来则会比较麻烦，如下：

if(data && data.obj && data.obj.name) {this.userName = data.obj.name;
}

或者更好的优化则可以将他们写成一行：

this.userName = data && data.obj && data.obj.name;

但是实际中后端返回的字段名会比较长，且属性嵌套也会比较多，那么代码看起来就会非常冗长、难以阅读。

下面用 ?. 来优化一下：

this.userName = data?.data.obj?.data.obj.name;

?. 是ES2020中引入的，相关用法如下：

obj.val?.pro  // 对象--如果`val`存在，则返回`obj.val.prop`，否则返回 `undefined`。obj.func?.(args) // 函数--如果 obj.func 存在，则返回 `obj.func?.(args)`，否则返回 `undefined`。obj.arr?.[index] // 数组--如果 obj.arr 存在，则返回 `obj.arr?.[index]`，否则返回 `undefined`。

访问属性，当属性不存在时：

let obj = {name: 'zhangsan',age: "18",
}

两者对比

- 访问不存在的属性：

console.log(obj.address.city);
// Uncaught TypeError: Cannot read property 'city' of undefinedconsole.log(obj?.address?.city);
// undefined

- 访问不存在的方法：

console.log(obj.fun());
// TypeError: obj.fun is not a functionconsole.log(obj.fun?.());
// undefined

- 访问数组

let arr = [{name: 'zhangsan',age: "18"},{name: 'zlisi',age: "22"},{name: 'wangwu',age: "34"},
]console.log(arr[0].name);  // zhangsan
console.log(arr[4].name);  // Cannot read property 'name' of undefined
console.log(arr?.[4]?.name);  // undefined

更换默认返回值，不返回undefined

在开发中，有时我们并不需要返回undefined，而是需要一个默认值，那么可以用??操作符赋值一个默认的返回值。

let obj = {name: 'zhangsan',age: "18",
}
console.log(obj?.sex ?? "男");  // 男

JS 链判断运算符(?.)相关推荐

JS-ES2020链判断运算符（？.）和Null判断运算符（？？）
ES2020引入"链判断运算符"(?.) const firstName = message?.body?.user?.firstName || 'default'; const ...
Js中的?.运算符和??运算符
?.(链判断运算符)和??(Null判断运算符)都是Es6新增的特性. ?.运算符使用?.链式调用时,左侧的对象如果为null 或者 undefined ,表达式就不会再往下计算,而是返回 unde ...
js中判断数据类型的方法
JS中判断数据类型的方法: 使用typeof操作符. 对一个值使用 typeof 操作符可能返回下列某个字符串,返回的类型都是字符串形式. (1) undefined:如果这个值未定义 (2) boo ...
Js中判断变量存不存在的问题
前面写过jquery对象存在与否的判断.现在谈下Js中判断变量存不存在的问题. 如果这样if(!a),当变量a在js中没有申明时,就会报错,那么接下去的代码将不会被执行.注意,这种判断只要变量申明过, ...
js如何判断是否在iframe中及防止网页被别站用 iframe嵌套 (Load denied by X-Frame-Options)...
1. js如何判断是否在iframe中 //方式一 if (self.frameElement && self.frameElement.tagName == "IFRAME ...
JS中判断对象是对象还是数组
JS中判断对象是对象还是数组的方法 JS中判断对象是不是数组的方法 JavaScript中检测对象的方法 1.typeof操作符这种方法对于一些常用的类型来说那算是毫无压力,比如Function ...
JavaScript语法-你必须要掌握的基础知识，js语句是由哪些基本要素组成，js值与运算符使用需要注意的有哪些？
什么是语法,其实,语法就是一套规则.就像我们学习语文的时候,学习主谓宾.定状补一样.JS也有语法,也有它自己的一套规则. 就像我们说话一样,我们说话的内容是由一些列语句构成的,JS程序也是由一些列语句 ...
js 与或运算符 || 妙用
js 与或运算符 || && 妙用,可用于精简代码,降低程序的可读性. 首先出个题: 如图: 假设对成长速度显示规定如下: 成长速度为5显示1个箭头: 成长速度为10显示2个箭头 ...
js/jQuery判断浏览器名称、内核版本、浏览器壳
1.js方法/* 判断浏览器名称和版本目前只能判断:ie/firefox/chrome/opera/safari 2012年5月16日23:47:08 浏览器内核UA:UA; 浏览器内核名称:NV. ...

JS 链判断运算符(?.)

JS 链判断运算符(?.)相关推荐

最新文章

热门文章