Logical OR assignment (||=)

Try it

const a = { duration: 50, title: "" };

a.duration ||= 10;
console.log(a.duration);
// Expected output: 50

a.title ||= "title is empty.";
console.log(a.title);
// Expected output: "title is empty."

Cú pháp

x ||= y

Mô tả

Logical OR assignment short-circuits, nghĩa là x ||= y tương đương với x || (x = y), ngoại trừ biểu thức x chỉ được tính một lần.

Không có phép gán nào được thực hiện nếu toán hạng bên trái không phải falsy, do cơ chế short-circuit của toán tử logical OR. Ví dụ, đoạn mã dưới đây không ném lỗi dù x là const:

const x = 1;
x ||= 2;

Đoạn mã dưới đây cũng không kích hoạt setter:

const x = {
  get value() {
    return 1;
  },
  set value(v) {
    console.log("Setter called");
  },
};

x.value ||= 2;

Thực tế, nếu x không phải falsy thì y hoàn toàn không được tính toán.

const x = 1;
x ||= console.log("y evaluated");
// Logs nothing

Ví dụ

Đặt nội dung mặc định

Nếu phần tử "lyrics" trống, hiển thị giá trị mặc định:

document.getElementById("lyrics").textContent ||= "No lyrics.";

Ở đây cơ chế short-circuit đặc biệt hữu ích vì phần tử sẽ không bị cập nhật không cần thiết và không gây ra các tác dụng phụ không mong muốn như thêm công việc phân tích cú pháp hoặc render, hay mất focus, v.v.

Lưu ý: Hãy chú ý đến giá trị được trả về bởi API mà bạn đang kiểm tra. Nếu một chuỗi rỗng được trả về (giá trị falsy), phải dùng ||= để "No lyrics." được hiển thị thay vì khoảng trắng. Tuy nhiên, nếu API trả về null hoặc undefined trong trường hợp nội dung trống, nên dùng ??= thay thế.

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• Logical OR (||)
• Nullish coalescing operator (??)
• Bitwise OR assignment (|=)
• Truthy
• Falsy