Hướng dẫn hợp nhất Nullish (trong JS) cho người bình thường

Này đó! Bạn đã bao giờ thất vọng khi cố gắng xử lý các giá trị null hoặc không xác định trong mã JavaScript của mình chưa? Hợp nhất Nullish là một tính năng mới giúp thực hiện điều đó dễ dàng hơn rất nhiều. Trong bài đăng này, chúng tôi sẽ giải thích sự kết hợp vô hiệu.

Điều đó có nghĩa là các thuật ngữ đơn giản, ví dụ thú vị và không có biệt ngữ phức tạp. Cuối cùng, bạn sẽ viết mã JS rõ ràng, súc tích ngay lập tức.

Vì vậy, chính xác những gì là hợp nhất nullish? Về cơ bản, đó là một cách đơn giản, ngắn gọn để cung cấp một giá trị mặc định khi một giá trị nào đó là null hoặc không xác định. Thay vì có các câu lệnh OR logic lồng nhau lộn xộn, bạn có thể sử dụng toán tử dấu chấm hỏi kép (??) để kết hợp thành một mặc định.

Âm thanh khó hiểu? Đừng lo lắng, chúng tôi sẽ chỉ cho bạn cách nó hoạt động với một số ví dụ dễ thực hiện. Thắt dây an toàn, đây sẽ là một chuyến đi thú vị!

Toán tử hợp nhất Nullish chính xác là gì??

Bạn đã bao giờ gặp khó khăn khi xử lý các giá trị null trong JavaScript chưa? Tôi biết tôi có. Chà, bạn của tôi, để tôi giới thiệu cho bạn toán tử kết hợp nullish (??). Anh chàng nhỏ bé này sẽ làm cho cuộc sống của bạn dễ dàng hơn rất nhiều.

Vậy chính xác thì toán tử hợp nhất nullish là gì? Về cơ bản, đó là một lối tắt để cung cấp một giá trị mặc định khi một cái gì đó có thể là null hoặc không xác định. Thay vì viết:

 let name = obj.name || 'default name';

Bây giờ bạn có thể chỉ cần viết:

 let name = obj.name ?? 'default name';

Các ?? toán tử sẽ trả về phía bên trái nếu nó không rỗng (có nghĩa là null hoặc không xác định), nếu không, nó sẽ trả về phía bên phải. Vì vậy, trong ví dụ trên, nếu obj.name không phải là null hoặc không xác định, tên sẽ được đặt thành obj.name . Nhưng nếu obj.name là null hoặc không xác định, tên sẽ là 'tên mặc định'.

Khá tiện dụng đúng không? Một số ví dụ khác:

 let age = ageInput ?? 25; // Sets age to ageInput if not nullish, otherwise 25 let email = user.email ?? 'no email provided'; let hobbies = obj.hobbies ?? []; // Sets hobbies to obj.hobbies if not nullish, otherwise an empty array

Tôi hy vọng điều này sẽ giúp đơn giản hóa một số logic điều kiện của bạn trong JavaScript.

Một ví dụ trong thế giới thực mà tất cả chúng ta có thể liên quan đến

Bạn đã bao giờ trả tiền cho một thứ gì đó, chỉ để nhận ra rằng bạn đang thiếu một vài đô la? Tất cả chúng ta đã ở đó. Hợp nhất Nullish giống như tìm thêm một vài đô la trong túi của bạn để bạn thực sự có đủ khả năng mua những gì bạn muốn mua.

Giả sử bạn đến quán cà phê yêu thích của mình để uống cà phê buổi sáng như thường lệ. Bạn đi đến quầy với 3 đô la trong tay, sẵn sàng gọi món. Nhưng khi nhân viên pha chế cho bạn biết tổng số tiền của bạn, nó sẽ lên tới $3,50 sau thuế.

Hợp nhất Nullish giống như đột nhiên nhớ ra rằng bạn có một đô la khác trong túi, vì vậy bạn vẫn có thể lấy cà phê của mình. Phù!

