Js中经常被忽略的两个神奇操作符?. 和 ??

更新日期: 2021-11-23阅读: 1.1k标签: 操作符

?.和??估计是Javascript两个最为有用并且最经常被忽略的操作符了。这两个操作符最大的作用,就是对于undefined和null的应对,在没有lodash等库的情况下,直接桶过Javascript自身的机制就可以很大的程度上提高程序的健壮性。

?.主要用于在多层的object/array进行取值和函数调用,而??则比较类似于||,但是专门作用于undefined和null。

下面我们会通过一些例子来说明?.和??,并且和lodash的一些用法做一些比较。首先准备一个测试数据

const data = {
  layer1: {
    layer2: [
      {
        layer4: "layer 4 value",
        func: function(x) {
          return `in layer 4 func ${x}`;
        }
      },
      "layer 3 value"
    ]
  },
  x: "layer 1 value"
};

首先比较一下?.和lodash:

?.lodash结果
data?.x_.get(data, "x")"layer 1 value"
data?.layer1?.layer2?.[1]_.get(data, "layer1.layer2[1]")"layer 3 value"
data?.layer1?.layer2?.[0]?.layer4_.get(data, "layer1.layer2[0].layer4")"layer 4 value"
data?.layer1?.layer2?.[2]_.get(data, "layer1.layer2[2]")undefined
data?.layer1?.layer2?.[0]?.func(0)_.get(data, "layer1.layer2[0].func")(0)"in layer 4 func 0"
data?.layer1?.layer2?.[0]?.func_not_existed?.(0)_.get(data, "layer1.layer2[0].func_not_existed", () => undefined)(0)undefined

然后比较一下??和一些相关的操作符:

使用??操作符使用其他操作符
undefined??true // trueundefined || true // true
undefined??false // falseundefined || false // false
null??false // false null || false // false
null??true // truenull || false // false
false??true // falsefalse || true // true
false??'' // falsefalse || "" // ""
""??true // """" || true // true
""??false // """" || false // false
""??null // """" || null // null

在使用??操作符的时候,需要注意的正是根据??的定义,注意到它只能作用于undefined和null。而结合?.和??使用最常见的例子就是,通过?.来获取嵌套在对象内部的值,并且通过在最后放一个??来给出一个表达式的默认值。


链接: https://www.fly63.com/article/detial/10838

js操作符拾遗

对于js操作符的一些特性和有趣题目的整理。逗号操作符有两个作用,一个是用于当你想要在期望一个表达式的位置包含多个表达式时,可以使用逗号操作符。

JavaScript剩余操作符Rest Operator

剩余操作符和展开操作符的表示方式一样,都是三个点 \\\'...\\\',但是他们的使用场景会不同。定义函数的时候,如果函数的参数以… 为前缀,则改参数是剩余参数(rest parameter)。剩余参数表示参数个数不确定的参数列表

ES新提案:双问号操作符

本文主要讲Gabriel Isenberg撰写的ES提案“Nullish coalescing for JavaScript”。 它提出?? 替换||的运算符,并提供默认值。这里先把这相提案叫作双问号操作符,双问号 ?? 的操作符跟 || 类似,如果给定变量值为 null 或者 undefined

ES6 展开操作符的几个妙用

ES6 新增了...操作符,通常用于在函数中提取剩余参数和展开数组。但其实它的用途不止于此,本文就介绍几个技巧,用它来操作 JavaScript 对象。复制对象的同时,为其添加新的属性。例子中复制了user对象到userWithPass,并添加了 password 属性。

delete操作符

delete操作符用于删除对象的某个属性;如果没有指向这个属性的引用,那它最终会被释放。对于所有情况都是true,除非属性是一个自己不可配置的属性,在这种情况下

TypeScript typeof 操作符

在 TypeScript 中, typeof 操作符可以用来获取一个变量或对象的类型。在上面代码中,我们通过 typeof 操作符获取 sem 变量的类型并赋值给 Sem 类型变量,之后我们就可以使用 Sem 类型

JS 中强大的操作符

JS 里的操作符大家每天都在使用,还有一些 ES2020、ES2021 新加的实用操作符,这些共同构成了 JS 灵活的语法生态。本文除介绍常用的操作符之外

一文读懂TS in操作符

上述代码规定 staffCount 是一个对象,属性名为 roles 约束的三个,值为 number 类型:类型变量 k,以此绑定到对象的每一个属性,遍历三个字符串字面量组成的联合类型 roles,number 为每个属性的值的类型

TS typeof 操作符原来有这 5 种用途!

这是一个普通的 JavaScript 对象,在 TypeScript 中你可以使用 type 或 interface 来定义该对象的类型。有了该对象类型之后,你就可以利用 TypeScript 内置的工具类型

JS中鲜为人知的知识点-空值合并运算符(??)

与逻辑或操作符(||)不同,逻辑或操作符会在左侧操作数为假值时返回右侧操作数。也就是说,如果使用 || 来为某些变量设置默认值,可能会遇到意料之外的行为。比如为假值(例如0)时。见下面的例子。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!