Analyse complète de l'opération d'ajout JS
Xia Zhi accorde plus d'attention à
0.0592018.08.14 21:22:11 Nombre de mots 2 554 Lectures 3 879
La proposition ultime :
En JS : quels sont les résultats de []+[], []+{}, {}+[], {}+{} ?
1. Tapez en JS
- Types de base
Les types de base de JS incluent Undefined, Null, Boolean, Number et String. Le type Undefined et le type Null n'ont qu'une seule valeur, à savoir undefined et null ; le type Boolean a deux valeurs : true et false ; le type Number a de très nombreuses valeurs ; et le type String a théoriquement d'innombrables valeurs. - Les types de valeur
dans JS incluent les types primitifs (Primitive) et les types d'objet (Object). Lors de l'exécution d'opérations telles que l'addition, celles qui ne sont pas de type primitif doivent être converties en types primitifs avant d'effectuer les opérations associées.
2. Opération d'addition dans JS
1. Utilisez l'opération ToPrimitive pour convertir les opérandes gauche et droit en types de données primitifs (primitifs).
2. Après la conversion, si le type de données d'origine de l'un des opérandes est une valeur « chaîne », l'autre opérande sera forcé d'être converti en chaîne, puis l'opération de concaténation de chaîne sera effectuée.
3. Dans d'autres cas, tous les opérandes seront convertis en valeurs de type "nombre" du type de données d'origine, puis les nombres seront ajoutés.
3. Fonctionnement interne ToPrimitive
L'opérateur plus ne peut être utilisé que pour les types de données primitifs. Pour les valeurs des types d'objets, une conversion de données est requise. Dans ECMAScript, il existe une opération abstraite ToPrimitive, qui est utilisée pour convertir des objets en types de données primitifs. Il est utilisé en plus des opérations de comparaison relationnelle ou de comparaison d'égalité de valeur des objets.
Syntaxe de description pour ToPrimitive :
ToPrimitive(input, PreferredType?)
L'entrée représente la valeur substituée. PreferredType peut être soit un nombre (Number), soit une chaîne (String), indiquant le type d'origine qui doit être converti en premier. Mais si cette valeur n'est pas fournie, ce qui est la situation par défaut, la valeur de l'indice converti sera définie sur « par défaut ». Cette instruction préférée (valeur d'indice) pour la conversion du type d'origine est automatiquement ajoutée par JS lors de la conversion interne. Généralement, il s'agit de la valeur par défaut.
Dans la conception du prototype Object de JS, il existe deux méthodes, valueOf et toString. Pendant le processus de conversion du type de données de l'objet, l'ordre dans lequel ils sont appelés sera ajusté en fonction de la valeur entrante.
-
Lorsque PreferredType est Number (Number)
, input est la valeur à convertir. Étapes pour convertir la valeur d'entrée :
1. Si input est le type de données d'origine, renvoyez directement l'entrée.
2. Sinon, input est un objet, appelez la méthode valueOf() et si la valeur du type de données d'origine peut être obtenue, renvoyez cette valeur.
3. Sinon, input est un objet, appelez la méthode toString() et si la valeur du type de données d'origine peut être obtenue, renvoyez cette valeur.
4. Sinon, une TypeError est générée. -
Lorsque PreferredType est String (String)
1. Si input est un type de données primitif, renvoie directement l'entrée.
2. Sinon, input est un objet, appelez la méthode toString() et si la valeur du type de données d'origine peut être obtenue, renvoyez cette valeur.
3. Sinon, input est un objet, appelez la méthode valueOf() et si la valeur du type de données d'origine peut être obtenue, renvoyez cette valeur.
4. Sinon, une TypeError est générée. -
Lorsque PreferredType n'est pas fourni (par défaut),
le type par défaut de PreferredType est Number, donc valueOf() est appelé en premier, puis toString() est appelé.
Les plus spéciaux sont les objets Date et les objets Symbol, qui remplacent le comportement PreferredType d'origine. Le type préféré par défaut des objets Date est String.
4. valueOf() et toString()
valueOf() et toString() sont deux méthodes sur Object, mais en JS, les valeurs de retour peuvent être différentes en fonction des différences entre les objets.
- Objet ordinaire object
valueOf() : renvoie l'objet lui-même.
toString() : valeur de chaîne "[object Object]", la valeur de retour des différents objets intégrés est la chaîne "[object type]", "type" fait référence à l'identification de type de l'objet lui-même, par exemple, l'objet Math renvoie "[objet Math]"Chaîne. Cependant, certains objets intégrés n'ont pas cette valeur lorsqu'ils sont appelés directement car ils remplacent cette méthode. (Remarque : le mot anglais « objet » devant cette chaîne de retour est en minuscule et le mot anglais « objet » à la fin est en majuscule).
Utilisez toString dans Object pour juger de la syntaxe de divers objets :
Object.prototype.toString.call([])
"[object Array]"
Object.prototype.toString.call(new Date)
"[object Date]"
Vous devez coopérer avec call pour obtenir la valeur correcte du type d'objet.
-
Array (array)
Bien que Array (array) soit un type d'objet, il est conçu différemment de Object. Son toString a une couverture. Expliquons les valeurs de retour des deux méthodes valueOf et toString du tableau : valueOf() : renvoie l'
objet lui-même
toString () : équivalent à la chaîne renvoyée en appelant join(',') avec une valeur de tableau. Autrement dit, [1,2,3].toString() sera "1,2,3", veuillez prêter une attention particulière à ce point. -
Objet fonction L'
objet fonction est rarement utilisé, et son toString a également été écrasé, ce n'est donc pas le toString dans Object, mais la valeur de retour des deux méthodes valueOf et toString de l'objet Function : valueOf() : renvoie l'objet lui-même
toString (
) : Le code contenu dans la fonction de retour est converti en valeur de chaîne. -
Objet date
valueOf() : renvoie l'heure donnée convertie en heure UNIX (depuis le 1er janvier 1970 à 00:00:00 UTC), mais une valeur numérique en microsecondes
toString() : renvoie une chaîne d'heure localisée
5. Nombre, chaîne, objets d'emballage booléens
Les objets d'empaquetage JS doivent utiliser le mot-clé new pour l'instanciation d'objet et utiliser directement les trois fonctions de conversion Number(), String() et Boolean(). Par exemple, new Number(123) et Number('123') sont une fonction qui force la conversion d'autres types en types numériques.
-
Objet d'emballage L'
objet d'emballage est un objet spécialement conçu par JS pour les types de données primitifs tels que les nombres, les chaînes et les booléens. Les deux méthodes valueOf et toString de l'objet d'emballage sont remplacées sur le prototype, leurs valeurs de retour sont donc différentes de la conception générale de l'objet. :
valeur de retour de la méthode valueOf : valeur de type de données d'origine correspondante
valeur de retour de la méthode toString : valeur de type de données d'origine correspondante, la méthode de valeur de chaîne
toString une fois convertie en type de chaîne sera plus spéciale, les détails de toString dans ces trois emballages objets La description est la suivante :
1. La méthode toString de l'objet de packaging Number : Il peut y avoir un paramètre passé, qui peut déterminer le report lors de la conversion en chaîne (08/02/16)
2. La méthode toString de l'objet String Objet d'empaquetage : identique à la valeur valueOf de l'objet d'empaquetage String. Même résultat de retour
3. Méthode toString de l'objet d'empaquetage booléen : renvoie une chaîne "true" ou "false" -
Les trois fonctions de conversion
forcée de Number(), String() et Boolean() correspondent au tableau de comparaison des trois conversions d'opérations internes de ToNumber, ToString et ToBoolean dans le standard ECMAScript.Convertissez la valeur en Nombre via ToNumber() :
paramètre résultat indéfini NaN nul +0 booléen vrai est converti en 1, faux est converti en +0 nombre Aucune conversion requise chaîne Analysé de la chaîne au nombre. Par exemple, "324" est converti en 324 Convertissez la valeur en chaîne en utilisant ToString() :
paramètre résultat indéfini "indéfini" nul "nul" booléen "vrai ou faux" nombre Nombres sous forme de chaînes. Par exemple, "1,765" chaîne Aucune conversion requise
6. Comprendre à partir d'exemples
- L'un des opérandes est une chaîne (String)
/**
* 运算元其一为字符串(String)
*/
console.log('12'+1); // 121
console.log('abc'+'def'); // abcdef
console.log('1'+true); //1true
console.log('1'+undefined); //1undefined
console.log('1'+null); //1null
L'un des opérandes est une chaîne, qui est l'opération de concaténation de chaînes.
- L'un des opérandes est un nombre (Nombre)
/**
* 运算元其一为数字(Number)
*/
console.log(1+1); // 2
console.log(1+'def'); // 1def
console.log(1+true); //2
console.log(1+undefined); //NaN
console.log(1+null); //1
1+'def' signifie que l'un des opérandes est une chaîne, et le reste signifie que s'il n'y a pas de chaîne, l'un des opérandes est un nombre, et ils sont ajoutés après la conversion de type.
- Ajout de types primitifs autres que Number/String
/**
* 数字(Number)/字符串(String)以外的原始类型相加
*/
console.log(true+true); // 2
console.log(true+null); // 1
console.log(true+undefined); //NaN
console.log(undefined+null); //NaN
console.log(undefined+undefined); //NaN
console.log(null+null); //0
Lorsque d'autres types de données primitifs autres que les nombres et les chaînes utilisent directement l'opération d'addition, ils sont convertis en nombres puis exploités, ce qui n'a rien à voir avec les chaînes.
- tableau vide + tableau vide
console.log([] + []); //""
Pour ajouter deux tableaux, les opérandes gauche et droit appellent d'abord valueOf(), qui renvoie le tableau lui-même, puis appellent toString(), qui renvoie le type de données d'origine, c'est-à-dire une chaîne vide, et effectue une opération de concaténation pour obtenir une chaîne vide.
- objet vide + objet vide
console.log({} + {}); //"[object Object][object Object]"
Pour ajouter deux objets, les opérandes gauche et droit appellent d'abord valueOf(), renvoient l'objet lui-même, appellent toString(), renvoient le type de données d'origine, c'est-à-dire la chaîne d'objet [object Object], effectuent une opération de connexion et obtiennent la chaîne [objet Objet][ objet Objet]
Console.log({}+{}) obtient ce résultat. Cependant, si vous saisissez directement {}+{} dans certains navigateurs tels que Firefox et la console Edge, vous obtiendrez NaN, car le navigateur traitera {} + {} La traduction littérale est équivalente à l'instruction +{}, car ils penseront que l'accolade ({) commence par le début d'une instruction de bloc, et non par un objet littéral, donc ils penseront que le premier {} est ignoré et que le entier L'instruction est considérée comme une instruction +{}, ce qui équivaut à l'opération d'appel de fonction Number({}) qui force le calcul de la valeur numérique, ce qui équivaut à l'opération Number("[object Object]") , et le résultat final est NaN. Ce problème peut être évité en ajoutant des parenthèses ({}) + {}.
- Objet vide + tableau vide
console.log({} + []); //"[object Object]"
Les objets vides et les tableaux vides sont additionnés. Les opérandes gauche et droit appellent d'abord valueOf() pour renvoyer le tableau d'objets lui-même, puis appellent toString() pour renvoyer le type de données d'origine, c'est-à-dire la chaîne d'objet [object Object] et " ". Effectuer une opération de connexion pour obtenir des caractères. string[object Object]
Directement console.log obtiendra la même valeur, mais entrez directement dans la console du navigateur :
> {} + []
0
> [] + {}
"[object Object]"
{} + [] est équivalent à l'instruction +[], qui est équivalente à l'opération Number([]) qui force une valeur numérique. C'est équivalent à l'opération Number(""), et le résultat final est le nombre 0.
- Objet de date
console.log(1 + (new Date())); //"1Tue Aug 14 2018 21:18:24 GMT+0800 (中国标准时间)"
Le type préféré d'objet Date est String. Appelez d'abord toString() pour obtenir la chaîne et effectuer des opérations de concaténation de chaînes.
Pour obtenir la valeur de retour valueOf dans un objet Date, vous devez utiliser le signe plus unaire (+) pour le forcer à un type numérique, tel que le code suivant :
console.log(+new Date());
1534298171747
-
Type de symboles Le
type de données Symboles nouvellement ajouté dans ES6 n'est ni une valeur générale ni un objet. Il n'a pas de conception de transformation automatique interne, il ne peut donc pas être utilisé directement pour les opérations d'addition, et une erreur sera signalée lors de son utilisation. -
+[]/+{}
console.log(+[]); // 0
console.log(+{}); // NaN
console.log(+null); //0
console.log(+true); //1
console.log(+undefined); //NaN
Dans l’opération unaire du signe plus, le seul opérande est équivalent à l’opération Number([]) qui force une valeur numérique.