数据类型及转换

数据类型分类

JS 中的数据类型

基础数据类型 undefined, null, Boolean, String, Number, Symbol, BigInt
引用类型 Object(Array, RegExp, Date, Math, Function...)

基础数据类型存储在栈内存，被引用或拷贝时，会直接在栈内存中创建一个完全相等的变量引用数据类型存储在堆内存，存储的是指向内存的地址，多个引用指向同一个地址

javascript

const a = {
  name: "Julia",
  age: 20,
};

function change(o) {
  o.age = 24;
  o = {
    name: "Kathy",
    age: 30,
  };
  return o;
}

let b = change(a); //注意这里没有new，后面new相关会有专门文章讲解
console.log(b.age); // 30
console.log(a.age); // 24

数据类型检测方法

typeof

比较适合用来检测基础数据类型 ，但是 null 会判断为 object，这是 js 的一个历史遗留 bug。判断是否是 null，可以用 === null 来判断。

javascript

typeof 1; // 'number'

typeof "1"; // 'string'

typeof undefined; // 'undefined'

typeof true; // 'boolean'

typeof Symbol(); // 'symbol'

typeof BigInt(0); // 'biginit'

typeof null; // 'object'

typeof []; // 'object'

typeof {}; // 'object'

typeof console; // 'object'

typeof console.log; // 'function'

typeof 原理

js 在底层存储变量的时候，会在变量的机器码的低位 1-3 位存储其类型信息。

000：对象
010：浮点数
100：字符串
110：布尔
1：整数

但是对于 undefined 和 null 来说有点特殊

null：所有机器码均为 0
undefined：用 −2^30 整数来表示

所以，typeof 在判断 null 的时候就出现问题了，由于 null 的所有机器码均为 0，因此直接被当做了对象来看待。

instanceof

是通过判断原型链来实现的，因此比较适合用来判断对象类型。但是要注意 null 是无法被判断的。

javascript

// 我们new 一个对象，那么这个新对象就是它原型链继承上面的对象了
// 通过 instanceof 我们能判断这个对象是否是之前那个构造函数生成的对象
// 这样就基本可以判断出这个新对象的数据类型
let Car = function () {};

let benz = new Car();

benz instanceof Car; // true

let car = new String("Mercedes Benz");

car instanceof String; // true

let str = "Covid-19";

str instanceof String; // false

null instanceof null; // TypeError: Right-hand side of 'instanceof' is not an object

instanceof 原理

javascript

function myInstanceof(left, right) {
  // 这里先用typeof来判断基础数据类型，如果是，直接返回false
  if (typeof left !== "object" || left === null) return false;

  // getProtypeOf是Object对象自带的API，能够拿到参数的原型对象
  let proto = Object.getPrototypeOf(left);

  //循环往下寻找，直到找到相同的原型对象
  while (true) {
    if (proto === null) return false;

    if (proto === right.prototype) return true; //找到相同原型对象，返回true

    proto = Object.getPrototypeof(proto);
  }
}

// 验证一下自己实现的 myInstanceof 是否OK

console.log(myInstanceof(new Number(123), Number)); // true

console.log(myInstanceof(123, Number)); // false

Object.prototype.toString

会同意返回格式为 [object Xxx] 的字符串，其中 Xxx 就是对象的类型。这里字符串里面的 Xxx，第一个首字母要大写对于 Object 对象，直接调用 toString() 就能返回 [object Object]；而对于其他对象，则需要通过 call 来调用，才能返回正确的类型信息。

javascript

Object.prototype.toString({}); // "[object Object]"

Object.prototype.toString.call({}); // 同上结果，加上call也ok

Object.prototype.toString.call(1); // "[object Number]"

Object.prototype.toString.call("1"); // "[object String]"

Object.prototype.toString.call(true); // "[object Boolean]"

Object.prototype.toString.call(function () {}); // "[object Function]"

Object.prototype.toString.call(null); //"[object Null]"

Object.prototype.toString.call(undefined); //"[object Undefined]"

Object.prototype.toString.call(/123/g); //"[object RegExp]"

