추천 튜토리얼: "JavaScript 비디오 튜토리얼"
논리 할당은 기존 수학 및 이진 논리 연산자의 확장입니다. 먼저 그것들을 검토한 다음 그것들을 결합하여 무엇을 얻는지 살펴보겠습니다.
먼저 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(空值)
合并运算符,它是最近刚通过提案的,很快就会普及。它们都是 二元逻辑运算符。
&&
测试 LHS 的结果是否是真值。||
测试 LHS 的结果是否是虚值。??
测试 LHS 是否无效。在 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
+
와 같은 수학 연산자는 무조건입니다. 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가 먼저 계산됩니다. 즉,사실
. LHS의 값이true
이므로 다음으로 값이 2인 RHS 작업을 실행하고 할당 작업도 실행하며 결과는2
입니다.const x = false && 0 + 2
와 비교하면 LHS는false
이므로 RHS는 완전히 무시됩니다.
RHS 계산을 피해야 하는 이유가 궁금하신가요? 두 가지 일반적인 이유는 더 나은 성능을 얻고 부작용을 피하기 위해서
입니다. 이진 논리 연산자
&& || ??
JSX에서는 조건부 렌더링을 위해 &&
및 ||
를 자주 사용합니다. 인터페이스. ??
는 nullish(null 값)
통합 연산자로, 최근 승인되어 곧 인기를 얻게 될 것입니다. 이들은 모두 이진 논리 연산자입니다.
&&
를 사용하세요. ||
를 사용하여 LHS의 결과가 허수값인지 테스트합니다. ??
를 사용하여 LHS가 유효하지 않은지 테스트하세요. 부울 값
이 반환되는 것은 아니지만 주목할 가치가 있습니다. 반환된 표현식의 LHS
또는 RHS
값입니다. 이러한 표현식 유형의 요점을 파악하려면 ECMAScript 문서에서 다음 문장을 다시 방문하는 것이 도움이 됩니다. 🎜🎜 &&
또는 ||
에서 생성된 값이 반드시 부울일 필요는 없습니다. 그러나 두 피연산자 표현식 중 하나입니다. 🎜{ "plugins": ["@babel/plugin-proposal-logical-assignment-operators"] }
x && = y
는 x && (x = y)
의 약어입니다. 🎜🎜논리 할당에서 반환되는 값은 업데이트된 할당이 아니라 평가된 표현식의 값입니다. 🎜🎜기본 인수 및 null 병합 연산자와 같은 이전 ECMAScript 기능으로 인해 논리적 할당에서 제공하는 기능에 확실히 중복성이 있다고 주장할 수 있습니다. 하지만 이 약칭은 매끄럽게 보이며 더 많은 사용 사례를 발견하면 유용할 것이라고 확신합니다. 🎜.babelrc
에 다음 내용을 추가해주세요: 🎜rrreee🎜논리 할당은 새로운 개념이라 관련 지식이 많지 않습니다. 아직 . 논리적 할당의 다른 좋은 활용 사례가 있다면 아래에 댓글로 남겨주세요. 🎜🎜🎜영어 원본 주소: https://seifi.org/javascript/javascript-logical-location-operators-deep-dive.html🎜🎜저자: Joe Seifi 🎜🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 다음을 방문하세요. 🎜프로그래밍 입문🎜! ! 🎜위 내용은 JavaScript의 논리 연산자에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!