JavaScript運算符_賦值運算符（七）

錄：

什么是賦值運算符？
賦值運算符都有哪些？

一、什么是賦值運算符？

JavaScript中的賦值運算可以分為簡單賦值運算和復合賦值運算。簡單賦值運算是將賦值運算符（=）右邊表達式的值保存到左邊的變量中；而復合賦值運算混合了其他操作（例如算術運算操作）和賦值操作。

二、賦值運算符都有哪些？

1. = ：將右邊表達式的值賦給左邊的變量

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

<script type="text/javascript">
var a = 10;//這里就是值賦
</script>

</body>
</html>

2. += ：將運算符左邊的變量加上右邊表達式的值賦給左邊的變量

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

<script type="text/javascript">
var a = 1;
console.log( a+=2 ); //a=a+2

</script>

</body>
</html>

3. -= ：將運算符左邊的變量減去右邊表達式的值賦給左邊的變量

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

<script type="text/javascript">
var a = 1;
console.log( a-=2 ); //a=a-2

</script>

</body>
</html>

4. *= : 將運算符左邊的變量乘以右邊表達式的值賦給左邊的變量

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

<script type="text/javascript">
var a = 1;
console.log( a*=2 ); //a=a*2

</script>

</body>
</html>

5. /= : 將運算符左邊的變量除以右邊表達式的值賦給左邊的變量

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

<script type="text/javascript">
var a = 1;
console.log( a/=2 ); //a=a/2

</script>

</body>
</html>

6. %= : 將運算符左邊的變量用右邊表達式的值求模，并將結果賦給左邊的變量

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

<script type="text/javascript">
var a = 1;
console.log( a%=2 ); //a=a%2

</script>

</body>
</html>

最后來一個例子：某員工的月薪為5000元，扣除各項保險費用共500元，個人所得稅起征點是3500元，稅率為3%，計算該員工的實際收入是多少。代碼如下：

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>

<body>
<script type="text/javascript">
var salary = 5000;
var insurance = 500;
var threshold = 3500;
var tax = 0.03;
salary-=insurance;
var salary1=salary;
salary1-=threshold;
salary1*=tax;
salary-=salary1;
document.write("該員工的實際收入為"+salary+"元");
</script>
</body>
</html>

運行結果為：該員工的實際收入為4470元

下節預告：一元運算符

輯賦值是對現有數學和二進制邏輯運算符的擴展。我們先復習一下，然后看看把它們結合在一起能得到什么。

首先，我們來看下 JS 中條件運算符與無條件運算符之間的區別。

無條件 vs 有條件

數學運算符，例如 +是無條件的。

在const x = 1 + 2中，無論如何，我們總是將LHS添加到RHS中，并將結果分配給x。

LHS 和 RHS 是數學領域內的概念，意為等式左邊和等式右邊的意思，在我們現在的場景下就是賦值操作符的左側和右側。當變量出現在賦值操作符的左邊時，就進行 LHS 查詢；反之進行 RHS 查詢。

我們甚至可以編寫一些奇怪的代碼，例如const x = false +2。JS 首先將false的 LHS 轉換為Number，因此得到const x = Number（false）+ 2，其結果為const x = 0 + 2。它將 LHS 添加到RHS，最后將其分配給x，得出2。

邏輯運算符，例如 &&是有條件的

在const x = true && 0 + 2中，首先計算 LHS，它為true。因為 LHS 的值為true，所以我們接下來運行 RHS 操作，它的值為2，同時也運行賦值操作，結果是2。

與const x = false && 0 + 2相比，LHS 為 false，因此 RHS 被完全忽略。

你可能想知道為什么要避免計算RHS? 兩個常見的原因是獲得更好的性能和避免副作用。

二元邏輯運算符

&& || ??

在 JSX 中我們經常使用&&和||來有條件地渲染界面。??是nullish(空值)合并運算符，它是最近剛通過提案的，很快就會普及。它們都是二元邏輯運算符。

使用&&測試 LHS 的結果是否是真值。
使用||測試 LHS 的結果是否是虛值。
用 ?? 測試 LHS 是否無效。

虛值 vs Nullish

在 JS 中有哪些算是虛值呢？

null
undefined
false
NaN
0
"" (空字符串)

下面這兩姐妹被認為是 nullish 值。

null
undefined

值得注意的是，使用二元邏輯運算符不一定返回布爾值，而是返回表達式的LHS或RHS值。為了明確這些表達式類型的要點，重看一下 ECMAScript 文檔中的這句話是有幫助的：

