JS 数据类型，数据类型的判断，类型转换

柔情只为你懂 2022-01-15 03:51 475阅读 0赞

参考文章：

*  [js 深拷贝 vs 浅拷贝][js _ vs]
 *  [JavaScript 数据类型和数据结构 -- MDN][Java_Script _ -- MDN]
 *  [InterviewMap -yck][]

# 数据类型 #

JS中分为七种数据类型，七种内置类型又分为两大类型：`6种基本类型`和`Object`

## 1.基本类型 ##

基本类型主要是： `Undefined`、`Boolean`、`String`、`Number`、`Null`、`Symbol`(ECMAScript 6 新定义)；

### 存放在栈中 ###

基本类型存储在栈内存中，数据大小确定，内存空间大小可以分配，按值存放，所以可直接访问

### 值不可变 ###

> javascript中的原始值（undefined、null、布尔值、数字和字符串）与对象（包括数组和函数）有着根本区别。原始值是不可更改的：任何方法都无法更改（或“突变”）一个原始值。对数字和布尔值来说显然如此 —— 改变数字的值本身就说不通，而对字符串来说就不那么明显了，因为字符串看起来像由字符组成的数组，我们期望可以通过指定索引来假改字符串中的字符。实际上，javascript 是禁止这样做的。**字符串中所有的方法看上去返回了一个修改后的字符串，实际上返回的是一个新的字符串值**。

值不可变，但可以重新赋值，例如：

1.  `var a = "123";`
2.   
3.  `console.log(a[1]='0'); //0`
4.   
5.  `console.log(a); //123`
6.   
7.  `a = "234";`
8.   
9.  `console.log(a); //234`
10. `复制代码`

### 基本类型的比较是值的比较 ###

只要值相等就认为是相等的，推荐使用`===`进行比较，例如：

1.  `var a = 1;`
2.  `var b = 1;`
3.  `var c = true;`
4.  `console.log(a === b); //true`
5.  `console.log(a == c); //true '=='会进行类型转换`
6.  `复制代码`

## 2. 引用类型 ##

引用数据类型统称为 Object 对象，主要包括对象、数组、函数、日期和正则

### 存放在堆中 ###

堆内存中是无序存放

引用类型存放在堆内存中，变量实际上是一个存放在栈内存的指针，这个指针指向堆内存中的地址。每个空间大小不一样，要根据情况进行特定的分配，例如：

1.  `var person1 = {name: 'joj'};`
2.  `var person2 = {name: 'xiaomi'};`
3.  `var person3 = {name: 'xiaoyang'};`
4.  `复制代码`

![引用类型的存放][1]

### 值可变 ###

例如：

1.  `var a = [1, 3];`
2.  `a[1] = 2;`
3.  `console.log(a); //[1, 2]`
4.  `复制代码`

### 引用类型的比较是引用的比较 ###

每次我们对js中的引用类型进行操作的时候，都是操作其对象的引用（保存在栈内存中的指针），所以比较两个引用类型，看是否指向同一个对象。例如:

1.  `var a = [1, 2, 3];`
2.  `var b = [1, 2, 3];`
3.  `console.log(a === b); //false`
4.  `复制代码`

虽然变量a,b表示的是同一个内容，但其在内存中的位置不一样，指向的不是同一个对象，所以不相等。

![1 1][]

# 数据类型的判断 #

## typeof ##

返回一个表示数据类型的字符串，返回结果包括：number、boolean、string、symbol、object、undefined、function等7种数据类型，但**不能判断null、array等**

1.  `typeof Symbol(); // symbol 有效`
2.  `typeof ''; // string 有效`
3.  `typeof 1; // number 有效`
4.  `typeof true; //boolean 有效`
5.  `typeof undefined; //undefined 有效`
6.  `typeof new Function(); // function 有效`
7.  `typeof null; //object 无效`
8.  `typeof [] ; //object 无效`
9.  `typeof new Date(); //object 无效`
10. `typeof new RegExp(); //object 无效`
11. `复制代码`

## instanceof ##

用来判断A是否为B的实例，`A instanceof B`， 返回 boolean 值。instanceof 用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性，但**它不能检测 null 和 undefined**

1.  `[] instanceof Array; //true`
2.  `{} instanceof Object;//true`
3.  `new Date() instanceof Date;//true`
4.  `new RegExp() instanceof RegExp//true`
5.  `null instanceof Null//报错`
6.  `undefined instanceof undefined//报错`
7.  `复制代码`

## Object.prototype.toString.call() ##

最准确最常用

1.  `Object.prototype.toString.call('') ; // [object String]`
2.  `Object.prototype.toString.call(1) ; // [object Number]`
3.  `Object.prototype.toString.call(true) ; // [object Boolean]`
4.  `Object.prototype.toString.call(undefined) ; // [object Undefined]`
5.  `Object.prototype.toString.call(null) ; // [object Null]`
6.  `Object.prototype.toString.call(new Function()) ; // [object Function]`
7.  `Object.prototype.toString.call(new Date()) ; // [object Date]`
8.  `Object.prototype.toString.call([]) ; // [object Array]`
9.  `Object.prototype.toString.call(new RegExp()) ; // [object RegExp]`
10. `Object.prototype.toString.call(new Error()) ; // [object Error]`
11. `复制代码`

