JS面试题坑隐式类型转换示例代码

1.1-隐式转换介绍

在js中，操作员在操作时，如果两边的数据不统一，CPU就无法计算。此时，我们的编译器会自动将运算符两边的数据转换为相同的数据类型，然后进行计算

这种由编译器自动转换而不需要程序员手动转换的方式称为隐式转换

例如，第1行“0”不会报告js中的错误，编译器会首先将右边的“0”变成数字“0”，然后比较大小

1.2-隐式转换规则

转换为字符串类型：(字符串连接器)2.转换为数字类型：/-(自增自减运算符)-*/%(算术运算符)===！====!===(关系运算符)

转换为布尔类型：(逻辑非运算符)

1.3-坑一：字符串连接符与算术运算符隐式转换规则混淆

常见面试问题如下

console . log(1“true”)；//“1 true”console . log(1 true)；//2 console.log (1未定义)；//NAn console . log(1 null)；//1原理分析

/*这类问题的Pit:混淆String连接器(:只要数字的一边是字符串)和算术运算符(:只要两边都是数字)之间的隐式转换。1.字符串连接器：其他数据类型将被称为String()。该方法被转换为字符串，然后被拼接。2.算术运算符：通过调用number()方法将其他数据类型转换为数字，然后添加。*///是字符串连接器：string(1)“true”=“1 true”console . log(1“true”)；//1true //是算术运算符：1 number(true)=1 1=2 console . log(1 true)；//2 //是算术运算符：1个数字(未定义)=1 nan=nanconsole.log (1未定义)；//NaN //是算术运算符：1个数字(null)=1 0=1 console . log(1 null)；//11.4- Pit 2:关系运算符：它会将其他数据类型转换为数字，然后比较关系。常见的面试问题如下

console . log(' 2 ' 10)；//false console . log(' 2 ' ' 10 ')；//true console . log(' ABC ' ' b ')；//false console . log(' ABC ' ' aad ')；//true console . log(NAn==NAn)；//false console . log(undefined==null)；///真原理分析

//2.1 :当关系运算符的一端是字符串时，其他数据类型将通过Number()进行转换，然后比较关系console.log ('2' 10)。//false number(' 2 ')10=2 10=false/* 2.2:当关系运算符的两边都是字符串时，同时转换为Number，然后比较关系强调：不转换为Number()形式的数字。而是根据字符串对应的unicode编码转换成数字。您可以使用以下方法查看字符的unicode编码：string。charCodeAt(字符下标，默认值为0)*/console . log(' 2 ' ' 10 ')；//真“2”。charCodeAt()“10”。charCodeAt()=50 49=true console . log(' 2 '。charCodeAt())；//数字50 console.log ('10 '。charCodeAt())；//数字49(默认返回第一个字符的代码；如果要查询第二个字符，可以将下标)//Compare console.log ('abc' 'b ')从左向右转移；//false首先比较“a”和“b”，如果“a”不等于“b”，将直接获得结果console . log(‘ABC’‘aad’)。//true首先比较‘a’和‘a’，它们相等，继续比较第二个字符‘b’和‘a’，得到结果console . log(‘a’。charCodeAt())；//数字97 console.log ('b ')。charCodeAt())；//Number 98 //2.3特例(忽略规则):如果数据类型未定义且为空，则得到一个固定结果console . log(undefined==undefined)；//true console . log(undefined==null)；//true console . log(null==null)；//true //2.4特例(忽略规则):NaN作为NaN console.log与任何数据进行比较(NaN==NaN)；//false

1.5-坑三：复杂数据类型在隐式转换时会先转成String，然后再转成Number运算

原理分析

/*复杂数据类型到数字的顺序如下：1。首先，使用valueOf()方法获取其原始值，如果原始值不是数字类型，则使用toString()方法将其转换为字符串2。然后将字符串转换为数字操作*/console.log ([1，2]=='1，2 ')；//true首先将左数组转换为字符串，然后将其转换为unicode编码operation console.log ([1，2 ])。value of())；//[1，2] console.log ([ 1，2]。toString())；//“1，2”var a={ }；console . log(a=='[Object Object]')；//true console.log (a.valueOf()。toString())；//[object Object]/*分析：如果逻辑and运算为假，则为假。如果if分支语句的括号条件成立，a的值必须同时等于1、2和3。乍一看，似乎根本不可能实现，但是复杂的数据类型会先调用valueof()方法。然后将其转换为数字运算，可以覆盖对象的valueOf()方法。*/var a={i : 0，//声明一个属性ivalueof 3360 function(){ return a . I；//每次调用，让对象a的I属性增加一次并返回}} if (a==1 a==2 a==3){//每次操作都会调用一次的valueOf()方法console . log(' 1 ')；}前方

1.6-坑四：逻辑非隐式转换与关系运算符隐式转换搞混淆

高能，敬请关注~

空数组的toString()方法将获得空字符串，而空对象的toString()方法将获得字符串`[object Object]`(注意第一个小写O，第二个大写O)

常见面试问题

//大坑console . log([]==0)；//trueconsole.log(！[]==0 );//true//申坑console.log ([]==！[] );//true console . log([]==[])；//false//epic pit console . log({ }==！{});//false console . log({ }=={ })；///假原理分析

/*1.关系运算符：将其他数据类型转换为数字2。逻辑非：使用布尔()将其他数据类型转换为布尔类型*以下八种情况将得到false * 0，-0，NaN，undefined，null，“”(空字符串)，false，document.all() *除了以上八种情况，所有数据都将得到true *//* principle (1)[]。valueOf()。toString()获取空字符串(2)Number(')==0保存*/console . log([]==0)；//真/*原理：本质上是`！[]`逻辑非表达式结果与0 (1)逻辑非优先级的比较关系高于关系运算符！[]=false(将空数组转换为布尔值以获得true，然后反转以获得false) (2)false==0保存*/console.log(！[]==0 );//真/*原理：本质其实是`空对象{} '和`！{} `比较逻辑非表达式结果(1) {}。valueOf()。toString()获取字符串“[Object Object]”(2)！{ }=false(3)Number('[Object Object]')==Number(false)*/console . log({ }==！{});//false //堆中存在引用类型数据，地址存储在堆栈中，所以它们的结果是false console . log({ }=={ })；//false /*原理：本质是`空数组[]`和`！[]`比较这个逻辑非表达式结果(1) []。valueOf()。toString()获取空字符串' '(2)！[]=false(3)number(' ')==number(false)为0 */console.log ([]==！[] );//true //引用类型数据存在堆中，地址存储在堆栈中，所以它们的结果是false console . log([]==[])；//false console.log ({})。valueOf()。toString())//[对象对象] console.log ([])。valueOf()。toString())；//' '空字符串

摘要

以上是边肖介绍的JS面试题坑的隐式类型转换示例代码。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你的！