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

무조건부 대 조건부

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

const x = 1 + 2에서는 무슨 일이 있어도 항상 RHS에 LHS를 추가합니다. 결과를 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를 계산합니다. , 이는 참입니다. LHS의 값이 true이므로 다음으로 값이 2인 RHS 작업을 실행하고 할당 작업도 실행하며 결과는 2입니다. 🎜🎜const x = false && 0 + 2와 비교하면 LHS는 false이므로 RHS는 완전히 무시됩니다. 🎜🎜RHS 계산을 피해야 하는 이유가 궁금하신가요? 두 가지 일반적인 이유는 더 나은 성능을 얻고 부작용을 피하기 위해서입니다. 🎜

이진 논리 연산자

&& || ??

🎜JSX에서는 우리가 자주 사용하는 && 및 ||를 사용하여 인터페이스를 조건부로 렌더링합니다. ??는 nullish(null 값) 통합 연산자로, 최근 승인되어 곧 인기를 얻게 될 것입니다. 이들은 모두 이진 논리 연산자입니다. 🎜

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

가상 가치 vs Nullish

🎜JS의 가상 가치란 무엇인가요? 🎜

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

🎜다음 두 자매는 null 값으로 간주됩니다. 🎜

• null
• 정의되지 않음

🎜이항 논리 연산자를 사용한다고 해서 반드시 부울 값이 반환되는 것은 아니지만 주목할 가치가 있습니다. 반환된 표현식의 LHS 또는 RHS 값입니다. 이러한 표현식 유형의 요점을 명확히 하려면 ECMAScript 문서에서 다음 문장을 다시 방문하는 것이 도움이 됩니다. 🎜

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

몇 가지 예

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

논리 할당 연산자

&&= ||= ??=

🎜이 연산자는 할당과 조건부 논리 연산자를 결합하므로 이름이 "논리 할당"입니다. 예를 들어 x && = y는 x && (x = y)의 약어입니다. 🎜🎜논리 할당에서 반환되는 값은 업데이트된 할당이 아니라 평가된 표현식의 값입니다. 🎜🎜기본 인수 및 null 병합 연산자와 같은 이전 ECMAScript 기능으로 인해 논리적 할당에서 제공하는 기능에 확실히 중복성이 있다고 주장할 수 있습니다. 이 약어는 매끄럽게 보이지만 더 많은 사용 사례를 발견하면 유용할 것이라고 확신합니다. 🎜

논리 AND 할당( &&= )

rreee

논리 OR 할당( ||= )

rrreee

논리적 null 할당(??=)

rrreee

구현 중인 논리적 할당의 예

🎜 React의 JSX🎜rrreee🎜DOM🎜rrreee🎜객체🎜rrreeerrreee

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

🎜Chrome은 이미 논리적 할당을 지원합니다. 이전 버전과의 호환성을 위해 변환기를 사용하십시오. Babel을 사용하시는 분은 🎜rrreee🎜 플러그인을 설치하시고 .babelrc에 다음 내용을 추가해주세요: 🎜rrreee🎜논리 할당은 새로운 개념이라 관련 지식이 많지 않습니다. 아직 . 논리적 할당의 다른 좋은 활용 사례가 있다면 아래에 댓글로 남겨주세요. 🎜

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

저자: Joe Seifi

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

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

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