js隐式类型转换

2019-05-2991次阅读javascript
  • 装箱转换:把基本类型转换为对应的包装类型(Boolean、Number、String)。
  • 拆箱操作:把引用类型转换为基本类型。

既然原始类型不能扩展属性和方法,那么我们是如何使用原始类型调用方法的呢?

每当我们操作一个基础类型时,后台就会自动创建一个包装类型的对象,从而让我们能够调用一些方法和属性,例如下面的代码:

var name = "ConardLi";
var name2 = name.substring(2);

实际上发生了以下几个过程:

  1. 创建一个String的包装类型实例
  2. 在实例上调用substring方法
  3. 销毁实例

也就是说,我们使用基本类型调用方法,就会自动进行装箱和拆箱操作,相同的,我们使用Number和Boolean类型时,也会发生这个过程。

引用类型到基本类型的转换,也就是拆箱的过程中,会遵循ECMAScript规范规定的toPrimitive原则,一般会调用引用类型的valueOf和toString方法,你也可以直接重写toPeimitive方法。一般转换成不同类型的值遵循的原则不同,例如:

  • 引用类型转换Number类型先调用valueOf,再调用toString
  • 引用类型转换String类型先调用toString,再调用valueOf

若valueOf和toString都不存在,或者没有返回基本类型,则抛出TypeError异常。

const obj = {
  valueOf: () => { console.log('valueOf'); return 123; },
  toString: () => { console.log('toString'); return 'ConardLi'; },
};
console.log(obj - 1);   // valueOf   122
console.log(`${obj}ConardLi`); // toString  ConardLiConardLi

const obj2 = {
  [Symbol.toPrimitive]: () => { console.log('toPrimitive'); return 123; },
};
console.log(obj2 - 1);   // valueOf   122

const obj3 = {
  valueOf: () => { console.log('valueOf'); return {}; },
  toString: () => { console.log('toString'); return {}; },
};
console.log(obj3 - 1);  
// valueOf  
// toString
// TypeError

除了程序中的自动拆箱和自动装箱,我们还可以手动进行拆箱和装箱操作。我们可以直接调用包装类型的valueOf或toString,实现拆箱操作:

var num =new Number("123");  
console.log( typeof num.valueOf() ); //number
console.log( typeof num.toString() ); //string

 

js隐式类型转换

if语句和逻辑语句中,如果只有单个变量,会先将变量转换为Boolean值,只有下面几种情况会转换成false,其余被转换成true:

null
undefined
''
NaN
0
false

各种运数学算符

我们在对各种非Number类型运用数学运算符(- * /)时,会先将非Number类型转换为Number类型;

1 - true // 0
1 - null //  1
1 * undefined //  NaN
2 * ['5'] //  10

注意+是个例外,执行+操作符时

  1. 一侧为String类型,被识别为字符串拼接,并会优先将另一侧转换为字符串类型
  2. 一侧为Number类型,另一侧为原始类型,则将原始类型转换为Number类型
  3. 一侧为Number类型,另一侧为引用类型,将引用类型和Number类型转换成字符串后拼接
123 + '123' // 123123   (规则1)
123 + null  // 123    (规则2)
123 + true // 124    (规则2)
123 + {}  // 123[object Object]    (规则3)

==

使用==时,若两侧类型相同,则比较结果和===相同,否则会发生隐式转换,使用==时发生的转换可以分为几种不同的情况(只考虑两侧类型不同):

1.NaN

NaN和其他任何类型比较永远返回false(包括和他自己)。

NaN == NaN // false

2.Boolean

Boolean和其他任何类型比较Boolean首先被转换为Number类型

true == 1  // true 
true == '2'  // false
true == ['1']  // true
true == ['2']  // false

这里注意一个可能会弄混的点:undefined、null和Boolean比较,虽然undefined、null和false都很容易被想象成假值,但是他们比较结果是false,原因是false首先被转换成0:

undefined == false // false
null == false // false

3.String和Number

String和Number比较,先将String转换为Number类型

123 == '123' // true
'' == 0 // true


4.null和undefined

null == undefined比较结果是true,除此之外,null、undefined和其他任何结果的比较值都为false。

null == undefined // true
null == '' // false
null == 0 // false
null == false // false
undefined == '' // false
undefined == 0 // false
undefined == false // false


5.原始类型和引用类型

原始类型和引用类型做比较时,对象类型会依照ToPrimitive规则转换为原始类型:

  '[object Object]' == {} // true
  '1,2,3' == [1, 2, 3] // true

来看看下面这个比较:

[] == ![] // true

!的优先级高于==,![]首先会被转换为false,然后根据上面第二点,false转换成Number类型0,左侧[]转换为0,两侧比较相等。

[null] == false // true
[undefined] == false // true

根据数组的ToPrimitive规则数组元素为null或undefined时,该元素被当做空字符串处理,所以[null]、[undefined]都会被转换为0
所以,说了这么多,推荐使用===来判断两个值是否相等...

一道有意思的面试题

一道经典的面试题,如何让:a == 1 && a == 2 && a == 3。

根据上面的拆箱转换,以及==的隐式转换,我们可以轻松写出答案:

const a = {
   value:[3,2,1],
   valueOf: function () {return this.value.pop(); },
} 

摘录自:【JS 进阶】你真的掌握变量和类型了吗

上一篇: 获取网址url查询参数快速转换为对象  下一篇: window.innerHeight、innerWidth浏览器兼容解决方法  

js隐式类型转换相关文章