「译」JS新特性“可选链式调用”

Raymond 收录于类别 Javascript

2019-09-03 2019-09-03 约 1677 字预计阅读 4 分钟

在JavaScript中长的链式调用可能容易出错，因为任何一步都可能出现null或undefined（也被称为“无效”值）。检查每个步骤的属性是否存在很容易变成深层次嵌套的if声明或者复制属性访问链的长的if条件：

1
2
3
4
5
6
7


// 容易出错的版本，可能抛出错误
const nameLength = db.user.name.length;

// 不容易出错，但是难以阅读
let nameLength;
if (db && db.user && db.user.name)
  nameLength = db.user.name.length;

以上还可以使用三元表达式，但是同样难以阅读：

1
2
3
4
5
6
7
8


const nameLength =
  (db
    ? (db.user
      ? (db.user.name
        ? db.user.name.length
        : undefined)
      : undefined)
    : undefined);

介绍可选调用链

我们并不想写出这样的代码，所以有一些代替方案是可取的。一些语言（例如swift，具体查看https://www.jianshu.com/p/5599b422afb0）针对这个问题提供了优雅的解决方案——可选调用链。根据最近的规范，“可选调用链是一个或多个属性访问和函数调用的链，以?.开头”。

使用新的可选调用链，我们可以重写上面的demo：

1
2


// 依然检查错误，但是可读性更高
const nameLength = db?.user?.name?.length;

使用可选调用链，当db，user，或name是undefined或者null的时候，nameLength被初始化为undefined，而不是像之前那样抛出错误。

**Note：**可选调用链比我们自己用if(db && db.user && db.user.name)检查更加健壮，例如，如果name是一个空字符串，可选字符串会将name?.length改为name.length然后得到正确的长度0，但是如果像我们之前那样做判断，不会得到正确的值，因为在if语句中空字符和false的行为相同。可选调用链修复了这个常见的bug。

其他的语法形式：调用和动态属性

还有一个用于调用可选方法的运算符：

1
2


// 使用可选方法扩展接口，仅适用于管理员用户
const adminOption = db?.user?.validateAdminAndGetPrefs?.().option;

这个语法可能有点儿出乎意料，因为这里的运算符是?.()，该运算符适用于之前的表达式。

可选调用链还有第三种用法，即可选动态属性访问?.[]。如果对象中有该key对应的value，则返回value，否则返回undefined。demo如下：

1
2
3


// 使用动态属性名访问属性对应的值
const optionName = 'optional setting';
const optionLength = db?.user?.preferences?.[optionName].length;

该用法同样适用于可选索引数组，例如：

1
2
3


// 如果`userArray`是`null`或`undefined`，则`userName`被优雅的赋值为`undefined`
const userIndex = 42;
const userName = usersArray?.[userIndex].name;

可选调用链可以和nullish coalescing ?? 操作符结合使用，返回一个非undefined的默认值。这样可以使用指定的默认值安全的进行深层属性访问，解决了之前用户需要JavaScript库才能解决的问题，例如lodash的_.get：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


const object = { id: 123, names: { first: 'Alice', last: 'Smith' }};

{ // With lodash:
  const firstName = _.get(object, 'names.first');
  // → 'Alice'

  const middleName = _.get(object, 'names.middle', '(no middle name)');
  // → '(no middle name)'
}

{ // With optional chaining and nullish coalescing:
  const firstName = object?.names?.first ?? '(no first name)';
  // → 'Alice'

  const middleName = object?.names?.middle ?? '(no middle name)';
  // → '(no middle name)'
}

可选调用链的属性

可选调用链有一些有趣的属性：短路（short-circuiting），堆叠（stacking）和可选删除（optonal deletion）。下面通过例子来了解这些属性。

*短路（short-circuiting）*即如果可选调用链提前返回则不计算表达式的其余部分：

1
2


// 只有在`db`和`user`不是`undefined`的情况下`age`才会+1
db?.user?.grow(++age);

*堆叠（stacking）*意味着可以在一系列属性访问中应用多个可选调用运算符：

1
2


// 一个可选链可以跟随另一个可选链
const firstNameLength = db.users?.[42]?.names.first.length;

但是，考虑在一个链中使用多个可选调用运算符。如果一个value保证是有效的，那么不鼓励使用?.去访问属性。像在之前的例子中，db必然是定义的，但是db.users和db.users[42]可能是未定义的。如果数据库中有这样的用户，那么name.first.length也是始终被定义的。

*可选删除（optonal deletion）*就是delete操作符可以和可选链一起使用：

1
2


// 当且仅当`db`是定义过的时候删除`db.user`
delete db?.user;

更多细节可以访问该提案的语义部分。

原文链接：https://v8.dev/features/optional-chaining

目录

「译」JS新特性“可选链式调用”

介绍可选调用链

其他的语法形式：调用和动态属性

可选调用链的属性