在运用 JavaScript 的时分,常常需求对变量进行条件赋值,即只有当变量未定义或为 null 时,才给它赋一个默许值。这种场景在处理目标特点、函数参数等方面尤为常见。JavaScript ES2021 引进的逻辑空赋值运算符(??=)正是为了简化这种操作。本文将探讨 ??= 运算符的运用场景和优势。

了解 ??= 运算符

逻辑空赋值运算符 ??= 是逻辑空兼并运算符(??)的赋值版别。它的作用是当变量当时为 nullundefined 时,将其赋值为右侧的值。假如变量已有非 nullundefined 的值,则坚持当时值不变。

其基本语法如下:

variable ??= value;

这等价于以下方式

if (variable === null || variable === undefined) {
  variable = value;
}

示例:运用 ??= 运算符初始化目标特点

假设有一个目标 _params,包含了一些装备参数。因为此目标要被序列化成http的query部分;因而需求保证每个参数都有一个有用的值,以防止在后端查询数据库的时分因为 "undefined""null" 引起错误。这时,??= 运算符就能派上用场了。

做如下处理:

const _params = {
  name: "John",
  age: null,
  gender: undefined,
  email: "john@example.com"
};
Object.keys(_params).forEach(key => {
  _params[key] ??= '';
});
const queryParams = new URLSearchParams(_params).toString();
let target = baseUrl;
if (queryParams) {
  target = baseUrl.concat('?').concat(queryParams);
}

上述代码遍历 _params 目标的所有特点。关于每个特点运用 ??= 运算符查看其值是否为 nullundefined。假如是,将其赋值为空字符串 ''。这样,无论 agegender 原本的值如何,执行完这段代码后,它们都会被初始化为一个明确的空字符串,从而防止了在运用这些特点时可能遇到的问题。

运用场景

??= 运算符在日常开发中有多种运用场景:

1. 默许参数赋值

在函数中能够运用 ??= 来为可能未传入的参数提供默许值:

function greet(name) {
  name ??= 'Guest';
  console.log(`Hello, ${name}!`);
}

2. 装备目标的默许特点

在处理装备目标时,??= 运算符十分有用,特别是需求保证目标中的每个特点都有默许值时。这在初始化运用设置或装备时尤为重要,能够防止后续的逻辑错误。

假设有一个表明运用装备的目标,咱们希望保证该目标中的某些特点,假如未显式设置,则应赋予它们默许值:

let appConfig = {
  theme: 'dark',
  notifications: undefined,
  fontSize: null
};
// 保证所有装备项都有默许值
appConfig.theme ??= 'light'; // 现已有值,所以坚持不变
appConfig.notifications ??= true; // 之前是 undefined,现在赋值为 true
appConfig.fontSize ??= 14; // 之前是 null,现在赋值为 14
console.log(appConfig);
// 输出:{ theme: 'dark', notifications: true, fontSize: 14 }

在这个示例中,theme 特点现已设置了值,因而 ??= 运算符不会改变它。而 notificationsfontSize 特点因为本来的值为 undefinednull,所以被赋予了新的默许值。

3. 状况管理

在前端结构中管理运用状况时,常常需求依据当时状况来更新或赋值新的状况。??= 运算符在这里相同适用,能够用来简化代码,防止不必要的判别逻辑。

例如某个 React 组件中需求依据用户的操作更新组件的状况:

import React, { useState } from 'react';
function UserProfile() {
  const [userProfile, setUserProfile] = useState({
    name: undefined,
    age: null,
    bio: 'No bio provided.'
  });
  // 模仿用户更新操作
const updateUserProfile = (name, age) => {
  setUserProfile(prevState => {
    const newState = {
      ...prevState,
      name,
      age,
    }
    newState.name ??= 'Anonymous';
    newState.age ??= 18;
  });
};
  return (
    <div>
      <button onClick={updateUserProfile}>Update Profile</button>
      <p>Name: {userProfile.name}</p>
      <p>Age: {userProfile.age}</p>
      <p>Bio: {userProfile.bio}</p>
    </div>
  );
}

运用 ??= 运算符来为 nameage 状况提供默许值,当用户点击更新按钮而这些状况未被定义时。如此一来,能够保证 userProfile 状况始终坚持完整和一致,而不需求编写复杂的逻辑来查看每个值是否存在。

结论

??= 运算符是 JavaScript 中的一个有用的新特性,它提供了一种简洁明了的方式来对变量进行空值查看和赋值操作。通过运用 ??=,开发者能够减少代码的冗余,提高代码的可读性和健壮性。在日常开发中合理使用这一特性,能够有用地防止 nullundefined 值带来的问题,保证数据的完整性和程序的稳定性。