JavaScript 赋值


目录

    显示目录


JavaScript 赋值运算符

赋值运算符将值赋给 JavaScript 变量。

Operator Example Same As
= x = y x = y
+= x += y x = x + y
-= x -= y x = x - y
*= x *= y x = x * y
/= x /= y x = x / y
%= x %= y x = x % y
**= x **= y x = x ** y

轮班分配运算符

Operator Example Same As
<<= x <<= y x = x << y
>>= x >>= y x = x >> y
>>>= x >>>= y x = x >>> y

按位赋值运算符

Operator Example Same As
&= x &= y x = x & y
^= x ^= y x = x ^ y
|= x |= y x = x | y

逻辑赋值运算符

Operator Example Same As
&&= x &&= y x = x && (x = y)
||= x ||= y x = x || (x = y)
??= x ??= y x = x ?? (x = y)

笔记

逻辑赋值运算符是 ES2020


= 运算符

简单赋值运算符将值分配给变量。

简单的作业示例

let x = 10;

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>Simple Assignment</h2>
<h3>The = Operator</h3>

<p id="demo"></p>

<script>
let x = 10;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>

</body>
</html>
let x = 10 + y;

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>Simple Assignment</h2>
<h3>The = Operator</h3>

<p id="demo"></p>

<script>
let y = 50
let x = 10 + y;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>

</body>
</html>

+= 运算符

加法赋值运算符为变量添加一个值。

加法作业示例

let x = 10;
x += 5;

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>Addition Assignment</h2>
<h3>The += Operator</h3>

<p id="demo"></p>

<script>
let x = 10;
x += 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>

</body>
</html>
let text = "Hello";
text += " World";

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>Addition Assignment</h2>
<h3>The += Operator</h3>

<p id="demo"></p>

<script>
let text = "Hello";
text += " World";
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

-= 运算符

减法赋值运算符从变量中减去一个值。

减法赋值示例

let x = 10;
x -= 5;

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>Subtraction Assignment</h2>
<h3>The -= Operator</h3>

<p id="demo"></p>

<script>
let x = 10;
x -= 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>

</body>
</html>

*= 运算符

乘法赋值运算符将变量相乘。

乘法赋值示例

let x = 10;
x *= 5;

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>Multiplication Assignment</h2>
<h3>The *= Operator</h3>

<p id="demo"></p>

<script>
let x = 10;
x *= 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>

</body>
</html>

**= 运算符

求幂赋值运算符计算变量的操作数次方。

求幂赋值示例

let x = 10;
x **= 5;

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>Exponentiation Assignment</h2>
<h3>The **= Operator</h3>

<p id="demo"></p>

<script>
let x = 10;
x **= 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>

</body>
</html>

/= 运算符

除法赋值运算符对变量进行除法。

部门分配示例

let x = 10;
x /= 5;

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>Division Assignment</h2>
<h3>The /= Operator</h3>

<p id="demo"></p>

<script>
let x = 10;
x /= 5;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

%= 运算符

余数赋值运算符将余数赋给变量。

余数分配示例

let x = 10;
x %= 5;

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>Remainder Assignment</h2>
<h3>The %= Operator</h3>

<p id="demo"></p>

<script>
let x = 10;
x %= 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>

</body>
</html>


<<= 运算符

左移赋值运算符左移变量。

左移赋值示例

let x = -100;
x <<= 5;

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>Left Shift Assignment</h2>
<h3>The &lt;&lt;= Operator</h3>

<p id="demo"></p>

<script>
let x = -100;
x <<= 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>

</body>
</html>

>>= 运算符

右移赋值运算符右移变量(有符号)。

右移赋值示例

let x = -100;
x >>= 5;

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>Right Shift Assignment</h2>
<h3>The &gt;&gt;= Operator</h3>

<p id="demo"></p>

<script>
let x = -100;
x >>= 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>

</body>
</html>

>>>= 运算符

无符号右移赋值运算符右移变量(无符号)。

无符号右移赋值示例

let x = -100;
x >>>= 5;

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>Right Shift Assignment</h2>
<h3>The &gt;&gt;&gt;= Operator</h3>

<p id="demo"></p>

<script>
let x = -100;
x >>>= 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>

</body>
</html>

&= 运算符

按位与赋值运算符对两个操作数进行按位与运算 并将结果赋给变量。

按位与赋值示例

let x = 10;
x &= 5;

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>Bitwise AND Assignment</h2>
<h3>The &amp;= Operator</h3>

<p id="demo"></p>

<script>
let x = 100;
x &= 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>

</body>
</html>

|= 运算符

按位或赋值运算符对两个操作数进行按位或运算 并将结果赋给变量。

按位或赋值示例

let x = 10;
x |= 5;

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>Bitwise OR Assignment</h2>
<h3>The |= Operator</h3>

<p id="demo"></p>

<script>
let x = 100;
x |= 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>

</body>
</html>

^= 运算符

按位异或赋值运算符对两个操作数进行按位异或运算 并将结果赋给变量。

按位异或赋值示例

let x = 10;
x ^= 5;

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>Bitwise XOR Assignment</h2>
<h3>The ^= Operator</h3>

<p id="demo"></p>

<script>
let x = 100;
x ^= 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>

</body>
</html>

&&= 运算符

逻辑 AND 赋值运算符用于两个值之间。

如果第一个值为 true,则分配第二个值。

逻辑与赋值示例

let x = 10;
x &&= 5;

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>Logical AND Assignment</h2>
<h3>The &amp;&amp;= Operator</h3>
<p>If the first value is true, the second value is assigned.</p>

<p id="demo"></p>

<script>
let x = 100;
x &&= 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>

</body>
</html>

&&= 运算符是 ES2020 的一项功能。


||= 运算符

逻辑或赋值运算符用于两个值之间。

如果第一个值为 false,则分配第二个值。

逻辑或赋值示例

let x = 10;
x ||= 5;

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>Logical OR Assignment</h2>
<h3>The ||= Operator</h3>

<p>If the first value is false, the second value is assigned:</p>
<p id="demo"></p>

<script>
let x = undefined;
x ||= 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>

</body>
</html>

||= 运算符是 ES2020 的一项功能。


??= 运算符

空合并赋值运算符用于两个值之间。

如果第一个值未定义或为 null,则分配第二个值。

空合并赋值示例

let x;
x ??= 5;

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>The ??= Operator</h2>
<p>The ??= operator is used between two values. If the first value is undefined or null, the second value is assigned.</p>

<p id="demo"></p>

<script>
let x;
document.getElementById("demo").innerHTML = x ??= 5; 
</script>

</body>
</html>

??= 运算符是 ES2020 的一项功能。