JavaScript 逻辑赋值运算符

2025 年 3 月 18 日 | 6 分钟阅读

Javascript 逻辑赋值运算符可用于将逻辑运算符与默认表达式和其他表达式结合使用。它使用单个运算符在两个表达式或值之间进行操作。ES2021 提供了三种逻辑赋值运算符，如下所示：

逻辑与赋值运算符
逻辑或赋值运算符
空值合并赋值运算符

下表显示了基本逻辑运算符和逻辑赋值运算符之间的区别。

ES 逻辑赋值运算符	基本逻辑运算符
a &&= b	a && (a = b)
a \|\|= b	a \|\| (a = b)
a ??= b	a ?? (a = b);

逻辑与赋值运算符（&&=）

`&&=` 符号是“逻辑与赋值运算符”，用于连接两个变量。如果初始值为真，则使用第二个值。它从左到右计算。

语法

以下语法显示了带有两个值的逻辑与赋值运算符。

示例

以下示例在 JavaScript 中使用“逻辑与赋值运算符”处理多个值。

示例 1

以下示例展示了 JavaScript 中“与赋值运算符”的基本值。

<!DOCTYPE html>
<html>
<head>
<title> JavaScript Logical Assignment Operators </title>
</head>
<body>
<h3> JavaScript Logical Assignment Operators </h3>
<p> JavaScript Logical AND Assignment Operator work with the basic values. </p>
<button type = "button" onclick = "clickHere();"> Click Here! </button>
<p id = "value1"> </p>
<p id = "value2"> </p>
<p id = "value3"> </p>
<script>
function clickHere(){
var value1 = 0;
var value2 =  50;
var value3 =  100;
var value4 =  983;
var add1 = value1 &&= value2;
document.getElementById('value1').innerHTML = add1;
var add2 = value2 &&= value3;
document.getElementById('value2').innerHTML = add2;
var add3 = value2 &&= value4;
document.getElementById('value3').innerHTML = add3;
}
</script>
</body>
</html>

输出

该图像显示了“逻辑与赋值运算符的数据”作为输出。

示例 2

以下示例展示了 JavaScript 中的“与赋值运算符”哈希。

<!DOCTYPE html>
<html>
<head>
<title> JavaScript Logical Assignment Operators </title>
</head>
<body>
<h3> JavaScript Logical Assignment Operators </h3>
<p> JavaScript Logical AND Assignment Operator work with the basic values. </p>
<button type = "button" onclick = "clickHere();"> Click Here! </button>
<p> Output shows in Console Tab </p>
<script>
function clickHere(){
let Student1 = {
firstName: 'Ram',
lastName: 'Seth',
};
console.log("JavaScript Logical AND Assignment Operators ");
Student1.firstName &&= 'devid';
console.log(Student1);
console.log(Student1.firstName);
Student1.lastName &&= 'Seth';
console.log(Student1.lastName);
Student1.lastName &&= 'simple';
console.log(Student1.lastName);
}
</script>
</body>
</html>

输出

该图像显示了“逻辑与赋值运算符的数据”作为输出。

Example3

以下示例展示了 JavaScript 中“与赋值运算符”的数组。

<!DOCTYPE html>
<html>
<head>
<title> JavaScript Logical Assignment Operators </title>
</head>
<body>
<h3> JavaScript Logical Assignment Operators </h3>
<p> JavaScript Logical AND Assignment Operator work with the Array values. </p>
<button type = "button" onclick = "clickHere();"> Click Here! </button>
<p id = "print_data"> </p>
<script>
function clickHere(){
let array_var = [4, "learn", null, "Good", undefined, []]
// Replace with arrays truthy values with input value (TpointTech)
array_var.forEach((item, index)=>{
array_var[index] &&= "TpointTech"
})
document.getElementById("print_data").innerText = array_var.toString();
}
</script>
</body>
</html>

输出

该图像显示了“逻辑与赋值运算符的数据”作为输出。

逻辑或赋值运算符（||=）

`||=` 是两个值之间的“逻辑或赋值运算符”。如果初始值为假，则使用第二个值。它从左到右计算。

语法

以下语法显示了带有两个值的逻辑或赋值运算符。

示例

以下示例在 JavaScript 中使用“逻辑或赋值运算符”处理多个值。

示例 1

以下示例展示了 JavaScript 中“逻辑或赋值”的基本值。在这里，我们可以使用简单的数值。

<!DOCTYPE html>
<html>
<head>
<title> JavaScript Logical Assignment Operators </title>
</head>
<body>
<h3> JavaScript Logical Assignment Operators </h3>
<p> JavaScript Logical OR Assignment Operator works with the basic values. </p>
<button type = "button" onclick = "clickHere();"> Click Here! </button>
<p id = "value1"> </p>
<p id = "value2"> </p>
<p id = "value3"> </p>
<script>
function clickHere(){
var value1 = 0;
var value2 =  50;
var value3 =  100;
var value4 =  983;
var add1 = value1 ||= value2;
document.getElementById('value1').innerHTML = add1;
var add2 = value2 ||= value3;
document.getElementById('value2').innerHTML = add2;
var add3 = value2 ||= value4;
document.getElementById('value3').innerHTML = add3;
}
</script>
</body>
</html>

输出

该图像显示了“逻辑或赋值运算符的数据”作为输出。

示例 2

以下示例展示了 JavaScript 中的“或赋值运算符”哈希。