Object.prototype.toString.call(new Date()); //"[object Date]"

Object.prototype.toString.call([]); //"[object Array]"

Object.prototype.toString.call(document); //"[object HTMLDocument]"

Object.prototype.toString.call(window); //"[object Window]"

根据上述三种方法实现自己的判断类型方法

javascript

function getType(obj) {
  const type = typeof obj;

  if (type !== "object") {
    return type;
  }

  return Object.prototype.toString
    .call(obj)
    .replace(/^\[object (\s+)\]$/, "$1");
}

getType([]); // "Array" typeof []是object，因此toString返回

getType("123"); // "string" typeof 直接返回

getType(window); // "Window" toString返回

getType(null); // "Null"首字母大写，typeof null是object，需toString来判断

getType(undefined); // "undefined" typeof 直接返回

getType(); // "undefined" typeof 直接返回

getType(function () {}); // "function" typeof能判断，因此首字母小写

getType(/123/g); //"RegExp" toString返回

数据类型转换

强制类型转换

强制类型转换方式包括

Number()
parseInt()
parseFloat()
toString()
String()
Boolean()

Number() 强制类型转换规则

如果是布尔值, true 和 false 分别被转换为 1 和 0；
如果是数字，返回自身；
如果是 null，返回 0；
如果是 undefined，返回 NaN；
如果是字符串，遵循以下规则：
- 如果字符串中只包含数字（或者是 0X / 0x 开头的十六进制数字字符串，允许包含正负号），则将其转换为十进制；
- 如果字符串中包含有效的浮点格式，将其转换为浮点数值；
- 如果是空字符串，将其转换为 0；
- 如果不是以上格式的字符串，均返回 NaN；
如果是 Symbol，抛出错误；
如果是对象，并且部署了 [Symbol.toPrimitive] ，那么调用此方法，否则调用对象的 valueOf() 方法，然后依据前面的规则转换返回的值；如果转换的结果是 NaN ，则调用对象的 toString() 方法，再次依照前面的顺序转换返回对应的值（Object 转换规则会在下面细讲）。

javascript

Number(true); // 1

Number(false); // 0

Number("0111"); //111

Number(null); //0

Number(""); //0

Number("1a"); //NaN

Number(-0x11); //-17

Number("0X11"); //17

Boolean() 强制类型转换规则

除了 undefined、null、 false、 ''、 0（包括 +0，-0）、 NaN 转换出来是 false，其他都是 true

javascript

Boolean(0); //false

Boolean(null); //false

Boolean(undefined); //false

Boolean(NaN); //false

Boolean(1); //true

Boolean(13); //true

Boolean("12"); //true

隐式类型转换

凡是通过逻辑运算符 (&&、 ||、 !)、运算符 (+、-、*、/)、关系操作符(>、<、<=、>=)、相等运算符(==)或者 if/while 条件的操作，如果遇到两个数据类型不一样的情况，都会出现隐式类型转换。

`==` 的隐式类型转换规则

如果类型相同，无须进行类型转换；
如果其中一个操作值是 null 或者 undefined，那么另一个操作符必须为 null 或者 undefined，才会返回 true，否则都返回 false；
如果其中一个是 Symbol 类型，那么返回 false；
两个操作值如果为 string 和 number 类型，那么就会将字符串转换为 number；
如果一个操作值是 boolean，那么转换成 number；
如果一个操作值为 object 且另一方为 string、number 或者 symbol，就会把 object 转为原始类型再进行判断（调用 object 的 valueOf/toString 方法进行转换）。

javascript

null == undefined; // true  规则2

null == 0; // false 规则2

"" == null; // false 规则2

"" == 0; // true  规则4 字符串转隐式转换成Number之后再对比

"123" == 123; // true  规则4 字符串转隐式转换成Number之后再对比

0 == false; // true  e规则 布尔型隐式转换成Number之后再对比

1 == true; // true  e规则 布尔型隐式转换成Number之后再对比

var a = {
  value: 0,
  valueOf: function () {
    this.value++;
    return this.value;
  },
};

// 注意这里a又可以等于1、2、3

