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 中条件运算符与无条件运算符之间的区别 。
在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(空值)合并运算符,它是最近刚通过提案的,很快就会普及。它们都是 二元逻辑运算符。
在 JS 中有哪些算是虚值呢 ?
下面这两姐妹被认为是 nullish 值 。
值得注意的是,使用二元逻辑运算符不一定返回布尔值,而是返回表达式的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
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;
源码如下
*请认真填写需求信息,我们会在24小时内与您取得联系。