Cách hoạt động của toán tử hợp nhất Nullish trong JavaScript

ES11 đã thêm một toán tử kết hợp nullish được biểu thị bằng dấu hỏi kép, như sau: ??.

Trong bài viết này, chúng ta sẽ khám phá lý do tại sao nó lại hữu ích và cách sử dụng nó.

Bắt đầu nào.

Thông tin lai lịch

Trong JavaScript, có toán tử OR logic ngắn mạch ||.

Cái || toán tử trả về đầu tiên truthy giá trị.

sau đây là only six những giá trị được coi là falsy các giá trị trong JavaScript.

• sai
• không xác định
• vô giá trị
• “” (chuỗi trống)
• NaN

Vì vậy, nếu bất cứ điều gì không có trong danh sách trên, thì nó sẽ được coi là truthy giá trị.

Truthy và Falsy giá trị là các giá trị không phải boolean bị ép buộc true
hoặc false khi thực hiện một số thao tác.

const value1 = 1;
const value2 = 23;

const result = value1 || value2; 

console.log(result); // 1

Như || toán tử trả về đầu tiên truthy giá trị, trong đoạn mã trên, result sẽ là giá trị được lưu trữ trong value1 đó là 1.

Nếu value1 Là null, undefined, empty Hay bất cứ thứ gì khác falsy giá trị, thì toán hạng tiếp theo sau || toán tử sẽ được đánh giá và đó sẽ là kết quả của tổng biểu thức.

const value1 = 0;
const value2 = 23;
const value3 = "Hello";

const result = value1 || value2 || value3; 

console.log(result); // 23

Ở đây, bởi vì value1 là 0, value2 sẽ được kiểm tra. Vì nó là một giá trị trung thực, kết quả của toàn bộ biểu thức sẽ là value2.

Vấn đề với || toán tử là nó không phân biệt giữa false , một chuỗi rỗng "", NaN , null và undefined . Tất cả chúng đều được coi là falsy các giá trị.

Nếu bất kỳ trong số này là toán hạng đầu tiên của || , thì kết quả là toán hạng thứ hai.

Tại sao JavaScript lại cần đến Nullish Coalescing Operator

Cái || toán tử hoạt động tốt nhưng đôi khi chúng ta chỉ muốn biểu thức tiếp theo được đánh giá khi toán hạng đầu tiên chỉ là một trong hai null hoặc undefined.

Do đó, ES11 đã thêm toán tử hợp nhất nullish.

trong biểu thức x ?? y,

• Nếu x là một trong hai null hoặc undefined vậy chỉ kết quả sẽ là y.
• Nếu x là không phải null hoặc undefined thì kết quả sẽ là x.

Điều này sẽ làm cho việc kiểm tra có điều kiện và mã gỡ lỗi trở thành một nhiệm vụ dễ dàng.

Hãy tự mình thử

let result = undefined ?? "Hello";
console.log(result); // Hello

result = null ?? true; 
console.log(result); // true

result = false ?? true;
console.log(result); // false

result = 45 ?? true; 
console.log(result); // 45

result = "" ?? true; 
console.log(result); // ""

result = NaN ?? true; 
console.log(result); // NaN

result = 4 > 5 ?? true; 
console.log(result); // false because 4 > 5 evaluates to false

result = 4 < 5 ?? true;
console.log(result); // true because 4 < 5 evaluates to true

result = [1, 2, 3] ?? true;
console.log(result); // [1, 2, 3]

Vì vậy, từ tất cả các ví dụ trên, rõ ràng là kết quả của hoạt động x ?? y Là y chỉ khi x là một trong hai undefined hoặc null.

Trong tất cả các trường hợp khác, kết quả của phép toán sẽ luôn là x.

Phần kết luận

Như bạn đã thấy, toán tử kết hợp nullish thực sự hữu ích khi bạn chỉ quan tâm đến null hoặc undefined giá trị cho bất kỳ biến nào.

Bắt đầu với ES6, có nhiều bổ sung hữu ích cho JavaScript như

• Phá hủy ES6
• Cú pháp nhập và xuất
• chức năng mũi tên
• lời hứa
• Không đồng bộ/chờ đợi
• Toán tử chuỗi tùy chọn

và còn nhiều nữa.

Bạn có thể tìm hiểu chi tiết mọi thứ về tất cả các tính năng của ES6+ trong cuốn sách Làm chủ JavaScript hiện đại.

Bạn có thể nhận được sách Mastering Modern JavaScript với mức chiết khấu 40%.

Đăng ký nhận bản tin hàng tuần của tôi để tham gia cùng hơn 1000 người đăng ký khác để nhận các mẹo, thủ thuật, bài báo và ưu đãi giảm giá tuyệt vời trực tiếp trong hộp thư đến của bạn.