console.log(a == 1 && a == 2 && a == 3); //true f规则 Object隐式转换

// 注：但是执行过3遍之后，再重新执行a==3或之前的数字就是false，因为value已经加上去了，这里需要注意一下

`+` 的隐式类型转换规则

+ 号操作符，不仅可以用作数字相加，还可以用作字符串拼接。仅当 + 号两边都是数字时，进行的是加法运算；如果两边都是字符串，则直接拼接，无须进行隐式类型转换。

如果其中有一个是字符串，另外一个是 undefined、null 或布尔型，则调用 toString() 方法进行字符串拼接；如果是纯对象、数组、正则等，则默认调用对象的转换方法会存在优先级（下一讲会专门介绍），然后再进行拼接。
如果其中有一个是数字，另外一个是 undefined、null、布尔型或数字，则会将其转换成数字进行加法运算，对象的情况还是参考上一条规则
如果其中一个是字符串、一个是数字，则按照字符串规则进行拼接。

javascript

1 + 2; // 3  常规情况

"1" + "2"; // '12' 常规情况

// 下面看一下特殊情况

"1" + undefined; // "1undefined" 规则1，undefined转换字符串

"1" + null; // "1null" 规则1，null转换字符串

"1" + true; // "1true" 规则1，true转换字符串

"1" + 1n; // '11' 比较特殊字符串和BigInt相加，BigInt转换为字符串

1 + undefined; // NaN  规则2，undefined转换数字相加NaN

1 + null; // 1    规则2，null转换为0

1 + true; // 2    规则2，true转换为1，二者相加为2

1 + 1n; // 错误  不能把BigInt和Number类型直接混合相加

"1" + 3; // '13' 规则3，字符串拼接

`Object` 的转换规则

对象转换的规则，会先调用内置的 [ToPrimitive] 函数，其规则逻辑如下：

如果部署了 Symbol.toPrimitive 方法，优先调用再返回；
调用 valueOf()，如果转换为基础类型，则返回；
调用 toString()，如果转换为基础类型，则返回；
如果都没有返回基础类型，会报错。

javascript

var obj = {
  value: 1,
  valueOf() {
    return 2;
  },
  toString() {
    return "3";
  },
  [Symbol.toPrimitive]() {
    return 4;
  },
};
console.log(obj + 1); // 输出5

// 因为有Symbol.toPrimitive，就优先执行这个；如果Symbol.toPrimitive这段代码删掉，则执行valueOf打印结果为3；如果valueOf也去掉，则调用toString返回'31'(字符串拼接)

// 再看两个特殊的case：
10 + {};
// "10[object Object]"，注意：{}会默认调用valueOf是{}，不是基础类型继续转换，调用toString，返回结果"[object Object]"，于是和10进行'+'运算，按照字符串拼接规则来，参考'+'的规则C

[1, 2, undefined, 4, 5] + 10;
// "1,2,,4,510"，注意[1,2,undefined,4,5]会默认先调用valueOf结果还是这个数组，不是基础数据类型继续转换，也还是调用toString，返回"1,2,,4,5"，然后再和10进行运算，还是按照字符串拼接规则，参考'+'的第3条规则

数据类型及转换 ​

数据类型分类 ​

数据类型检测方法 ​

typeof ​

typeof 原理 ​

instanceof ​

instanceof 原理 ​

Object.prototype.toString ​

根据上述三种方法实现自己的判断类型方法 ​

数据类型转换 ​

强制类型转换 ​

Number() 强制类型转换规则 ​

Boolean() 强制类型转换规则 ​

隐式类型转换 ​

== 的隐式类型转换规则 ​

+ 的隐式类型转换规则 ​

Object 的转换规则 ​

数据类型及转换

数据类型分类

数据类型检测方法

typeof

typeof 原理

instanceof

instanceof 原理

Object.prototype.toString

根据上述三种方法实现自己的判断类型方法

数据类型转换

强制类型转换

Number() 强制类型转换规则

Boolean() 强制类型转换规则

隐式类型转换

`==` 的隐式类型转换规则

`+` 的隐式类型转换规则

`Object` 的转换规则