JS의 논리적 할당 연산자에 대한 심층 분석

이 글에서는 JavaScript 논리 할당 연산자에 대해 심도 있게 논의합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

논리 할당은 기존 수학 및 이진 논리 연산자의 확장입니다. 먼저 그것들을 검토한 다음 그것들을 결합하여 무엇을 얻을 수 있는지 살펴보겠습니다.

먼저 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

무조건부 대 조건부

+와 같은 수학 연산자는 무조건적입니다.

LHS와 RHS는 수학 분야의 개념으로 방정식의 왼쪽과 오른쪽을 의미합니다. 현재 시나리오에서는 할당 연산자의 왼쪽과 오른쪽을 의미합니다. 할당 연산자의 왼쪽에 변수가 나타나면 LHS 쿼리가 수행되고, 그렇지 않으면 RHS 쿼리가 수행됩니다.

&&와 같은 논리 연산자는 조건부입니다

이진 논리 연산자

&& || ??

• LHS 결과가 참인지 테스트하려면 &&를 사용하세요.
• ||를 사용하여 LHS의 결과가 허수값인지 테스트합니다.
• ??를 사용하여 LHS가 유효하지 않은지 테스트하세요.

가상 가치 vs Nullish

• null
• 정의되지 않음
• false
• NaN
• 0
• "" ( 빈 문자열)

• null
• 정의되지 않음

&& 또는 ||는 Must가 아닌 값을 생성합니다. 부울 유형이어야 하지만 두 피연산자 표현식의 값 중 하나여야 합니다.

몇 가지 예

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

논리 할당 연산자

&&= ||= ??=

논리 AND 할당( &&= )

논리 OR 할당( ||= )

논리적 null 할당(??=)

구현 중인 논리적 할당의 예

JSX를 사용하는 방법 프로젝트 논리적 할당

원본 주소: https://seifi.org/javascript/javascript-logical-location-operators-deep-dive.html

저자: Joe Seifi

번역 주소: https://segmentfault.com/a/1190000039923017

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 JS의 논리적 할당 연산자에 대한 심층 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!