0

0

JavaScript如何用逻辑赋值运算符简化操作

煙雲

煙雲

发布时间:2025-07-11 14:10:02

|

551人浏览过

|

来源于php中文网

原创

javascript中的逻辑赋值运算符通过结合逻辑判断与赋值操作提升代码简洁性。1. ||=(逻辑或赋值)在左侧为假值(如false、0、空字符串、null、undefined、nan)时赋值,适用于设置默认值;2. ??=(空值合并赋值)仅在左侧为null或undefined时赋值,避免误判0、空字符串等合法假值;3. &&=(逻辑与赋值)在左侧为真值时赋值,常用于前置条件检查。这些操作符分别简化了条件性赋值场景下的代码结构,使代码更清晰高效。

JavaScript如何用逻辑赋值运算符简化操作

JavaScript中的逻辑赋值运算符,说白了,就是把一个逻辑判断和赋值操作揉在了一起。它们让我们的代码更简洁,少写几行字就能达到目的,尤其是处理变量默认值或者条件性赋值的时候,简直是把代码的“废话”都给省了。

JavaScript如何用逻辑赋值运算符简化操作

我个人觉得,这几个操作符(||=??=&&=)就像是给赋值语句加了个智能判断。它们的核心思想是:在满足特定条件时才进行赋值。

  • ||= (逻辑或赋值) 这个操作符会在左侧变量为“假值”(falsy)时才进行赋值。假值包括 false, 0, "" (空字符串), null, undefined, NaN传统写法:

    JavaScript如何用逻辑赋值运算符简化操作
    let config = { theme: 'dark' };
    if (!config.theme) {
        config.theme = 'light';
    }
    // 或者更常见的
    config.theme = config.theme || 'light';

    使用 ||=

    立即学习Java免费学习笔记(深入)”;

    let config = { theme: 'dark' };
    config.theme ||= 'light'; // theme 已经是 'dark' (truthy),所以不会赋值
    console.log(config.theme); // 'dark'
    
    let userSettings = {};
    userSettings.language ||= 'en'; // language 是 undefined (falsy),会赋值
    console.log(userSettings.language); // 'en'
    
    let counter = 0;
    counter ||= 10; // counter 是 0 (falsy),会赋值
    console.log(counter); // 10

    你看,一行就搞定了,是不是清爽很多?

    PixVerse
    PixVerse

    PixVerse是一款强大的AI视频生成工具,可以轻松地将多种输入转化为令人惊叹的视频。

    下载
    JavaScript如何用逻辑赋值运算符简化操作
  • ??= (空值合并赋值) 这个相对新一点,也更精确。它只在左侧变量是 nullundefined 时才赋值。这意味着 0, "", false 这些值,即使是假值,也不会触发赋值。 传统写法:

    let prefs = { fontSize: 0 }; // 0 是有效值
    if (prefs.fontSize === null || prefs.fontSize === undefined) {
        prefs.fontSize = 16;
    }
    // 或者
    prefs.fontSize = prefs.fontSize ?? 16;

    使用 ??=

    let prefs = { fontSize: 0 };
    prefs.fontSize ??= 16; // fontSize 是 0,不是 null/undefined,所以不会赋值
    console.log(prefs.fontSize); // 0
    
    let userData = { name: 'Alice' };
    userData.email ??= 'default@example.com'; // email 是 undefined,会赋值
    console.log(userData.email); // 'default@example.com'

    我觉得 ??= 在处理那些“0”或者“空字符串”也是合法值的情况时,简直是神器,避免了 ||= 可能带来的误判。

  • &&= (逻辑与赋值) 这个操作符,我觉得它有点像一个“前置条件”检查器。它只在左侧变量为“真值”(truthy)时才进行赋值。如果左侧是真值,那么右侧的值会被赋给左侧;如果左侧是假值,赋值操作就不会发生。 传统写法:

    let user = { isAdmin: true, status: 'active' };
    if (user.isAdmin) {
        user.status = 'admin_active';
    }

    使用 &&=

    let user = { isAdmin: true, status: 'active' };
    user.isAdmin &&= 'admin_active'; // isAdmin 是 true (truthy),会赋值
    console.log(user.isAdmin); // 'admin_active' (这里需要注意,isAdmin的值本身被改变了)
    
    let adminUser = { role: 'admin' };
    adminUser.role &&= 'super_admin'; // role 是 'admin' (truthy),会赋值
    console.log(adminUser.role); // 'super_admin'
    
    let guestUser = { role: '' }; // 空字符串是 falsy
    guestUser.role &&= 'visitor'; // role 是 '' (falsy),不会赋值
    console.log(guestUser.role); // ''

    &&= 用得相对少一些,但它在某些特定

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
c语言中null和NULL的区别
c语言中null和NULL的区别

c语言中null和NULL的区别是:null是C语言中的一个宏定义,通常用来表示一个空指针,可以用于初始化指针变量,或者在条件语句中判断指针是否为空;NULL是C语言中的一个预定义常量,通常用来表示一个空值,用于表示一个空的指针、空的指针数组或者空的结构体指针。

254

2023.09.22

java中null的用法
java中null的用法

在Java中,null表示一个引用类型的变量不指向任何对象。可以将null赋值给任何引用类型的变量,包括类、接口、数组、字符串等。想了解更多null的相关内容,可以阅读本专题下面的文章。

1089

2024.03.01

java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

1570

2023.10.24

Go语言中的运算符有哪些
Go语言中的运算符有哪些

Go语言中的运算符有:1、加法运算符;2、减法运算符;3、乘法运算符;4、除法运算符;5、取余运算符;6、比较运算符;7、位运算符;8、按位与运算符;9、按位或运算符;10、按位异或运算符等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

241

2024.02.23

php三元运算符用法
php三元运算符用法

本专题整合了php三元运算符相关教程,阅读专题下面的文章了解更多详细内容。

150

2025.10.17

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

761

2023.08.03

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

221

2023.09.04

java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

1570

2023.10.24

TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

26

2026.03.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
10分钟--Midjourney创作自己的漫画
10分钟--Midjourney创作自己的漫画

共1课时 | 0.1万人学习

Midjourney 关键词系列整合
Midjourney 关键词系列整合

共13课时 | 0.9万人学习

AI绘画教程
AI绘画教程

共2课时 | 0.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号