Trong JavaScript, kết hợp nullish là một cách để cung cấp giá trị mặc định trong trường hợp một cái gì đó chuyển thành null hoặc không xác định. Ví dụ: giả sử bạn có một hàm có thể trả về hoặc không trả về giá trị:

 function getCoffeePrice() { // Returns $3.50 or undefined } let price = getCoffeePrice() ?? '$3.50';

Ở đây, nếu getCoffeePrice() trả về không xác định, price sẽ là '$3.50' theo mặc định nhờ vào ?? toán tử kết hợp nullish. Vì vậy, bạn được đảm bảo có giá cho cà phê của mình theo bất kỳ cách nào.

Hợp nhất Nullish cho phép mã của bạn linh hoạt hơn bằng cách cung cấp các giá trị mặc định dự phòng khi các biến là null hoặc không xác định. Cũng giống như tìm thêm đô la trong túi của bạn tại quán cà phê, nó đảm bảo bạn có những gì bạn cần để hoàn thành giao dịch. Khá tiện dụng đúng không?

Giờ đây, bạn có thể yên tâm khi biết rằng mình hiểu về kết hợp vô hiệu như một chuyên gia. Chúc mừng mã hóa và thưởng thức cà phê của bạn!

Sử dụng Nullish Coalescing trong JavaScript

Toán tử hợp nhất nullish (??) trả về toán hạng bên trái của nó nếu nó không nullish; ngược lại, nó trả về toán hạng bên phải của nó.

Bối rối? Hãy phá vỡ nó xuống. Giá trị "nullish" là null hoặc không xác định. Vì vậy ?? toán tử kiểm tra xem giá trị bên trái có phải là null không và nếu có, thay vào đó, trả về giá trị bên phải.

Ví dụ:

 const name = bob ?? 'anonymous';

Điều này sẽ gán giá trị của tên cho 'bob' nếu bob được xác định. Nếu bob không xác định hoặc null, thay vào đó, nó sẽ gán chuỗi 'ẩn danh'.

Tại sao điều này hữu ích?

Không có ?? nhà điều hành, bạn phải làm điều này:

 const name = bob !== null && bob !== undefined ? bob : 'anonymous';

Các ?? toán tử cung cấp cho chúng ta một cú pháp ngắn hơn, rõ ràng hơn để thực hiện điều tương tự về cơ bản.

Nó có thể được sử dụng ở mọi nơi trong JavaScript - trong các biến , đối số hàm , thuộc tính đối tượng, v.v. Bất cứ nơi nào bạn thường sử dụng || (hoặc) cho các giá trị mặc định, bây giờ bạn có thể sử dụng ?? cho một giá trị mặc định "nullish".

Một vài ví dụ:

 const foo = null ?? 'default string'; // foo is 'default string' const bar = 0 ?? 42; // bar is 0 const qux = 0 || 42; // qux is 42 - || returns first truthy value function doSomething(x = 0) { x = x ?? 10; // If x is nullish, set default of 10 console.log(x); } doSomething(null); // Prints 10 doSomething(5); // Prints 5

Tôi hy vọng điều này sẽ giúp giải thích toán tử kết hợp nullish!

Tại sao kết hợp Nullish lại tốt hơn OR (||)

Toán tử OR (||) sẽ trả về giá trị trung thực đầu tiên.

Toán tử OR (||) hoạt động bằng cách trả về giá trị trung thực đầu tiên mà nó gặp phải. Nếu cả hai giá trị đều sai, nó sẽ trả về giá trị cuối cùng. Ví dụ:

 let name = null; let user = name || 'John'; // user is 'John'

Ở đây, name là null (falsy), vì vậy user nhận được giá trị thứ hai, 'John'.

Toán tử kết hợp Nullish (??) Thông minh hơn.

Nullish Coalescing Operator (??) đã được giới thiệu trong ES2020 và thông minh hơn OR (||) một chút. Nó sẽ trả về giá trị được xác định đầu tiên (không phải null/không xác định). Vì vậy, nếu giá trị đầu tiên là một chuỗi rỗng, 0 hoặc sai, nó sẽ trả về giá trị đó. Ví dụ:

 let name = ''; let user = name ?? 'John'; // user is ''

Ở đây, name là một chuỗi rỗng, vì vậy user nhận được name (giá trị được xác định đầu tiên).

Toán tử hợp nhất Nullish cho phép chúng tôi cung cấp các giá trị mặc định theo cách rõ ràng hơn. Chúng ta có thể đặt giá trị mặc định cho giá trị null/không xác định mà không phải lo lắng về các giá trị giả như 0, chuỗi trống, sai, v.v.

Ví dụ: giả sử chúng ta có một hàm trả về tuổi của người dùng, nhưng đôi khi tuổi là null:

 function getAge() { return age; // could be null } let userAge = getAge() || 30; // Uses OR, not ideal

Ở đây, nếu age là 0, '' hoặc sai, userAge sẽ không chính xác là 30.

Sử dụng Nullish Coalescing Operator sửa lỗi này:

 let userAge = getAge() ?? 30; // Uses ??

Bây giờ, userAge sẽ chỉ là 30 nếu age là null hoặc không xác định. Bất kỳ giá trị giả nào khác như 0 sẽ được sử dụng.

Vì vậy, tóm lại, hãy sử dụng Toán tử kết hợp Nullish (??) thay vì OR (||) khi bạn muốn cung cấp giá trị mặc định cho null/không xác định, chứ không phải cho các giá trị giả như 0, chuỗi trống hoặc sai.

Mã của bạn sẽ sạch hơn và ít bị lỗi hơn!

Câu hỏi thường gặp về Nullish Coalescing

Vậy là bạn đã nghe về toán tử Nullish Coalescing (??) mới lạ mắt này trong JavaScript và có một số câu hỏi. Đừng lo lắng, tôi đã bảo vệ bạn!

Nullish Coalescing hoạt động với những loại dữ liệu nào?

• Hợp nhất Nullish hoạt động với bất kỳ loại dữ liệu nào trong JavaScript, bao gồm:
• Các số: 0 ?? 1 // Trả về 1
• Dây: '' ?? 'Xin chào' // Trả về 'Xin chào'
• Booleans: sai ?? đúng // Trả về giá trị đúng
• Các đối tượng: {} ?? {name: 'John'} // Trả về {name: 'John'}
• Mảng: [] ?? [1, 2, 3] // Trả về [1, 2, 3]
• Và hơn thế nữa!

Đâu là sự khác biệt giữa || (Hoặc và ?? (Nullish Coalescing) Toán tử?

Cái || Toán tử (OR) sẽ trả về toán hạng bên phải nếu toán hạng bên trái là sai (false, 0, chuỗi rỗng, null, không xác định, NaN).

Các ?? Toán tử (Nullish Coalescing) sẽ chỉ trả về toán hạng bên phải nếu toán hạng bên trái là null hoặc không xác định.

Vì vậy, sự khác biệt chính là ?? coi 0 và các chuỗi rỗng là các giá trị hợp lệ, trong khi || không làm.

Khi nào tôi nên sử dụng ?? Hết ||?

Sử dụng ?? khi bạn muốn cung cấp giá trị mặc định cho null hoặc không xác định, nhưng coi 0 và chuỗi rỗng là giá trị hợp lệ.

Sử dụng || khi bạn muốn cung cấp dự phòng cho bất kỳ giá trị "giả" nào.

Hy vọng điều này sẽ giúp làm sáng tỏ một số câu hỏi hóc búa mà bạn có về toán tử Nullish Coalescing! Hãy cho tôi biết nếu bạn có bất kì câu hỏi nào khác.

Phần kết luận

Bây giờ bạn đã biết tất cả về hợp nhất nullish và cách nó hoạt động trong JavaScript. Khá đơn giản, phải không? Toán tử nhỏ này có thể giúp bạn tiết kiệm thời gian và làm cho mã của bạn gọn gàng hơn bằng cách cung cấp các giá trị mặc định một cách ngắn gọn.

Vì vậy, hãy tiếp tục và kết hợp những giá trị vô giá trị với nội dung trái tim của bạn! Bạn đang trên con đường thành thạo các tính năng JavaScript hiện đại.

Mã hóa vui vẻ!