# 类型转换 #

## 转Boolean ##

在条件判断时，`undefined`， `null`， `false`， `NaN`， `''`， `±0` 转为 `false`, 其余都为`true`。

## 对象转基本类型 ##

对象转基本类型，调用优先级 [`Symbol.toPrimitive`][Symbol.toPrimitive] > `valueOf()` > `toString()`，方法皆可重写

1.  `var a = {`
2.  `valueOf() {`
3.  `return 1;`
4.  `},`
5.  `toString() {`
6.  `return 2;`
7.  `},`
8.  `[Symbol.toPrimitive]() {`
9.  `return 3;`
10. `}`
11. `}`
12. `a + 1; //4`
13. `a + '1'; //31`
14. `复制代码`

### 对象键名的转换 ###

*  对象的键名只能是**字符串和Symbol类型**
 *  其它类型的键名会被转换成字符串类型
 *  对象转字符串默认会调用 toString 方法

**栗子1：**

1.  `var a = {}, b = '123', c = 123;`
2.  `a[b] = 'b';`
3.   
4.  `// c 的键名会被转换成字符串‘123’，会覆盖掉 b`
5.  `a[c] = 'c';`
6.   
7.  `//输出 c`
8.  `console.log(a[b])`
9.  `复制代码`

**栗子2：**

1.  `var a = {}, b = Symbol('123'), c = Symbol('123');`
2.   
3.  `// b 是 Symbol 类型，不需要转换`
4.  `a[b] = 'b';`
5.   
6.  `// c 是 Symbol 类型，不需要转换。任何一个 Symbol 类型的值都是不相等的，所以不会覆盖掉 b。`
7.  `a[c] = 'c';`
8.   
9.  `//输出 b`
10. `console.log(a[b])`
11. `复制代码`

**栗子3：**

1.  `var a={}, b={key:'123'}, c={key:'456'};`
2.   
3.  `// b 不是字符串也不是 Symbol 类型，需要转换成字符串。`
4.  `// 对象类型会调用 toString 方法转换成字符串 [object Object]。`
5.  `a[b]='b';`
6.   
7.  `// c 不是字符串也不是 Symbol 类型，需要转换成字符串。`
8.  `// 对象类型会调用 toString 方法转换成字符串 [object Object]。这里会把 b 覆盖掉。`
9.  `a[c]='c';`
10.  
11. `// 输出 c`
12. `console.log(a[b]);`
13. `复制代码`

## 四则运算符 ##

*  加法运算符：一方是字符串类型，另一方就会被转为字符串类型
 *  其他运算符：一方是数字，另一方就会被转为数字

1.  `1 + '1'; // '11'`
2.  `2 * '2'; // 4`
3.  `[1, 2] + [2, 1]; // '1,22,1'`
4.  `// [1, 2].toString() -> '1,2'`
5.  `// [2, 1].toString() -> '2,1'`
6.  `// '1,2' + '2,1' = '1,22,1'`
7.   
8.  `// 神奇！`
9.  `'a' + + 'b' // -> "aNaN"`
10. `// 因为 + 'b' -> NaN`
11. `// 你也许在一些代码中看到过 + '1' -> 1`
12. `复制代码`

## ==运算符 ##

![来自yck][yck]

其中，`toPrimitive()` 用于对象转基本类型

栗子：

1.  `// [] 转成 true，然后取反变成 false`
2.  `[] == false`
3.  `// 根据第 8 条得出`
4.  `[] == ToNumber(false)`
5.  `[] == 0`
6.  `// 根据第 10 条得出`
7.  `ToPrimitive([]) == 0`
8.  `// [].toString() -> ''`
9.  `'' == 0`
10. `// 根据第 6 条得出`
11. `0 == 0 // -> true`
12. `复制代码`

## 比较运算符 ##

*  如果是对象，就通过 `toPrimitive` 转换对象
 *  如果是字符串，就通过 `unicode` 字符索引来比较

转载：[https://juejin.im/post/5cff51b15188251260273f84][https_juejin.im_post_5cff51b15188251260273f84]

[js _ vs]: https://juejin.im/post/59ac1c4ef265da248e75892b
[Java_Script _ -- MDN]: https://link.juejin.im/?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FJavaScript%2FData_structures
[InterviewMap -yck]: https://link.juejin.im/?target=https%3A%2F%2Fyuchengkai.cn%2Fdocs%2Ffrontend%2F
[1]: https://user-gold-cdn.xitu.io/2019/6/11/16b45580afa5c3ec?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 1]: https://user-gold-cdn.xitu.io/2019/6/11/16b455925abcbe76?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[Symbol.toPrimitive]: https://link.juejin.im/?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FJavaScript%2FReference%2FGlobal_Objects%2FSymbol%2FtoPrimitive
[yck]: https://user-gold-cdn.xitu.io/2019/6/11/16b45857704ebf53?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[https_juejin.im_post_5cff51b15188251260273f84]: https://juejin.im/post/5cff51b15188251260273f84