JavaScript 变量与数据类型（二）

MoonLight
177 阅读6分钟

JavaScript变量与数据类型（二）

在本章里我们将讲解：

  • 特殊的引用类型
  • 类型转换
  • 获取数据类型

一、特殊的引用类型

在ECMAScript中，引用类型是一种数据结构，用于将数据和功能组织在一起。

通常所说的对象，就是某个特定引用类型的实例。

在ECMAScript关于类型的定义中，只给出了Object类型，实际上，我们平时使用的很多引用类型的变量，并不是由Object构造的，但是它们原型链的终点都是Object，这些类型都属于引用类型。

  • Array数组
  • Date日期
  • RegExp正则表达式
  • Function函数
  • 基本类型包装类型

1.1 包装类型

ECMAScript为了便于操作基本数据类型，提供了特殊的引用类型，他们是基本类型的包装类型

  • String
  • Boolean
  • Number

以字符串为例，创建方法：

let str1 = "HelloWorld";
let str2 = new String("HelloWorld");

注意包装类型和基本类型的区别：

true == new Boolean(true);          // true
true === new Boolean(true);         // false
123 == new Number(123);             // true
123 === new Number(123);            // false
"Hello" == new String("Hello");     // true
"Hello" === new String("Hello");    // false
console.log(typeof new String("Hello"));    // object
console.log(typeof "Hello");                // string

引用类型和包装类型的主要区别就是对象的生存期，使用new操作符创建的引用类型的实例，在执行流离开当前作用域之前都一直保存在内存中，而自基本类型则只存在于一行代码的执行瞬间，然后立即被销毁，这意味着我们不能在运行时为基本类型添加属性和方法。(本段话原文照搬）

var name = 'ConardLi'
name.color = 'red';
console.log(name.color); // undefined

1.2 装箱与拆箱

  • 装箱：把基本类型转换为对应的包装类型
  • 拆箱：把包装类型转换为对于的基本类型

基本类型虽然不能扩展属性和方法，但也有一些属性和方法供我们使用（如length,slice,split等），是因为每当我们操作一个基础类型时，后台都会自动创建一个对应的包装类型的对象，从而当我们调用属性和方法的时候，是调用到这个包装类型上面的。
举个例子：

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

其中发生了以下过程：

  • 创建基础类型name，
  • 当name进行操作时，对应后台创建了一个String类型的包装类型的对象
  • 在对象上调用substring()方法
  • 调用完成，摧毁对象

以上过程既是一个装箱的过程
在我们进行基础类型操作的时候，就会自动进行装箱和拆箱的操作，Number 和 Boolean 也是同理

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

  • 引用类型转为Number类型时，会先调用valueOf，再调用toString
  • 引用类型转为String类型时，会先调用toString，再调用valueOf
  • 若valueOf和toString都不存在，或者没有返回基本类型，则抛出TypeError异常
const obj = {
  valueOf: () => { console.log('valueOf'); return 123; },
  toString: () => { console.log('toString'); return 'hello'; },
};
console.log(obj - 1);   // valueOf   122
console.log(`${obj}world`); // toString  helloworld

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(num.valueOf());             // 123;
console.log(typeof num.valueOf() );     //number
console.log(num.toString());            // '123'
console.log(typeof num.toString() );    //string

二、类型转换

javascript是一门弱类型语言，所以经常会发生类型转换（上面的装箱与拆箱也是一种类型转换）

类型转换分为两种：

  • 隐式类型转换：即程序自动进行的类型转换
  • 强制类型转换：即我们手动进行的类型转换

2.1 隐式类型转换

需要了解什么情况下会发生隐式类型转换，以及隐式类型转换的规则

2.1.1 隐式类型转换规则

2.1.2 发生场景

if 语句和逻辑语句

会将其中进行逻辑计算的部分计算完成后得出一个值，然后在进行boolean转换，只有以下情况会转换成false，其余的都转为true

null
undefined
''
NaN
0
false
进行数学运算

我们非Number类型（不含String类型）运用数学运算符运算时，首先会将非Number类型转为Number类型

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

注意：+号是个例外：

  • 当一侧为String类型，被识别为字符串拼接，并会优先将另一侧转换为字符串类型。
  • 当一侧为Number类型，另一侧为原始类型，则将原始类型转换为Number类型。
  • 当一侧为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(); },
}

a与Number类型进行比较的时候，首先会调用valueOf进行隐式转换，每次转换都删除value最后一个元素并返回

三、类型判断

列出 4 种方法

3.1 typeof

typeof操作符可以准确判断一个变量是否为下面几个原始类型：

typeof 'ConardLi'  // string
typeof 123  // number
typeof true  // boolean
typeof Symbol()  // symbol
typeof undefined  // undefined

