整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
JavaScript中的賦值運(yùn)算可以分為簡(jiǎn)單賦值運(yùn)算和復(fù)合賦值運(yùn)算。簡(jiǎn)單賦值運(yùn)算是將賦值運(yùn)算符（=）右邊表達(dá)式的值保存到左邊的變量中；而復(fù)合賦值運(yùn)算混合了其他操作（例如算術(shù)運(yùn)算操作）和賦值操作。
1. = ： 將右邊表達(dá)式的值賦給左邊的變量
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <script type="text/javascript"> var a = 10;//這里就是值賦 </script> </body> </html>
2. += ： 將運(yùn)算符左邊的變量加上右邊表達(dá)式的值賦給左邊的變量
<!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. -= ： 將運(yùn)算符左邊的變量減去右邊表達(dá)式的值賦給左邊的變量
<!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. *= : 將運(yùn)算符左邊的變量乘以右邊表達(dá)式的值賦給左邊的變量
<!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. /= : 將運(yùn)算符左邊的變量除以右邊表達(dá)式的值賦給左邊的變量
<!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. %= : 將運(yùn)算符左邊的變量用右邊表達(dá)式的值求模，并將結(jié)果賦給左邊的變量
<!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>
最后來(lái)一個(gè)例子：某員工的月薪為5000元，扣除各項(xiàng)保險(xiǎn)費(fèi)用共500元，個(gè)人所得稅起征點(diǎn)是3500元，稅率為3%，計(jì)算該員工的實(shí)際收入是多少。代碼如下：
<!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("該員工的實(shí)際收入為"+salary+"元");
</script>
</body>
</html>運(yùn)行結(jié)果為：該員工的實(shí)際收入為4470元
輯賦值是對(duì)現(xiàn)有數(shù)學(xué)和二進(jìn)制邏輯運(yùn)算符的擴(kuò)展。我們先復(fù)習(xí)一下，然后看看把它們結(jié)合在一起能得到什么。
首先，我們來(lái)看下 JS 中條件運(yùn)算符與無(wú)條件運(yùn)算符之間的區(qū)別 。
在const x = 1 + 2中，無(wú)論如何，我們總是將LHS添加到RHS中，并將結(jié)果分配給x。
LHS 和 RHS 是數(shù)學(xué)領(lǐng)域內(nèi)的概念，意為等式左邊和等式右邊的意思，在我們現(xiàn)在的場(chǎng)景下就是賦值操作符的左側(cè)和右側(cè)。當(dāng)變量出現(xiàn)在賦值操作符的左邊時(shí)，就進(jìn)行 LHS 查詢；反之進(jìn)行 RHS 查詢 。
我們甚至可以編寫一些奇怪的代碼，例如const x = false +2。JS 首先將false的 LHS 轉(zhuǎn)換為Number，因此得到const x = Number（false）+ 2，其結(jié)果為const x = 0 + 2。它將 LHS 添加到RHS，最后將其分配給x，得出2。
在const x = true && 0 + 2中，首先計(jì)算 LHS，它為true。因?yàn)?LHS 的值為true，所以我們接下來(lái)運(yùn)行 RHS 操作，它的值為2，同時(shí)也運(yùn)行賦值操作，結(jié)果是2。
與const x = false && 0 + 2相比，LHS 為 false，因此 RHS 被完全忽略。
你可能想知道為什么要避免計(jì)算RHS? 兩個(gè)常見的原因是獲得更好的性能和避免副作用 。
在 JSX 中我們經(jīng)常使用&&和||來(lái)有條件地渲染界面。??是nullish(空值)合并運(yùn)算符，它是最近剛通過(guò)提案的，很快就會(huì)普及。它們都是 二元邏輯運(yùn)算符。
在 JS 中有哪些算是虛值呢 ？
下面這兩姐妹被認(rèn)為是 nullish 值 。
值得注意的是，使用二元邏輯運(yùn)算符不一定返回布爾值，而是返回表達(dá)式的LHS或RHS值。為了明確這些表達(dá)式類型的要點(diǎn)，重看一下 ECMAScript 文檔中的這句話是有幫助的：
&&或||產(chǎn)生的值不一定是布爾型的，而是兩個(gè)操作數(shù)表達(dá)式之中的一個(gè)值。
// &&
/ /如果 LHS 是真值，計(jì)算并返回 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
這個(gè)運(yùn)算符將賦值與條件邏輯運(yùn)算符結(jié)合在一起，因此命名為**“邏輯賦值”** 。它們只是一種簡(jiǎn)寫， 例如，x && = y是x && (x = y) 的簡(jiǎn)寫。
從邏輯賦值返回的值不是更新的賦值，而是已計(jì)算表達(dá)式的值。
由于先前的ECMAScript特性，比如默認(rèn)參數(shù)和nullish合并操作符，你可以說(shuō)在邏輯賦值所提供的功能中肯定存在一些冗余。雖然這種速記看起來(lái)很流暢，而且我相信當(dāng)我們發(fā)現(xiàn)更多的用例時(shí)，它會(huì)派上用場(chǎng)的。
// 邏輯與
LHS &&= RHS
// 等價(jià)于
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
// 與上面對(duì)應(yīng)的長(zhǎng)的寫法
x && (x = y)
// 邏輯或
LHS ||= RHS
// 等價(jià)于
LHS || (LHS = RHS)
// 事例
// 如果 x 為真值，返回 x，否則將 y 賦值給 x
let x = NaN
const y = 100
x ||= y // x 為 100
// 與上面對(duì)應(yīng)的長(zhǎng)的寫法
x || (x = y)
// 邏輯 nullish
LHS ??= RHS
// 等價(jià)于
LHS ?? (LHS = RHS)
// 事例
// if x.z is nullish, assign x.z to y
let x = {}
let y = 100;
x.z ??= y // x 為 { z: 100 }
// 與上面對(duì)應(yīng)的長(zhǎng)的寫法
x.z ?? (x.z = y)
React中的JSX
let loading = true
const spinner = <Spinner />
loading &&= spinner
DOM
el.innerHTML ||= 'some default'
對(duì)象
// 如果對(duì)象沒有 onLoad 方法，則設(shè)置一個(gè)方法
const config = {};
config.onLoad ??= () => console.log('loaded!')
const myObject = { a: {} }
myObject.a ||= 'A'; // 被忽略，因?yàn)?nbsp;myObject 中 a 的值為真值
myObject.b ||= 'B'; // myObject.b 會(huì)被創(chuàng)建，因?yàn)樗回S myObject 中
// {
// "a": {}
// "b": "B"
// }
myObject.c &&= 'Am I seen?'; // 這里的 myObject.c 為虛值，所以什么都不會(huì)做
Chrome 已經(jīng)支持邏輯賦值。為了向后兼容，請(qǐng)使用 transformer。如果您使用的是Babel，請(qǐng)安裝插件：
npm install @babel/plugin-proposal-logical-assignment-operators
并在 .babelrc 中添加發(fā)下內(nèi)容：
{
"plugins": ["@babel/plugin-proposal-logical-assignment-operators"]
}
邏輯賦值是一個(gè)全新的概念，所以還沒有太多相關(guān)的知識(shí)。如果你有其他關(guān)于邏輯賦值的好用法的例子，請(qǐng)?jiān)谙旅媪粝略u(píng)論 。
今天給到大家福利是《Vue.js源碼全方位深入解析 （含Vue3.0源碼分析）》，領(lǐng)取方式，轉(zhuǎn)發(fā)+點(diǎn)贊，私信我 "源碼"， 即可免費(fèi)獲取。
感謝小伙伴的支持。
單版發(fā)布留言
分析：
1. 核心思路：點(diǎn)擊按鈕之后，就動(dòng)態(tài)創(chuàng)建一個(gè)li，添加到ul里面。
2. 創(chuàng)建li的同時(shí)，把文本域里面的值通過(guò)li.innerHTML賦值給li
3. 如果想要新的留言后面顯示就用appendChild如果想要前面顯示就用insertBefore
刪除留言
分析：
1. 當(dāng)我們把文本域里面的值賦值給li的時(shí)候，多添加一個(gè)刪除的鏈接
2. 需要把所有的鏈接獲取過(guò)來(lái)，當(dāng)我們點(diǎn)擊當(dāng)前的鏈接的時(shí)候，刪除當(dāng)前鏈接所在的li
3.阻止鏈接跳轉(zhuǎn)需要添加JavaScript:void(0)；或者JavaScript；
源碼如下
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
