javascript - Làm thế nào tôi có thể sử dụng optional chaining với mảng và hàm?

Tôi đang cố gắng sử dụng optional chaining với một mảng thay vì một đối tượng nhưng không chắc cách thực hiện điều đó:

Đây là những gì tôi đang cố gắng làm myArray.filter(x => x.testKey === myTestKey)?[0]. Cũng đang cố gắng làm điều tương tự với một hàm:

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

Nhưng nó lại đưa ra lỗi tương tự - làm thế nào tôi có thể sử dụng optional chaining với một mảng hoặc một hàm?

Câu trả lời #1

Bạn cần đặt một . sau ? để sử dụng optional chaining:

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

Liên kết sân chơi

Chỉ sử dụng riêng ? khiến trình biên dịch nghĩ rằng bạn đang cố gắng sử dụng toán tử điều kiện (và sau đó nó ném lỗi vì không thấy : sau đó)

Chuỗi tùy chọn không chỉ là một tính năng của TypeScript - nó cũng là một đề xuất hoàn chỉnh trong JavaScript thuần túy.

Nó có thể được sử dụng với ký hiệu dấu ngoặc như trên, nhưng cũng có thể được sử dụng với cách truy cập thuộc tính bằng dấu chấm:

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

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

Và với các lời gọi hàm:

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

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

Câu trả lời #2

Vừa tìm thấy nó sau một chút tìm kiếm trên trang những gì mới trong tài liệu chính thức

Cách đúng để làm điều đó với mảng là thêm . sau ?

vậy nó sẽ như

myArray.filter(x => x.testKey === myTestKey)?.[0] // in case of object
x?.() // in case of function

Tôi muốn làm rõ thêm về những gì thực sự xảy ra với trường hợp câu hỏi của tôi ở trên.

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

Biên dịch sang

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

Do đó nó phát sinh lỗi vì có điều gì đó bị thiếu sau : và bạn có lẽ không muốn mã của mình được chuyển đổi thành dạng này.

Nhờ câu trả lời của Certain Performance, tôi đã học được những điều mới về TypeScript, đặc biệt là công cụ https://www.typescriptlang.org/play/index.html.

Câu trả lời #3

ECMA 262 (2020) mà tôi đang thử nghiệm trên Edge Chromium 84 có thể thực thi toán tử Optional Chaining mà không cần trình biên dịch TypeScript:

// 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+

Câu trả lời #4

Không nhất thiết phải để hàm ở bên trong đối tượng, bạn cũng có thể chạy một hàm bằng cách sử dụng optional chaining như thế này:

someFunction?.();

Nếu someFunction tồn tại, nó sẽ chạy, nếu không nó sẽ bỏ qua việc thực thi và sẽ không xảy ra lỗi.

Kỹ thuật này thực sự rất hữu ích, đặc biệt nếu bạn làm việc với các thành phần có thể tái sử dụng và một số thành phần có thể không có chức năng này.