你还可以用它来判断函数类型：

typeof function(){}  // function

但用于判断引用类型时就有些不友好

typeof [] // object
typeof {} // object
typeof new Date() // object
typeof /^\d*$/; // object

除函数外所有的引用类型都会被判定为object。
以及：(js的一个小bug)

   tyoeof null      // object

3.2 instanceof

instanceof操作符可以帮助我们判断引用类型具体是什么类型的对象：

[] instanceof Array // true
new Date() instanceof Date // true
new RegExp() instanceof RegExp // true

我们先来回顾下原型链的几条规则：

  • 1.所有引用类型都具有对象特性，即可以自由扩展属性
  • 2.所有引用类型都具有一个__proto__（隐式原型）属性，是一个普通对象
  • 3.所有的函数都具有prototype（显式原型）属性，也是一个普通对象
  • 4.所有引用类型__proto__值指向它构造函数的prototype
  • 5.当试图得到一个对象的属性时，如果变量本身没有这个属性，则会去他的__proto__中去找

[] instanceof Array实际上是判断Array.prototype是否在[]的原型链上。

同理，我们可以使用instanceof进行判断的对象与构造函数是否再同一原型链上：

let a1 = new Aaa();
let a2 = [];
console.log(a1 instanceof Aaa);     // true
console.log(a2 instanceof Aaa);     // false
console.log(a2 instanceof Array);   // true

instanceof无法直观的检查数据类型，同时不能够跨iframe

3.3 toString()

在拆箱操作中提到了toString函数，我们可以调用它实现从引用类型的转换。

每一个引用类型都有toString方法，默认情况下，toString()方法被每个Object对象继承。如果此方法在自定义对象中未被覆盖，toString() 返回 "[object type]"，其中type是对象的类型。

const obj = {};
obj.toString() // [object Object]

注意，上面提到了如果此方法在自定义对象中未被覆盖，toString才会达到预想的效果，事实上，大部分引用类型比如Array、Date、RegExp等都重写了toString方法。

我们可以直接调用Object原型上未被覆盖的toString()方法，使用call来改变this指向来达到我们想要的效果。
可以指向Object的原型方法来调用toString方法，就不怕重写，但是代码会非常冗长

3.4 constructor

我们可以通过 constructor来查看对象对应的构造函数，其中也包括包装类型
例如：

let str = "hello";
let num = 123;
let bool = true;
console.log(str.constructor);       // String
console.log(num.constructor);       // Number
console.log(bool.constructor);      // Boolean

我们调用基础类型的方法时，会自动调用其对应的包装类型的方法，通过constructor来返回其对应的构造函数
同样我们可以对引用类型进行：

let obj1 = {};
let obj2 = [];
console.log(obj1.constructor);      // Object
console.log(obj2.constructor);      // Array
function Aaa(){};
console.log(Aaa.constructor);       // Function

但是constructor无法判断null与undefined会报TypeError错误：

let a = null;
let b = undefined;
console.log(a.constructor);     // TypeError
console.log(b.constructor);     // TypeError

3.5 jquery

我们来看看jquery源码中如何进行类型判断：

var class2type = {};
jQuery.each( "Boolean Number String Function Array Date RegExp Object Error Symbol".split( " " ),
function( i, name ) {
	class2type[ "[object " + name + "]" ] = name.toLowerCase();
} );

type: function( obj ) {
	if ( obj == null ) {
		return obj + "";
	}
	return typeof obj === "object" || typeof obj === "function" ?
		class2type[Object.prototype.toString.call(obj) ] || "object" :
		typeof obj;
}

isFunction: function( obj ) {
		return jQuery.type(obj) === "function";
}

原始类型直接使用typeof，引用类型使用Object.prototype.toString.call取得类型，借助一个class2type对象将字符串多余的代码过滤掉，例如[object function]将得到array，然后在后面的类型判断，如isFunction直接可以使用jQuery.type(obj) === "function"这样的判断。

3.6 优缺点判断

  • typeof:

优点： 方便快捷，对基础数据类型判断精准（除了null）
缺点： 基础类型null返回object，引用类型除了Function其他都返回Object

  • instanceof:

优点： 可以直接判断数据与对象是否再同一原型链上
缺点： 无法直观返回数据类型，不能检测基础数据类型，不能跨iframe

  • toString

优点： 适应各种类型，返回的数据类型更精确
缺点： 易被重写，直接调用原型方法的话书写不易且代码冗长，IE6以下的undefined和null返回为object

  • constructor

优点： 返回的数据类型更精确
缺点： 无法判断null与undefined，易被修改，无法跨iframe

新人一枚，还请多多包涵
文中内容如果有误，欢迎私信或评论指正。
特别鸣谢：conardli的博客

avatar
文章
阅读
粉丝