Fallstricke im impliziten Front-End-Test-JS-Konvertierungsproblem

Wenn wir schriftliche Testfragen schreiben, stoßen wir häufig auf Fragen mit impliziten Konvertierungen, wie z. B.

"1" + 2
obj + 1
[] == ![] 
[null] == false

=== und ==

=== werden als strenge Operatoren und Objekte bezeichnet Der Typ zeigt auf die gleiche Adresse oder den gleichen ursprünglichen Typwert (numerischer Wert, Zeichenfolge, boolescher Wert); wird als Gleichheitsoperator bezeichnet. Wenn undefiniert und null gleich sind, wird der Objekttyp immer noch verwendet verglichen und referenziert werden. Der ==-Operator behandelt den ursprünglichen Wert und sein umschlossenes Objekt als gleich, der ==-Operator behandelt sie jedoch als ungleich. Alle obj.a==null (entspricht ===). obj.a=== null || obj.a ===undefined

Der Gleichheitsoperator ist eine Falle, die in JS häufig zu einer impliziten Konvertierung führt. In der realen Entwicklung ist jedoch die Verwendung strenger Operatoren erforderlich. Aber es ist immer noch notwendig, es zu verstehen.

Wenn Sie die implizite JS-Konvertierung verstehen möchten, müssen Sie zunächst mit drei Wissenspunkten beginnen.

Primitive Typen

Primitive Typen (Basistypen, primitive Datentypen, primitive Datentypen) sind Daten, die weder Objekte noch Methoden sind. In JavaScript gibt es 7 Typen:

. string，number，bigint，boolean，null，undefined，symbol (ECMAScript 2016新增)

falscher Wert (virtueller Wert)

falscher Wert (virtueller Wert) ist ein Wert, der in einem booleschen Kontext als falsch erkannt wird. Es gibt nur

sieben falsche Werte JavaScript.

false false Schlüsselwort
1. 0 Wert Null
2. 0n Wenn BigInt als boolescher Wert verwendet wird, befolgen Sie seine Regeln, da ein numerischer Wert 0n ist .
3. Eine leere Zeichenfolge (die Länge der Zeichenfolge ist Null). Zeichenfolgen können in JavaScript mit doppelten Anführungszeichen „“, einfachen Anführungszeichen „“ oder Vorlagenliteralen „“ definiert werden.
4. null null – fehlender Wert
5. undefiniert undefiniert – ursprünglicher Wert
6. NaN NaN – nicht numerischer Wert

Insbesondere, außer diesem Alle Sieben Objekte haben wahre Werte, z. B. neue Zahl und neuer boolescher Wert.

let b = new Boolean(false);i
f(b){
//会执行到这里。
}

Vier wichtige Konvertierungsregeln

• toString-Regel: Operationen zum Konvertieren anderer Wertetypen in String-Typen

  null => "null"
  • undefiniert => "undefiniert"
  • true => "true" false=>"false"
  • 10 = > "10" "1e21"=>"1e+21"
  • [1,2,3] => "1,2,3"
  • Objekt object=> ; „[Object Object]“ ruft tatsächlich die toString-Methode auf

• ToPrimitive-Regel: die Operation zum Konvertieren eines Objekttyp-Arrays in einen primitiven Typ

  Wenn der Objekttyp in einen primitiven Typ konvertiert werden muss, wird zunächst die valueOf-Methode des Objekts nachgeschlagen. Wenn die valueOf-Methode einen Wert des ursprünglichen Typs zurückgibt, lautet das Ergebnis von ToPrimitive dieser Wert
  • Wenn valueOf nicht existiert oder wenn die valueOf-Methode einen Wert zurückgibt, der kein primitiver Typ ist, versucht sie, die toString-Methode des Objekts aufzurufen, was bedeutet, dass sie den ToString-Regeln des Objekts folgt und dann Verwenden Sie den Rückgabewert von toString als Ergebnis von ToPrimitive
  • Datum ist zuerst toString und dann ValueOf
  • Wenn der ursprüngliche Typ nach toString und ValueOf nicht erhalten werden kann, wird er bei der Beurteilung der Gleichheit geworfen. Addition und Subtraktion
  • Uncaught TypeError: Cannot convert object to primitive value