<!DOCTYPE html>
<html>
<head>
<title> JavaScript Logical Assignment Operators </title>
</head>
<body>
<h3> JavaScript Logical Assignment Operators </h3>
<p> JavaScript Logical OR Assignment Operator works with the basic values. </p>
<p> Output shows in Console Tab </p>
<script>
let Student1 = {
firstName: 'Ram',
lastName: 'Seth',
};
console.log("JavaScript Logical OR Assignment Operators ");
Student1.firstName ||= 'devid';
console.log(Student1);
console.log(Student1.firstName);
Student1.lastName ||= 'Seth';
console.log(Student1.lastName);
Student1.lastName ||= 'simple';
console.log(Student1.lastName);
</script>
</body>
</html>

输出

该图像显示了“逻辑或赋值运算符的数据”作为输出。

Example3

以下示例展示了 JavaScript 中“或赋值运算符”的数组。

<!DOCTYPE html>
<html>
<head>
<title> JavaScript Logical Assignment Operators </title>
</head>
<body>
<h3> JavaScript Logical Assignment Operators </h3>
<p> JavaScript Logical OR Assignment Operator works with the Array values. </p>
<button type = "button" onclick = "clickHere();"> Click Here! </button>
<p id = "print_data"> </p>
<script>
function clickHere(){
let array_var = [4, "learn", null, "Good", undefined, []]
// Replace with arrays truthy values with input value (TpointTech)
array_var.forEach((item, index)=>{
array_var[index] ||= "TpointTech"
})
document.getElementById("print_data").innerText = array_var.toString();
}
</script>
</body>
</html>

输出

该图像显示了“逻辑或赋值运算符的数据”作为输出。

空值合并赋值运算符（??=）

`??=` 是两个值之间的“空值合并赋值运算符”。如果第一个值是 `undefined` 或 `null`，则分配第二个值。它从左到右计算。

语法

以下语法显示了带有两个值的逻辑空值赋值运算符。

示例

以下示例在 JavaScript 中使用“逻辑空值赋值运算符”处理多个值。

示例 1

以下示例展示了 JavaScript 中“逻辑空值赋值”的基本值。在这里，我们可以使用简单的数值。

<!DOCTYPE html>
<html>
<head>
<title> JavaScript Logical Assignment Operators </title>
</head>
<body>
<h3> JavaScript Logical Assignment Operators </h3>
<p> JavaScript Logical nullish Assignment Operator work with the basic values. </p>
<button type = "button" onclick = "clickHere();"> Click Here! </button>
<p id = "value1"> </p>
<p id = "value2"> </p>
<p id = "value3"> </p>
<script>
function clickHere(){
var value1 = 0;
var value2 =  50;
var value3 =  100;
var value4 =  983;
var add1 = value1 ??= value2;
document.getElementById('value1').innerHTML = add1;
var add2 = value4 ??= value1;
document.getElementById('value2').innerHTML = add2;
var add3 = value1 ??= value3;
document.getElementById('value3').innerHTML = add3;
}
</script>
</body>
</html>

输出

该图像显示了“逻辑空值赋值运算符的数据”作为输出。

示例 2

以下示例展示了 JavaScript 中“逻辑空值赋值”的哈希值。

<!DOCTYPE html>
<html>
<head>
<title> JavaScript Logical Assignment Operators </title>
</head>
<body>
<h3> JavaScript Logical Assignment Operators </h3>
<p> JavaScript Logical Nullish Assignment Operator works with the hash values. </p>
<p id = "print_data"> Please See the console tab to output data </p>
<script>
let student = {
studentname: 'Devid'
};
student.username ??= 'undefined';
student.nickname ??= null;
student.studentname ??= null;
console.log("JavaScript Logical Nullish Assignment Operator")
console.log(student);
</script>
</body>
</html>

输出

该图像显示了“逻辑空值赋值运算符的数据”作为输出。

Example3

以下示例展示了 JavaScript 中“逻辑空值赋值”的数组值。空值运算符使用 `null` 和“jtp”值来显示其功能。

<!DOCTYPE html>
<html>
<head>
<title> JavaScript Logical Assignment Operators </title>
</head>
<body>
<h3> JavaScript Logical Assignment Operators </h3>
<p> JavaScript Logical Nullish Assignment Operator works with the Array values. </p>
<button type = "button" onclick = "clickHere();"> Click Here! </button>
<p id = "print_data"> </p>
<p id = "print_data1"> </p>
<script>
function clickHere(){
let array_var = [null, "learn", null, "Good", undefined, []]
// Replace with arrays truthy values with input value
array_var.forEach((item, index)=>{
array_var[index] ??= null
})
document.getElementById("print_data").innerText = array_var.toString();
array_var.forEach((items, indexs)=>{
array_var[indexs] ??= "jtp"
})
document.getElementById("print_data1").innerText = array_var.toString();
}
</script>
</body>
</html>

输出

该图像显示了“逻辑空值赋值运算符的数据”作为输出。

结论

JavaScript 逻辑赋值运算符有助于在所有数据格式中对两个输入之间的逻辑条件进行操作。在 JavaScript 语言中，“与”、“或”和空值逻辑运算由这些运算符实现。

下一主题JavaScript 数字分隔符

JavaScript 逻辑赋值运算符

逻辑与赋值运算符（&&=）

逻辑或赋值运算符（||=）

空值合并赋值运算符（??=）

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

JavaScript 逻辑赋值运算符

逻辑与赋值运算符（&&=）

逻辑或赋值运算符（||=）

空值合并赋值运算符（??=）

结论

相关帖子

如何使用 JavaScript 创建图像映射

获取和设置元素的滚动位置

JavaScript onbeforeunload 事件

Javascript Mouseenter 和 mouseleave 事件

JavaScript 一元运算符

preventDefault() 和 stopPropagation() 方法之间的区别

JavaScript 中的假值

JavaScript string repeat() 方法

JavaScript Time Now

JavaScript 中的 Promise 是什么？

订阅 Tpoint Tech

联系信息

关注我们