HomeLập trìnhJavaScriptCách sử dụng...

Cách sử dụng Chuỗi tùy chọn trong JavaScript


Chuỗi tùy chọn là một cách an toàn và ngắn gọn để thực hiện kiểm tra quyền truy cập cho các thuộc tính đối tượng lồng nhau.

Toán tử xâu chuỗi tùy chọn ?. đưa tham chiếu sang bên trái của nó và kiểm tra xem nó không được xác định hay không. Nếu tham chiếu là một trong hai giá trị nullish này, quá trình kiểm tra sẽ dừng và trả về không xác định. Nếu không, chuỗi kiểm tra quyền truy cập sẽ tiếp tục theo con đường hạnh phúc đến giá trị cuối cùng.

// An empty person object with missing optional location information
const person = {}

// The following will equate to undefined instead of an error
const currentAddress = person.location?.address

Chuỗi tùy chọn đã được giới thiệu trong ES2020. Theo TC39, nó hiện đang ở giai đoạn 4 của quy trình đề xuất và được chuẩn bị để đưa vào tiêu chuẩn ECMAScript cuối cùng. Điều này có nghĩa là bạn có thể sử dụng nó, nhưng lưu ý rằng các trình duyệt cũ hơn vẫn có thể yêu cầu sử dụng polyfill.

Chuỗi tùy chọn là một tính năng hữu ích có thể giúp bạn viết mã sạch hơn. Bây giờ hãy tìm hiểu làm thế nào chúng ta có thể sử dụng nó.

Cú pháp chuỗi tùy chọn

Trong bài viết này, tôi chủ yếu sẽ đề cập đến cách truy cập các thuộc tính của đối tượng. Nhưng bạn cũng có thể sử dụng chuỗi tùy chọn để kiểm tra các chức năng.

Đọc thêm  JavaScript là gì? Mã JavaScript được giải thích bằng tiếng Anh đơn giản

Dưới đây là tất cả các trường hợp sử dụng cho chuỗi tùy chọn:

obj?.prop       // optional static property access
obj?.[expr]     // optional dynamic property access
func?.(...args) // optional function or method call

Nguồn: Tài liệu web MDN

Ví dụ:

const value = obj?.propOne?.propTwo?.propThree?.lastProp;

Trong đoạn mã trên, chúng tôi đang kiểm tra xem obj là null hoặc không xác định, sau đó propOnesau đó propTwo, và như thế. Chuỗi tùy chọn đúng như tên gọi của nó. Trong chuỗi truy cập thuộc tính đối tượng, chúng ta có thể kiểm tra xem mỗi giá trị có phải là không xác định hoặc không.

Kiểm tra này có thể cực kỳ hữu ích khi truy cập các giá trị đối tượng được lồng sâu. Đây là một tính năng rất được mong đợi và nó giúp bạn không phải thực hiện nhiều kiểm tra vô giá trị. Điều đó cũng có nghĩa là bạn không cần sử dụng các biến tạm thời để lưu trữ các giá trị đã kiểm tra, ví dụ:

const neighborhood = city.nashville && city.nashvile.eastnashville;

Ở đây chúng ta có thể kiểm tra xem nashville là một tài sản trong city trước khi cố gắng truy cập thuộc tính lân cận bên trong của eastnashville. Chúng tôi có thể chuyển đổi ở trên để sử dụng chuỗi tùy chọn, như vậy:

const neighborhood = city?.nashville?.eastnashville;

Chuỗi tùy chọn đơn giản hóa biểu thức này.

Xử lý lỗi với chuỗi tùy chọn

Chuỗi tùy chọn đặc biệt hữu ích khi làm việc với dữ liệu API. Nếu bạn không chắc liệu thuộc tính tùy chọn có tồn tại hay không, bạn có thể sử dụng chuỗi tùy chọn.

Đọc thêm  Cách hợp nhất các mảng trong JavaScript – Array Concatenation in JS

Một lời cảnh báo

Không sử dụng chuỗi tùy chọn ở mọi cơ hội. Điều này có thể dẫn đến lỗi im lặng do không xác định có khả năng được trả lại ở nhiều nơi.

Điều quan trọng cần nhớ là kiểm tra sẽ dừng và “đoản mạch” ngay khi nó gặp giá trị nullish. Hãy xem xét điều này cho các thuộc tính tiếp theo trong chuỗi và điều gì sẽ xảy ra nếu chúng không thể đạt được.

Tốt nhất là sử dụng cách kiểm tra này khi bạn biết rằng thứ gì đó có thể không có giá trị, chẳng hạn như thuộc tính tùy chọn. Nếu một giá trị bắt buộc có kiểm tra nullish, thì giá trị đó có thể bị tắt tiếng với giá trị không xác định được trả về thay vì trả về lỗi để cảnh báo về vấn đề này.

Chuỗi tùy chọn + Hợp nhất Nullish

Chuỗi tùy chọn kết hợp tốt với kết hợp nullish ?? để cung cấp các giá trị dự phòng.

const data = obj?.prop ?? "fallback string";
const data = obj?.prop?.func() ?? fallbackFunc();

Nếu mục bên trái của ?? là nullish, mục bên phải sẽ được trả lại.

Chúng tôi biết rằng nếu có ?. check tương đương với một giá trị nullish trong chuỗi, nó sẽ trả về undefined. Vì vậy, chúng tôi có thể sử dụng hợp nhất nullish của mình để phản hồi kết quả không xác định và đặt giá trị dự phòng rõ ràng.

const meal = menu.breakfast?.waffles ?? "No Waffles Found."

kết thúc

Chuỗi tùy chọn là một tính năng tiện dụng gần đây của JavaScript cho phép bạn kiểm tra các giá trị rỗng trong khi truy cập các giá trị thuộc tính. Bạn cũng có thể sử dụng nó với ?. nhà điều hành.

Đọc thêm  Định dạng ngày JavaScript – Cách định dạng ngày trong JS

Tôi hy vọng bài viết này đã giúp giới thiệu hoặc làm rõ chuỗi tùy chọn. Chúc mừng mã hóa!



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status