??= 賦值操作僅在左側(cè)為 null 或 undefined 時(shí)生效，1. 用于設(shè)置默認(rèn)配置值，如 user.age ??= 18；2. 實(shí)現(xiàn)變量的惰性初始化，如 cache ??= initializeHeavyResource()；3. 合并可選對象屬性時(shí)保留有效值，如 userData.email ??= getDefaultEmail()；該操作符不會(huì)覆蓋 0、'' 或 false 等 falsy 值，比 ||= 更安全，適用于現(xiàn)代環(huán)境，最終使代碼更簡潔、安全且可預(yù)測。

The null coalescing assignment operator (??=) is a concise and powerful feature introduced in modern JavaScript (ES2021) that helps streamline conditional assignments based on null or undefined checks. It’s particularly useful when you want to assign a default value to a variable only if it’s currently null or undefined.

What ??= Actually Does

The ??= operator works like this:

a ??= b;

This means:
"If a is null or undefined, assign b to a. Otherwise, leave a unchanged."

It’s equivalent to writing:

if (a == null) {
  a = b;
}

But much more compact and readable.

? Important: ??= only triggers assignment if the left-hand side is null or undefined — not other falsy values like 0, '', or false.

When to Use ??=

1. Setting Default Configuration Values

When working with user-provided options, you often want to fill in defaults only when certain properties are missing.

function createUser(settings) {
  const user = {};
  user.name = settings.name ?? 'Anonymous';
  user.age ??= settings.age ?? 18;
  user.isActive ??= settings.isActive ?? true;
  return user;
}

Or more cleanly:

function createUser(settings) {
  const user = { name: 'Anonymous', age: 18, isActive: true };
  user.name ??= settings.name;
  user.age ??= settings.age;
  user.isActive ??= settings.isActive;
  return user;
}

This avoids overwriting with undefined while preserving intentional falsy values.

2. Lazy Initialization of Variables

You can use ??= to initialize expensive or conditional values only when needed.

let cache;
cache ??= initializeHeavyResource(); // runs only once

Even if cache is reassigned to null later, this pattern allows reinitialization — unlike ||= which would fail on falsy results.

?? Compare with ||=:
||= triggers on any falsy value (0, '', false, etc.), which can lead to bugs.
??= is safer because it only cares about null and undefined.

3. Working with Optional Object Properties

When merging partial data, ??= helps preserve existing state.

const userData = { id: 123, name: 'Alice' };
userData.email ??= getDefaultEmail(userData.name);
userData.role ??= fetchDefaultRole(); // async or computed

This avoids accidentally clearing valid but empty strings or false values.

Practical Example: Config Manager

class Config {
  constructor() {
    this.apiKey = null;
    this.timeout = 0;
    this.retries = false;
  }

  applyDefaults() {
    this.apiKey ??= process.env.API_KEY;
    this.timeout ??= 5000;
    this.retries ??= 3;
  }
}

Here:

• timeout is 0 → kept as 0 (not replaced)
• retries is false → kept as false
• Only truly missing values (null) get defaults

This behavior makes ??= ideal for configuration systems.

Limitations and Gotchas

• Not available in older environments — requires ES2021 (Node.js 16 , modern browsers). Use Babel or checks in legacy code.
• Cannot be used directly on object destructuring like default params, but similar logic applies:

// Destructuring with defaults still uses `=`, not `??=`
const { name = 'Default' } = obj;

// But you can do:
let { apiKey } = obj;
apiKey ??= 'fallback-key';

• Short-circuiting matters: The right-hand side is evaluated only if the left is null/undefined.

let x = 1;
x ??= console.log('This won’t run'); // no output

Summary

Use ??= when:

• You want to assign defaults only for null/undefined
• You need to preserve falsy values like 0, '', or false
• You're doing lazy initialization or merging partial data

Avoid ||= in these cases — it’s too broad.

Basically:
??= = "only assign if really missing"
||= = "assign if falsy" — often too aggressive

With ??=, your code becomes cleaner, safer, and more predictable when handling optional values.

以上是利用無效的合并分配操作員（`?? =`）的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！