Vollständige Analyse der JS-Additionsoperation

Vollständige Analyse der JS-Additionsoperation

Xia Zhi schenkt mehr Aufmerksamkeit

0.0592018.08.14 21:22:11 Wortanzahl 2.554 Gelesen 3.879

Der ultimative Vorschlag:
In JS: Was sind die Ergebnisse von []+[], []+{}, {}+[], {}+{}?

1. Typen in JS

• Grundtypen
  Zu den Grundtypen von JS gehören Undefiniert, Null, Boolean, Zahl und String. Sowohl der Typ „Undefiniert“ als auch der Typ „Null“ haben nur einen Wert, nämlich undefiniert und null; der Typ „Boolean“ hat zwei Werte: wahr und falsch; der Typ „Zahl“ hat viele, viele Werte; und der Typ „String“ hat theoretisch unzählige Werte.
• Zu den Werttypen
  in JS gehören primitive Typen (Primitive) und Objekttypen (Object). Wenn Operationen wie Additionen ausgeführt werden, müssen diejenigen, die nicht vom primitiven Typ sind, in primitive Typen konvertiert werden, bevor verwandte Operationen ausgeführt werden.

2. Additionsoperation in JS

1. Verwenden Sie die ToPrimitive-Operation, um die linken und rechten Operanden in primitive Datentypen (primitiv) umzuwandeln.
2. Wenn nach der Konvertierung der ursprüngliche Datentyp eines der Operanden ein „String“-Wert ist, wird die Konvertierung des anderen Operanden in einen String erzwungen, und dann wird die String-Verkettungsoperation ausgeführt.
3. In anderen Fällen werden alle Operanden in Werte vom Typ „Zahl“ des ursprünglichen Datentyps konvertiert und dann die Zahlen hinzugefügt.

3. ToPrimitive interne Operation

Der Plus-Operator kann nur für primitive Datentypen verwendet werden. Für Werte von Objekttypen ist eine Datenkonvertierung erforderlich. In ECMAScript gibt es eine abstrakte ToPrimitive-Operation, die zum Konvertieren von Objekten in primitive Datentypen verwendet wird. Sie wird außerdem für relationale Vergleichs- oder Wertgleichheitsvergleichsoperationen von Objekten verwendet.

Beschreibungssyntax für ToPrimitive:

ToPrimitive(input, PreferredType?)

Die Eingabe stellt den ersetzten Wert dar. PreferredType kann entweder eine Zahl (Number) oder eine Zeichenfolge (String) sein und gibt den ursprünglichen Typ an, der zuerst konvertiert werden muss. Wenn dieser Wert jedoch nicht angegeben wird, was die Standardsituation ist, wird der konvertierte Hinweiswert auf „Standard“ gesetzt. Diese bevorzugte Anweisung (Hinweiswert) zum Konvertieren des Originaltyps wird von JS bei der internen Konvertierung automatisch hinzugefügt. Im Allgemeinen ist dies der Standardwert.

Beim Entwurf des Objektprototyps von JS gibt es zwei Methoden: valueOf und toString. Während des Datentypkonvertierungsprozesses des Objekts wird die Reihenfolge, in der sie aufgerufen werden, entsprechend dem eingehenden Wert angepasst.

• Wenn PreferredType Number (Number) ist
  , ist die Eingabe der zu konvertierende Wert. Schritte zum Konvertieren des Eingabewerts:
  1. Wenn die Eingabe der ursprüngliche Datentyp ist, geben Sie die Eingabe direkt zurück.
  2. Andernfalls ist die Eingabe ein Objekt. Rufen Sie die Methode valueOf () auf. Wenn der Wert des ursprünglichen Datentyps erhalten werden kann, geben Sie diesen Wert zurück.
  3. Andernfalls ist die Eingabe ein Objekt. Rufen Sie die Methode toString () auf. Wenn der Wert des ursprünglichen Datentyps erhalten werden kann, geben Sie diesen Wert zurück.
  4. Andernfalls wird ein TypeError ausgelöst.

• Wenn PreferredType String (String) ist
  1. Wenn die Eingabe ein primitiver Datentyp ist, geben Sie die Eingabe direkt zurück.
  2. Andernfalls ist die Eingabe ein Objekt. Rufen Sie die Methode toString () auf. Wenn der Wert des ursprünglichen Datentyps erhalten werden kann, geben Sie diesen Wert zurück.
  3. Andernfalls ist die Eingabe ein Objekt. Rufen Sie die Methode valueOf () auf. Wenn der Wert des ursprünglichen Datentyps erhalten werden kann, geben Sie diesen Wert zurück.
  4. Andernfalls wird ein TypeError ausgelöst.

• Wenn PreferredType nicht bereitgestellt wird (Standard),
  ist der Standardtyp von PreferredType Number. Daher wird zuerst valueOf() und dann toString() aufgerufen.

Die spezielleren sind Date-Objekte und Symbol-Objekte, die das ursprüngliche PreferredType-Verhalten überschreiben. Der standardmäßig bevorzugte Typ von Date-Objekten ist String.

4. valueOf() und toString()

