Une analyse approfondie des opérateurs d'affectation logique dans JS

Cet article vous donnera une discussion approfondie sur les opérateurs d'affectation logique JavaScript. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

L'affectation logique est une extension des opérateurs logiques mathématiques et binaires existants. Examinons-les d'abord, puis voyons ce que nous obtenons en les combinant.

Tout d’abord, jetons un coup d’œil à la différence entre 条件运算符 et 无条件运算符 en JS.

Inconditionnel vs Conditionnel

Les opérateurs mathématiques, par exemple + sont inconditionnels.

dans const x = 1 + 2, quoi qu'il arrive, nous ajoutons toujours LHS à RHS et attribuons le résultat à x.

LHS et RHS sont des concepts dans le domaine des mathématiques, c'est-à-dire le côté gauche et le côté droit de l'équation. Dans notre scénario actuel, ils sont le côté gauche et le côté droit de l'opérateur d'affectation. Lorsque la variable apparaît à gauche de l'opérateur d'affectation, une requête LHS est effectuée, sinon une requête RHS est effectuée.

On peut même écrire du code bizarre comme const x = false +2. JS convertit d'abord le LHS de false en Number, nous obtenons donc const x = Number（false）+ 2, ce qui donne 为const x = 0 + 2. Il ajoute le LHS au RHS et l'attribue finalement à x, ce qui donne 2.

Les opérateurs logiques tels que && sont conditionnels

Dans const x = true && 0 + 2, le LHS est d'abord calculé, qui est true. Parce que la valeur de LHS est true, nous exécutons ensuite l'opération RHS, dont la valeur est 2, et exécutons également l'opération d'affectation, et le résultat est 2.

a un LHS de const x = false && 0 + 2 par rapport à false, donc le RHS est complètement ignoré.

Vous vous demandez peut-être pourquoi vous devriez éviter de calculer le RHS ? Deux raisons courantes sont d'obtenir 更好的性能和避免副作用.

Opérateurs logiques binaires

&& ||

En JSX, nous utilisons souvent && et || pour restituer l'interface de manière conditionnelle. ?? est l'opérateur de coalescence nullish(空值), qui a été récemment proposé et deviendra bientôt populaire. Ce sont tous des opérateurs logiques binaires.

• Utilisez && pour tester si le résultat de LHS est vrai.
• Utilisez || pour tester si le résultat de LHS est faux.
• Utilisez ?? pour tester si le LHS n'est pas valide.

Valeur imaginaire vs Nullish

Quelles sont les valeurs virtuelles en JS ?

• null
• undefined
• false
• NaN
• 0
• "" (chaîne vide)

Les deux sœurs suivantes sont considérées comme ayant des valeurs nulles.

• null
• non défini

Il convient de noter que l'utilisation d'opérateurs logiques binaires ne renvoie pas nécessairement 布尔值, mais renvoie l'expression LHS ou RHS valeur. Pour clarifier l'intérêt de ces types d'expression, il est utile de revisiter cette phrase de la documentation ECMAScript : La valeur produite par

&& ou || n'est pas nécessairement un booléen, mais plutôt une valeur dans un expression d'opérande.

Quelques exemples

// &&
/ /如果 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

Opérateur d'affectation logique

&&= ||= ??=

Cet opérateur combine l'affectation avec des opérateurs logiques conditionnels, d'où le nom "affectation logique" . Ce ne sont que des abréviations, par exemple, x && = y est l'abréviation de x && (x = y).

La valeur renvoyée par une affectation logique n'est pas l'affectation mise à jour, mais la valeur de l'expression évaluée.

En raison des fonctionnalités précédentes d'ECMAScript telles que les arguments par défaut et l'opérateur de fusion nul, vous pourriez affirmer qu'il existe certainement une certaine redondance dans les fonctionnalités fournies par l'affectation logique. Ce raccourci semble cependant simple, et je suis sûr qu'il nous sera utile à mesure que nous découvrirons d'autres cas d'utilisation.

Assignation ET logique ( &&= )

// 逻辑与
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)

Assignation OU logique ( ||= )

// 逻辑或
LHS ||= RHS
 
// 等价于
LHS || (LHS = RHS)
 
// 事例
// 如果 x 为真值，返回 x，否则将 y 赋值给 x
let x = NaN
const y = 100
x ||= y // x 为 100
 
// 与上面对应的长的写法
x || (x = y)

Affectation logique nulle (??=)

// 逻辑 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)

Exemple d'affectation logique en implémentation

JSX dans React

let loading = true
const spinner = <Spinner />
loading &&= spinner

DOM

el.innerHTML ||= 'some default'

Objet

// 如果对象没有 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 为虚值，所以什么都不会做

Comment utiliser l'affectation logique dans votre projet

Chrome prend déjà en charge l'affectation logique. Pour une compatibilité ascendante, utilisez des transformateurs. Si vous utilisez Babel, veuillez installer le plug-in :

npm install @babel/plugin-proposal-logical-assignment-operators

et ajoutez le contenu suivant dans .babelrc :

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

L'affectation logique est un tout nouveau concept, il n'y a donc pas grand-chose lié à cela mais à la connaissance. Si vous avez d'autres exemples de bonne utilisation de l'affectation logique, veuillez laisser un commentaire ci-dessous.

Adresse originale : https://seifi.org/javascript/javascript-logical-assignment-operators-deep-dive.html

Auteur : Joe Seifi

Adresse de traduction : https://segmentfault.com/a/1190000039923017

Pour plus de connaissances liées à la programmation, veuillez visiter : Vidéo de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!