关于js的类型转换
前言:js的类型转换真是容易让人一头雾水,接下来我将会好好整理一下。
原始值到原始值(数字,字符串,布尔值)的转换
-
原始值转化为布尔值,所有的假值("undefined","null",0,-0,NaN,"")都会被转化false,其他都会被转化为true.
-
原始值转换为字符串相当于加""
-
原始值转化为数字,布尔转文字:true --> 1,false --> 2
字符串转数字,只有字符串中都是以数字表示的,就可以直接转换为字符串,如果两个数字间有空格的话,那么转换结果就是NaN.+"123" //123 +"1 3" // NaN
原始值到对象的转换
- null和undefined会直接报错。
- 原始值会通过调用String(),Number(),Boolean()构造函数,转换为他们各自的包装对象。
对象到原始值的转换
- 对象转换为布尔值都是true
- 对象到字符串
- 如果对象有toString()方法,就调用toString()方法,如果这个方法返回原始值,就将这个对象转化为字符串。
- 如果对象没有toString()方法或者该方法返回的不是原始值,那么就会调用该对象的valueOf()方法,如果存在就调用这个方法,如果返回值是字符串就转换为字符串。
- 否则就报错。
复习一下Object的属性和方法
-
Constructor:保存着用于创建当前对象的函数。
-
hasOwnProperty(property):用于检查给定的属性在当前实例中(不包括原型)是否存在。
-
isPrototypeOf(object):用于检查传入的对象是否是另外一个对象的原型。
-
propertyIsEnumberable(property):用来检查给定的属性能用for-in语句来枚举。
-
toLocaleString():返回对象的字符串表示,该字符串与执行环境地区相对应
-
toString():返回对象的字符串表示。
-
valueOf():返回对象的字符串表示,数值或者布尔值表示,很多时候与toString()方法的返回值相同。
toString
valueOf1.toString()//Uncaught SyntaxError: Invalid or unexpected token 1..toString()//"1" 1...toString()//Uncaught SyntaxError: Unexpected token . 2.0.toString()//"2"
==运算符怎么进行类型转换
- 如果一个值是null,另一个值undefined,则相等。
- 如果一个是字符串,另一个是数字,则要把字符串转换为数字,进行比较。
- 如果任意值是true,则要把true转换为1再进行比较,如果是false,则要把false转换为0再进行比较
- 如果一个是对象,另一个数值或字符串,把对象转换为基础类型的值在进行比较(toString,valueOf())。
+运算符如何进行类型转换。
-
如果作为一元运算符就是转化为数字,常常用来将字符串转化为数字。
+“2” //2
-
如果作为二元运算符就有两种转换方式
- 两边如果有字符串,就会将另外一家转化为字符串进行拼接。
- 如果两边没有字符串,两边都会转化数字相加,对象也会根据钱买你的方法转化为原始值数字。
-
如果其中的一个操作数是对象,则将对象转换为原始值,日期对象会通过toString(),其他对象会通过valueOf()方法进行转换,但是大多数对象都是不具备可用的valueOf()方法,所以还是会通过toString()方法执行转换。
image.png
实战
-
[] + [] //" "
-
首先左边的[]调用valueOf()方法,发现还是[],所以去调用toString()方法。
[].toString() //" "
-
有一边是字符串,所以左边的也要转化为字符串,也变成"",
"" + "" ="" //空字符串+空字符串 = 空字符串
-
(! + [] + [] + ![]).length
-
因为!是一元运算符,所以我们得出了这样的运算规则
image.png -
!后面的+[]会变成数字0,![]会变成”false"那么我们就会得到
!0 + [] + “false"
-
因为有字符串的存在,所以!0转换为字符串就是"true",[]转换为字符串就是“”
那么我们就会得到“true"+""+"false" //”truefalse“
-
所以
( ”truefalse").length //9
参考文章:
https://mp.weixin.qq.com/s/wd8JLGtnsoQYfm3K7KXO0g
最近又在工作中遇到了一个类型转换的坑!!!
更新
image.png
由上图我们可以看到,左边框是一个存在的世界,右边框是一个空的世界。
只要拿左边框的和右边的比较,都会得到false.
N表示ToNumber操作,即将操作数转为数字。它是规范中的抽象操作,但我们可以用JS中的Number()函数来等价替代。
P表示ToPrimitive操作,即将操作数转为原始类型的值。它也是规范中的抽象操作,同样也可以翻译成等价的JS代码。不过稍微复杂一些,简单说来,对于一个对象obj:
- undefined == null,结果是true。且它俩与所有其他值比较的结果都是false。
- String == Boolean,需要两个操作数同时转为Number。
- String/Boolean == Number,需要String/Boolean转为Number。
- Object == Primitive,需要Object转为Primitive(具体通过valueOf和toString方法)。
ToPrimitive(obj)等价于:先计算obj.valueOf(),如果结果为原始值,则返回此结果;否则,计算obj.toString(),如果结果是原始值,则返回此结果;否则,抛出异常。
//大坑
console.log ( [] == 0 );//true
console.log ( ! [] == 0 );//true
//神坑
console.log ( [] == ! [] );//true
console.log ( [] == [] );//false
//史诗级坑
console.log({} == !{});//false
console.log({} == {});//false
[]==[],两个的地址都不一样,肯定是false啦
让我们用愉快的心情来从头到尾看一下 [] == ![]的比较过程
下面是运算符的优先级
image.png image.png
总结一下比较常用的符号的优先级
( ) > !(逻辑非) > +,-(一元加法,一元减法) > * ,/, % > ==,===
很明显,取反的优先级高于==(取反运算符得到的结果是boolean值)