JavaScript操作符(??、??=、?.)

数据运
• 阅读 1285

1、 ?? 空值合并操作符

在JavaScript中,??运算符被称为nullish coalescing运算符(零合并操作符)。
  空值合并操作符(??)是一个逻辑操作符,当左侧的操作数为 null 或者 undefined 时,返回其右侧操作数,否则返回左侧操作数。
  与逻辑或操作符(||)不同,逻辑或操作符会在左侧操作数为假值时返回右侧操作数。也就是说,如果使用 || 来为某些变量设置默认值,可能会遇到意料之外的行为。比如为假值(例如,'' 或 0)时。见下面的例子。

const foo = null ?? 'default string';
console.log(foo);    // 输出: "default string"
 
const baz = 0 ?? 42;
console.log(baz);    // 输出: 0
const nullValue = null;
const emptyText = ""; // 空字符串,是一个假值,Boolean("") === false
const someNumber = 42;
 
const valA = nullValue ?? "valA 的默认值";
const valB = emptyText ?? "valB 的默认值";
const valC = someNumber ?? 0;
 
console.log(valA); // "valA 的默认值"
console.log(valB); // ""(空字符串虽然是假值,但不是 null 或者 undefined)
console.log(valC); // 42

2、??= 空值赋值操作符

这个赋值操作符只有在当前值为空或未定义的情况下才会赋一个新的值。下面的例子强调了这个操作符本质上是空值赋值的语法糖。

var x = null
var y = 5
console.log( x ??= y )    // 输出: 5
console.log( x = (x ?? y) )    // 输出: 5 

3、?. 可选链操作符

可选链操作符( ?. )允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符,不同之处在于,在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误,该表达式短路返回值。

语法:obj?.prop   obj?.[expr]   arr?.[index]    func?.(args)
const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
};
 
const dogName = adventurer.dog?.name;
console.log(dogName);    // 输出: undefined
console.log(adventurer.someNonExistentMethod?.());    // 输出: undefined

函数调用:

let result = someInterface.customMethod?.();
//如果希望允许 someInterface 也为 null 或者 undefined ,那么你需要像这样写 someInterface?.customMethod?.()
可选链与表达式: 
let nestedProp = obj?.['prop' + 'Name'];

可选链访问数组:

let arrayItem = arr?.[42];
例子:
    let myMap = new Map();
    myMap.set("foo", {name: "baz", desc: "inga"});
 
    let nameBar = myMap.get("bar")?.name;
    在一个不含 bar 成员的 Map 中查找 bar 成员的 name 属性,因此结果是 undefined。

连用可选链操作:

let customer = {
  name: "Carl",
  details: {
    age: 82,
    location: "Paradise Falls" // details 的 address 属性未有定义
  }
};
let customerCity = customer.details?.address?.city;
// … 可选链也可以和函数调用一起使用
let duration = vacations.trip?.getTime?.();

空值合并操作符可以在使用可选链时设置一个默认值:

let customer = {
  name: "open",
  details: { age: 98 }
};
 
let customerCity = customer?.city ?? "666";
console.log(customerCity);  // 输出:666

使用这个运算符,有几个注意点:

(1)短路机制

a?.[++x]
// 等同于
a == null ? undefined : a[++x]

上面代码中,如果 a 是 undefined 或 null,那么 x 不会进行递增运算。也就是说,链判断运算符一旦为真,右侧的表达式就不再求值。
(2)括号的影响

(a?.b).c
// 等价于
(a == null ? undefined : a.b).c

上面代码中,?. 对圆括号外部没有影响,不管 a 对象是否存在,圆括号后面的 .c 总是会执行。
一般来说,使用 ?. 运算符的场合,不应该使用圆括号。
(3)右侧不得为十进制数值
为了保证兼容以前的代码,允许 foo ?. 3 : 0 被解析成 foo ? .3 : 0,因此规定如果 ?. 后面紧跟一个十进制数字,那么 ?. 不再被看成是一个完整的运算符,而会按照三元运算符进行处理,也就是说,那个小数点会归属于后面的十进制数字,形成一个小数。