valueOf() und toString() sind zwei Methoden für Object, aber in JS können die Rückgabewerte je nach Unterschied zwischen Objects unterschiedlich sein.

• Gewöhnliches Objektobjekt
  valueOf(): gibt das Objekt selbst zurück.
  toString(): Zeichenfolgenwert „[Objektobjekt]“, der Rückgabewert verschiedener integrierter Objekte ist die Zeichenfolge „[Objekttyp]“. „Typ“ bezieht sich auf die Typidentifikation des Objekts selbst, beispielsweise des Math-Objekts gibt „[object Math]“String zurück. Einige integrierte Objekte verfügen jedoch nicht über diesen Wert, wenn sie direkt aufgerufen werden, da sie diese Methode überschreiben. (Hinweis: Das englische Wort „object“ vorne in dieser Rückgabezeichenfolge ist kleingeschrieben und das englische Wort „object“ hinten großgeschrieben.)

Verwenden Sie toString in Object, um die Syntax verschiedener Objekte zu beurteilen:

Object.prototype.toString.call([])
"[object Array]"

Object.prototype.toString.call(new Date)
"[object Date]"

Sie müssen mit dem Aufruf kooperieren, um den richtigen Objekttypwert zu erhalten.

• Array (Array)
  Obwohl Array (Array) ein Objekttyp ist, unterscheidet es sich vom Design von Object. Sein toString hat eine Abdeckung. Lassen Sie uns die Rückgabewerte der beiden Methoden valueOf und toString des Arrays erklären: valueOf(): gibt zurück das
  Objekt  selbst
  toString():  Entspricht der Zeichenfolge, die durch den Aufruf von join(',') mit einem Array-Wert zurückgegeben wird. Das heißt, [1,2,3].toString() wird „1,2,3“ sein, bitte achten Sie besonders auf diesen Punkt.

• Funktionsobjekt Funktionsobjekt
  wird selten verwendet und sein toString wurde ebenfalls überschrieben, sodass es sich nicht um den toString in Object handelt, sondern um den Rückgabewert der beiden Methoden valueOf und toString des Funktionsobjekts: valueOf(): gibt das Objekt selbst zurück
  toString  (
  ):  Der in der Rückgabefunktion enthaltene Code wird in einen String-Wert umgewandelt.

• Datumsobjekt
  valueOf():  Gibt die angegebene Zeit konvertiert in UNIX-Zeit (seit 1. Januar 1970 00:00:00 UTC) zurück, aber einen numerischen Wert in Mikrosekunden.
  toString():  Gibt eine lokalisierte Zeitzeichenfolge zurück

5. Anzahl, Zeichenfolge, boolesche Verpackungsobjekte

JS-Verpackungsobjekte müssen das Schlüsselwort new für die Objektinstanziierung verwenden und die drei Umwandlungsfunktionen Number (), String () und Boolean () direkt verwenden. Beispielsweise ist new Number(123) und Number('123') eine Funktion, die die Konvertierung anderer Typen in numerische Typen erzwingt.

• Verpackungsobjekt
  Verpackungsobjekt ist ein von JS speziell für primitive Datentypen wie Zahlen, Zeichenfolgen und Boolean entwickeltes Objekt. Die beiden Methoden valueOf und toString des Verpackungsobjekts werden im Prototyp überschrieben, sodass ihre Rückgabewerte unterschiedlich sind Das allgemeine Objektdesign. :
  valueOf-Methodenrückgabewert:  entsprechender ursprünglicher Datentypwert
  toString-Methodenrückgabewert:  entsprechender ursprünglicher Datentypwert, der Zeichenfolgenwert der
  toString-Methode wird bei der Konvertierung in einen Zeichenfolgentyp spezieller, die Details von toString in diesen drei Paketen Objekte Die Beschreibung lautet wie folgt:
  1. Die toString-Methode des Number-Paketierungsobjekts: Es kann ein Parameter übergeben werden, der den Übertrag beim Konvertieren in einen String bestimmen kann (08.02.16) 2. Die
  toString-Methode des String Verpackungsobjekt: Es ist dasselbe wie valueOf im String-Verpackungsobjekt. Gleiches Rückgabeergebnis.
  3. toString-Methode des booleschen Verpackungsobjekts: Gibt die Zeichenfolge „true“ oder „false“ zurück

• Die drei erzwungenen Konvertierungsfunktionen
  Number(), String() und Boolean() entsprechen der Vergleichstabelle der drei internen Operationskonvertierungen ToNumber, ToString und ToBoolean im ECMAScript-Standard.

  Wandeln Sie den Wert mit ToNumber() in eine Zahl um:

  Parameter	Ergebnis
  nicht definiert	NaN
  Null	+0
  Boolescher Wert	true wird in 1 konvertiert, false wird in +0 konvertiert
  Nummer	Keine Konvertierung erforderlich
  Zeichenfolge	Von Zeichenfolge zu Zahl geparst. Beispielsweise wird „324“ in 324 umgewandelt

  Wandeln Sie den Wert mit ToString() in einen String um:

  Parameter	Ergebnis
  nicht definiert	"nicht definiert"
  Null	"Null"
  Boolescher Wert	"richtig oder falsch"
  Nummer	Zahlen als Zeichenfolgen. Beispiel: „1,765“
  Zeichenfolge	Keine Konvertierung erforderlich

