可选链操作符 ?.

Apr 18, 2023 · Yin灏

访问嵌套对象的属性

const obj = {
  foo: {
    bar: {
      baz: "Hello, world!",
    },
  },
};

console.log(obj?.foo?.bar?.baz); // 'Hello, world!'
console.log(obj?.foo?.qux?.quux); // undefined

调用嵌套对象的方法

const obj = {
  foo: {
    bar: {
      baz: () => "Hello, world!",
    },
  },
};

console.log(obj?.foo?.bar?.baz?.()); // 'Hello, world!'
console.log(obj?.foo?.qux?.quux?.()); // undefined

访问数组方法

const arr = [1, 2, 3];

console.log(arr?.[0]); // 1
console.log(arr?.[1]); // 2
console.log(arr?.[10]); // undefined

调用数组方法

const arr = [1, 2, 3];

console.log(arr?.join()); // '1,2,3'
console.log(arr?.map((x) => x * 2)); // [2, 4, 6]
console.log(arr?.filter((x) => x > 10)); // undefined

访问函数返回值

const obj = {
  foo: () => ({ bar: "Hello, world!" }),
};

console.log(obj?.foo?.()?.bar); // 'Hello, world!'
console.log(obj?.baz?.()?.qux); // undefined

可选操作符于 nullish 合并操作符 ?? 结合使用

const obj = {
  foo: null,
};

console.log(obj?.foo ?? "default"); // 'default'
console.log(obj?.bar ?? "default"); // 'default'

- Book Lists -