• ToNumber-Regel

  null=>undefiniert => NaN
  • "123"=>123 "12ssd"=>NaN ""=>0
  • false => 0 true=>1
  • Array, Objekt ToPrimitive
ToBoolean-Regeln

• Die sieben falschen Werte (virtuelle Werte) in js sind falsch und die anderen sind wahr

  Implizite Konvertierung

Mit dem Verständnis der oben genannten Wissenspunkte können wir die implizite JS-Konvertierung auf einen Schlag erledigen Sturzflug.

• == 的过程（优先换成数字、字符串）

1. 首先看==前后有没有NaN，有的话都是返回false。NaN不等于任何值，包括其本身
2. 布尔值会转成数字类型，true转成1，false转成0
3. 数字和字符串比较，字符串会转成数字
4. undefined和null除了和undefined或null相等，和其他相比都是false
5. 数字或者字符串和对象相比，对象使用ToPrimitive规则转换。
6. 当两个操作数都是对象时，JavaScript会比较其内部引用，当且仅当他们的引用指向内存中的相同对象（区域）时才相等，即他们在栈内存中的引用地址相同。

• +的过程（优先换成字符串、数字）

1. 如果至少有一个操作数是对象，它会被转换成原始值（字符串，数字或布尔）；
2. 转换之后，如果至少有一个操作数是字符串类型，第二个操作数会被转换成字符串，并且会执行连接。
3. 在其他的情况下，两个操作数都会转换成数字并执行算数加法运算。

• -的过程（转换成数字） 这个就很简单了，全部用ToNumber规则转换成数字

检测学习成果

我们根据以上所学看几个笔试题。如果你都知道结果，就不用看我的废解释了。

[] == [] 
[] == ![] 
[null] == false

第一个，==左右都是对象，比较引用地址，这个两个不同的实例，肯定不相等啊。 第二个，！的优先级高于==，所以先 [] 是真值，求非当让是false了，转成数字0，==左是对象右是数字，对象使用ToPrimitive规则转换成""，再用ToNumber规则就转成0了，判断为相等。 第三个，[null]ToPrimitive再ToNumber规则就转成0，false也转成0。

var  a = 1;
var  b = "3";

var obj1 = {
    i:1,
    toString:function() {
        return "1";
    },
    valueOf:function() {
        return 1;
    }
};
var obj2 = {
    i:1,
    toString:function() {
        return "2";
    }
};
var obj3 = {
    i:1,
    valueOf:function() {
        return 3;
    }
};
var obj = {
    i:1,
};
var objE = {
    i:1,
    valueOf:function() {
        return [];
    },
    toString:function() {
        return {};
    }
};


a+b  
a + obj  
a + objE 

a+obj1  
a+obj2  
a+obj3  

b+obj1  
b+obj2  
b+obj3  

a==obj2  
a==obj1

这道题比较简单你只要熟练掌握我上面说的那几个知识点可以了。下面直接写出结果啦。

a + b    //"13"
a + obj  //"1[object Object]"
a + objE //Uncaught TypeError: Cannot convert object to primitive value

a+obj1  //2
a+obj2  //"12"
a+obj3  // 4

b+obj1  //"31"
b+obj2  //"32"
b+obj3  //“33”

a==obj2  //false
a==obj1  //true

最后提一个比较奇葩的题目。

定义一个变量a，使得下面的表达式结果为true

  a == 1 && a == 2 && a == 3

这里我简单提示下，a要是一个对象，重写valueOf方法，让它每次隐式转换的时候，调用时i++。

valueOf()在Object上默认返回的是对象不是原始类型，它会再调用toString。所以只要重写toString也可以。

如果还是没有思路，你们可以去看下这道题的文章原文从一道面试题说起—js隐式转换踩坑合集。

推荐教程：《JS教程》

Das obige ist der detaillierte Inhalt vonFallstricke im impliziten Front-End-Test-JS-Konvertierungsproblem. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!