6. Anhand von Beispielen verstehen

• Einer der Operanden ist ein String (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

Einer der Operanden ist eine Zeichenfolge, bei der es sich um eine Verkettungsoperation von Zeichenfolgen handelt.

• Einer der Operanden ist eine Zahl (Number)

/**
 * 运算元其一为数字(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' bedeutet, dass einer der Operanden eine Zeichenfolge ist, und der Rest bedeutet, dass einer der Operanden eine Zahl ist, wenn keine Zeichenfolge vorhanden ist, und sie werden nach der Typkonvertierung hinzugefügt.

• Hinzufügung anderer primitiver Typen als 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

Wenn andere primitive Datentypen außer Zahlen und Zeichenfolgen die Additionsoperation direkt verwenden, werden sie in Zahlen konvertiert und dann verarbeitet, was nichts mit Zeichenfolgen zu tun hat.

• leeres Array + leeres Array

console.log([] + []);        //""

Um zwei Arrays hinzuzufügen, rufen die linken und rechten Operanden zunächst valueOf() auf, das das Array selbst zurückgibt, und rufen dann toString() auf, das den ursprünglichen Datentyp, also eine leere Zeichenfolge, zurückgibt und zum Erhalten eine Verkettungsoperation durchführt eine leere Zeichenfolge.

• leeres Objekt + leeres Objekt

console.log({} + {});        //"[object Object][object Object]"

Um zwei Objekte hinzuzufügen, rufen die linken und rechten Operanden zuerst valueOf () auf, geben das Objekt selbst zurück, rufen toString () auf, geben den ursprünglichen Datentyp zurück, dh die Objektzeichenfolge [Objektobjekt], führen eine Verbindungsoperation durch und rufen sie ab die Zeichenfolge [Objekt Objekt][ Objekt Objekt]

Console.log({}+{}) erhält dieses Ergebnis. Wenn Sie jedoch in einigen Browsern wie Firefox und der Edge-Konsole direkt {}+{} eingeben, erhalten Sie NaN, da der Browser {} + {} behandelt Die wörtliche Übersetzung entspricht der +{}-Anweisung, da sie davon ausgehen, dass die geschweifte Klammer ({) mit dem Anfang einer Blockanweisung und nicht mit einem Objektliteral beginnt, sodass sie davon ausgehen, dass das erste {} übersprungen wird und das vollständig Die Anweisung wird als +{}-Anweisung betrachtet, was der Funktionsaufrufoperation Number({}) entspricht, die die Berechnung des numerischen Werts erzwingt, was der Operation Number("[object Object]") entspricht , und das Endergebnis ist NaN. Dieses Problem kann durch das Hinzufügen von Klammern ({}) + {} vermieden werden.

• Leeres Objekt + leeres Array

console.log({} + []);        //"[object Object]"

Leere Objekte und leere Arrays werden addiert. Die linken und rechten Operanden rufen zuerst valueOf () auf, um das Objektarray selbst zurückzugeben, und rufen dann toString () auf, um den ursprünglichen Datentyp zurückzugeben, dh Objektzeichenfolge [Objektobjekt] und „ ". Führen Sie einen Verbindungsvorgang durch, um Zeichen zu erhalten. string[object Object]

Console.log erhält direkt den gleichen Wert, aber geben Sie Folgendes direkt in die Browserkonsole ein:

> {} + []
0

> [] + {}
"[object Object]"

{} + [] entspricht der Anweisung +[], die der Operation Number([]) entspricht, die einen numerischen Wert erzwingt. Sie entspricht der Operation Number("") und das Endergebnis ist die Zahl 0.

• Datumsobjekt

console.log(1 + (new Date()));       //"1Tue Aug 14 2018 21:18:24 GMT+0800 (中国标准时间)"

Der bevorzugte Typ des Date-Objekts ist String. Rufen Sie zuerst toString() auf, um die Zeichenfolge abzurufen und Zeichenfolgenverkettungsoperationen durchzuführen.

Um den Rückgabewert „valueOf“ in einem Date-Objekt zu erhalten, müssen Sie das unäre Pluszeichen (+) verwenden, um einen numerischen Typ zu erzwingen, wie zum Beispiel den folgenden Code:

console.log(+new Date());
1534298171747

• Symbols-Typ Der
  in ES6 neu hinzugefügte Symbols-Datentyp ist weder ein allgemeiner Wert noch ein Objekt. Er verfügt nicht über ein internes automatisches Transformationsdesign und kann daher überhaupt nicht direkt für Additionsvorgänge verwendet werden. Bei Verwendung wird ein Fehler gemeldet.

• +[]/+{}

console.log(+[]);     // 0
console.log(+{});     // NaN
console.log(+null);     //0
console.log(+true);     //1
console.log(+undefined);     //NaN

Bei der unären Pluszeichenoperation entspricht der einzige Operand der Number([])-Operation, die einen numerischen Wert erzwingt.