点赞
收藏
评论区
推荐文章
Souleigh ✨ Souleigh ✨
4年前
PHP程序员必须会的 45 个PHP 面试题(第一部分)
Q1:和之间有什么区别?话题:PHP困难:⭐如果是两个不同的类型,运算符则在两个不同的类型之间进行强制转换操作符执行’_类型安全比较_‘这意味着只有当两个操作数具有相同的类型和相同的值时,它才会返回TRUE。11:true11:true1"1
Souleigh ✨ Souleigh ✨
4年前
JS - typeof 与 instanceof
一、typeoftypeof操作符返回一个字符串,表示未经计算的操作数的类型使用方法如下:typeof operandtypeof(operand)operand表示对象或原始值的表达式,其类型将被返回举个例子typeof 1 // 'number'typeof '1' // 'string'
Wesley13 Wesley13
3年前
SQL必知必会——高级数据过滤
1、组合where子句为了进行更强的过滤控制,sql允许给出多个where子句,这些子句有两种使用方式,即以and子句或or子句的方式使用。注意:1、操作符:用来联结或改变where子句中的子句的关键字,也称为逻辑操作符1.1、and操作符检索由供应商DLL01制造且价格小于等于4美元的所有产品的名称和价格;SELECTpro
劳伦斯 劳伦斯
4年前
前端面试题自检 JS CSS 部分
JS类型JavaScript的简单数据类型Number,String,Boolean,Undefined,Null,Symboltypeof操作符的返回值numberstringbooleanundefinedobjectfunction
Stella981 Stella981
3年前
Scala学习笔记03:操作符
Scala学习笔记03:操作符一、scala中操作符与方法的等价性scala中操作符即方法、方法即操作符。scala中操作符其实是普通方法调用的另一种表现形式,运算符的使用其实就是隐含地调用对应的方法。1、操作符即方法!(https://oscimg.oschina.net/oscnet/up6852d9b70e
Wesley13 Wesley13
3年前
mysql数据过滤
1、AND操作符:select表的字段名from对应的表名where表的字段名AND表的字段名运算符值;例子:selectprod\_id,prod\_price,prod\_namefromproductswhereven\_id1003ANDprod\_price<10;2、OR操作符:sele
Wesley13 Wesley13
3年前
004讲:改进我们的小游戏
1、Python比较操作符:       大于:                  大于等于:          小于:          <       小于等于:   <       等于:                 不等于:      !   以上操作符成立时返回T
Wesley13 Wesley13
3年前
LUA教程表达式逻辑运算符
Lua中的逻辑操作符有and,or,以及not。 和控制结构一样,所有的逻辑操作符把false和nil都作为假,而其它的一切都当作真。andornot逻辑运算符认为false和nil是假(false),其他为真,0也是true.and和or的运算结果不是true和false,而是和它的两个操
Stella981 Stella981
3年前
Lua 运算符
Lua运算符运算符是一个特殊的符号,用于告诉解释器执行特定的数学或逻辑运算。Lua提供了以下几种运算符类型:算术运算符关系运算符逻辑运算符其他运算符算术运算符下表列出了Lua语言中的常用算术运算符,设定A的值为10,B的值为20:操作符
Stella981 Stella981
3年前
JavaScript学习总结(二)——逻辑Not运算符详解
在JavaScript中,逻辑NOT运算符与C和Java中的逻辑NOT运算符相同,都由感叹号(!)表示。与逻辑OR和逻辑AND运算符不同的是,逻辑NOT运算符返回的一定是Boolean值。逻辑NOT运算符的行为如下:如果运算数是对象,返回false如果运算数是数字0,返回true如
小万哥 小万哥
11个月前
Kotlin 运算符详解:算术、赋值、比较与逻辑运算符全解析
Kotlin运算符运算符用于对变量和值执行操作。值称为操作数,而操作符定义了要在两个操作数之间执行的操作:操作数运算符操作数10050在下面的示例中,数字100和50是操作数,号是运算符:示例kotlinvarx10050虽然运算符通常用于将两个值