Recommended tutorial: "JavaScript Video Tutorial"
Logical assignment is an extension of existing mathematical and binary logic operators. Let’s review them first and then see what we get by combining them.
First, let’s take a look at the difference between conditional operator
and unconditional operator
in JS.
are unconditional. In const x = 1 2
, no matter what, we always add LHS
to RHS
and assign the result to x
.
LHS and RHS are concepts in the field of mathematics, meaning the left side of the equation and the right side of the equation. In our current scenario, they are the left side and right side of the assignment operator. When the variable appears on the left side of the assignment operator, an LHS query is performed; otherwise, an RHS query is performed.
We can even write some weird code like const x = false 2
. JS first converts the LHS of false
to Number
, so we get const x = Number (false) 2
, and the result is const x = 0 2
. It adds the LHS to the RHS and finally assigns it to x
, resulting in 2
.
&&
are conditional In const x = true && 0 2
, the LHS is calculated first, which is true
. Because the value of LHS is true
, we next run the RHS operation, whose value is 2, and also run the assignment operation, and the result is 2
.
Compared to const x = false && 0 2
, the LHS is false
, so the RHS is completely ignored.
You may be wondering why you should avoid calculating the RHS? Two common reasons are to get better performance and to avoid side effects
.
In JSX we often use &&
and ||
to conditionally render the interface. ??
is the nullish(null value)
coalescing operator, which was recently approved and will be popularized soon. They are all binary logical operators.
&&
to test whether the result of LHS is a true value. ||
to test whether the result of LHS is an imaginary value. ??
to test whether the LHS is invalid. What are the virtual values in JS?
The following two sisters are considered nullish values.
It is worth noting that using binary logical operators does not necessarily return a Boolean value
, but Is the LHS
or RHS
value of the returned expression. To clarify the point of these expression types, it is helpful to revisit this sentence from the ECMAScript documentation:
&&
or||
produces values that are not Must be of type Boolean, but one of the values in the two operand expressions.
// && / /如果 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
This operator combines assignment with conditional logical operators Together, hence the name "logical assignment". They are just abbreviations. For example, x && = y
is the abbreviation of x && (x = y)
.
The value returned from a logical assignment is not the updated assignment, but the value of the evaluated expression.
Due to previous ECMAScript features such as default arguments and the nullish coalescing operator, you could argue that there is definitely some redundancy in the functionality provided by logical assignment. This shorthand seems smooth though, and I'm sure it will come in handy as we discover more use cases.
// 逻辑与 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)
JSX in React
let loading = true const spinner = <Spinner /> loading &&= spinner
DOM
el.innerHTML ||= 'some default'
Object
// 如果对象没有 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 already supports logical assignment. For backward compatibility, use transformers. If you are using Babel, please install the plug-in:
npm install @babel/plugin-proposal-logical-assignment-operators
and add the following content in .babelrc
:
{ "plugins": ["@babel/plugin-proposal-logical-assignment-operators"] }
Logical assignment is a new concept, so There is not much relevant knowledge yet. If you have other examples of good usage of logical assignment, please leave a comment below.
English original address: https://seifi.org/javascript/javascript-logical-assignment-operators-deep-dive.html
Author: Joe Seifi
For more programming-related knowledge, please visit: Introduction to Programming! !
The above is the detailed content of Detailed explanation of logical operators in JavaScript. For more information, please follow other related articles on the PHP Chinese website!