&&或||產生的值不一定是布爾型的，而是兩個操作數表達式之中的一個值。

一些事例

// &&
/ /如果 LHS 是真值，計算并返回 RHS，否則返回 LHS

true && 100**2 // 10000
 
"Joe" && "JavaScript" // "JavaScript"
 
false && 100**2 // false
 
"" && 100**2 // ""
 
NaN && 100**2 // NaN
 
null && 100**2 // null
 
undefined && 100**2 // undefined

邏輯賦值運算符

&&= ||= ??=

這個運算符將賦值與條件邏輯運算符結合在一起，因此命名為**“邏輯賦值”** 。它們只是一種簡寫，例如，x && = y是x && (x = y) 的簡寫。

從邏輯賦值返回的值不是更新的賦值，而是已計算表達式的值。

由于先前的ECMAScript特性，比如默認參數和nullish合并操作符，你可以說在邏輯賦值所提供的功能中肯定存在一些冗余。雖然這種速記看起來很流暢，而且我相信當我們發現更多的用例時，它會派上用場的。

邏輯與賦值 ( &&= )

// 邏輯與
LHS &&= RHS
// 等價于 
LHS && (LHS = RHS)
 
// 事例
// if x is truthy, assign x to y, otherwise return x
// 如果 x 為真值，則將 y 賦值給 x， 否則返回 x
let x = 1
const y = 100
x &&= y // x 為 100
  
// 與上面對應的長的寫法
x && (x = y)

邏輯或賦值 ( ||= )

// 邏輯或
LHS ||= RHS
 
// 等價于
LHS || (LHS = RHS)
 
// 事例
// 如果 x 為真值，返回 x，否則將 y 賦值給 x
let x = NaN
const y = 100
x ||= y // x 為 100
 
// 與上面對應的長的寫法
x || (x = y)

邏輯 nullish 賦值 ( ??= )

// 邏輯 nullish
LHS ??= RHS
 
// 等價于
LHS ?? (LHS = RHS)
 
// 事例
// if x.z is nullish, assign x.z to y
let x = {}
let y = 100;
x.z ??= y // x 為 { z: 100 }
 
// 與上面對應的長的寫法
x.z ?? (x.z = y)

實現中邏輯賦值的例子

React中的JSX

let loading = true
const spinner = <Spinner />
loading &&= spinner

DOM

el.innerHTML ||= 'some default'

對象

// 如果對象沒有 onLoad 方法，則設置一個方法
const config = {};
config.onLoad ??= () => console.log('loaded!')

const myObject = { a: {} }
 
myObject.a ||= 'A'; // 被忽略，因為 myObject 中 a 的值為真值
myObject.b ||= 'B'; // myObject.b 會被創建，因為它不豐 myObject 中
 
// {
//  "a": {}
//  "b": "B"
// }
 
myObject.c &&= 'Am I seen?'; // 這里的 myObject.c 為虛值，所以什么都不會做

如何在項目中使用邏輯賦值

Chrome 已經支持邏輯賦值。為了向后兼容，請使用 transformer。如果您使用的是Babel，請安裝插件：

npm install @babel/plugin-proposal-logical-assignment-operators

并在 .babelrc 中添加發下內容：

{
  "plugins": ["@babel/plugin-proposal-logical-assignment-operators"]
}

邏輯賦值是一個全新的概念，所以還沒有太多相關的知識。如果你有其他關于邏輯賦值的好用法的例子，請在下面留下評論。

今天給到大家福利是《Vue.js源碼全方位深入解析（含Vue3.0源碼分析）》，領取方式，轉發+點贊，私信我 "源碼"，即可免費獲取。

感謝小伙伴的支持。

單版發布留言

分析：

1. 核心思路：點擊按鈕之后，就動態創建一個li，添加到ul里面。

2. 創建li的同時，把文本域里面的值通過li.innerHTML賦值給li

3. 如果想要新的留言后面顯示就用appendChild如果想要前面顯示就用insertBefore

刪除留言

分析：

1. 當我們把文本域里面的值賦值給li的時候，多添加一個刪除的鏈接

2. 需要把所有的鏈接獲取過來，當我們點擊當前的鏈接的時候，刪除當前鏈接所在的li

3.阻止鏈接跳轉需要添加JavaScript:void(0)；或者JavaScript；

源碼如下

在線咨詢

上一篇：一文帶你掌握CSS基礎：盒子模型（Margin、Border、Padding）
下一篇：HTML 字符實體

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商