如何将可选链接与数组和函数一起使用？

Question

我正在尝试将可选链接与数组而不是对象一起使用，但不确定该怎么做：

这是我正在尝试做的 myArray.filter(x => x.testKey === myTestKey)?[0]。还尝试使用函数进行类似的操作：

let x = {a: () => {}, b: null}
console.log(x?b());

但它给出了类似的错误 - 我如何使用数组或函数的可选链接？

Answer 1

您需要在 ? 之后放置一个 . 以使用可选链接：

myArray.filter(x => x.testKey === myTestKey)?.[0]

Playground link

仅使用 ? 会使编译器认为您正在尝试使用条件运算符（然后它会抛出错误，因为它稍后看不到 :）

可选链接不仅仅是 TypeScript 的东西 - 它也是一个完成的提案 in plain JavaScript。

可以和上面的括号一起使用，也可以和点一起使用属性访问：

const obj = {
  prop2: {
    nested2: 'val2'
  }
};

console.log(
  obj.prop1?.nested1,
  obj.prop2?.nested2
);

以及函数调用：

const obj = {
  fn2: () => console.log('fn2 running')
};

obj.fn1?.();
obj.fn2?.();

Answer 2

在 official documentation

的新增功能页面上稍作搜索后找到了它

使用数组的正确方法是在 ?

之后添加 .

所以它会像

myArray.filter(x => x.testKey === myTestKey)?.[0]

我想进一步说明我的上述问题案例到底发生了什么。

myArray.filter(x => x.testKey === myTestKey)?[0]

转译为

const result = myArray.filter(x => x.testKey === myTestKey) ? [0] : ;

因此它抛出错误，因为在 : 之后缺少一些东西，您可能不希望将您的代码转换为此。

感谢 Certain Performance 的回答，我学到了有关打字稿的新知识，尤其是工具 https://www.typescriptlang.org/play/index.html .

Answer 3

好吧，即使我们找出了正确的语法，代码对我来说也没有多大意义。

上面代码中的可选链接确保 myArray.filter(x => x.testKey === myTestKey) 的结果不是 null 而不是 undefined （您可以查看 TS 输出） .但是无论如何也不可能，因为filter方法的结果总是一个array。由于 JavaScript 不会抛出“超出数组边界”，因此当您尝试访问任何索引时总是安全的 - 如果此元素不存在，您将得到 undefined。

更多示例以说明：

const myArray: string[] = undefined
console.log(myArray.filter(x => x)?.[0]) //throws Cannot read property 'filter' of undefined

//in this example the optional chaining protects us from undefined array
const myArray: string[] = undefined
console.log(myArray?.filter(x => x)[0]) //outputs "undefined"

Answer 4

我正在 Edge Chromium 84 上测试的 ECMA 262 (2020) 可以在没有 TypeScript 转换器的情况下执行 Optional Chaining 运算符：

// All result are undefined
const a = {};

console.log(a?.b);
console.log(a?.["b-foo-1"]);
console.log(a?.b?.());

// Note that the following statements throw exceptions:
a?.(); // TypeError: a is not a function
a?.b(); // TypeError: a?.b is not a function

CanIUse: Chrome 80+, Firefox 74+

Answer 5

函数不必在对象内部，您可以运行使用可选链接的函数也像这样：

someFunction?.();

如果someFunction存在则运行，否则跳过执行，不会报错。

这项技术实际上非常有用，尤其是当您使用可重用组件并且某些组件可能没有此功能时。

Answer 6

在 official documentation 中搜索新页面后，发现了它。

您需要在 ? 之后添加 . 才能使用可选链接。

原来如此，

myArray.filter(x => x.testKey === myTestKey)?.[0]

仅使用 ? 使编译器认为您正在尝试使用条件运算符（然后它会导致错误，因为它以后看不到 :）

如何将可选链接与数组和函数一起使用？

How can I use optional chaining with arrays and functions?

javascript

arrays

function

typescript

optional-chaining