js中的数据类型_js中不是son数据-CSDN博客

本文链接：https://blog.csdn.net/qq_34691738/article/details/115521278

1、数据类型

数据类型主要包含有：number，boolean，null，undefine，string，symbol，BigInt，object：{array，object，function，Date，Math，RegExp}；
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-miauP8wK-1617866092312)(https://s0.lgstatic.com/i/image2/M01/04/F0/CgpVE1_4DdGAJ_EXAAE38RQC0js096.png)]
其中前7中为基础类型，object为引用类型：Array - 数组对象、RegExp - 正则对象、Date - 日期对象、Math - 数学函数、Function - 函数对象。

基础类型存储在栈内存，被引用或拷贝时，会创建一个完全相等的变量；

引用类型存储在堆内存，存储的是地址，多个引用指向同一个地址，这里会涉及一个“共享”的概念。

let a = {
  name: 'lee',
  age: 18
}
let b = a;
console.log(a.name);  //lee
b.name = 'son';
console.log(a.name);  //son
console.log(b.name);  //son

let a = {

  name: 'Julia',

  age: 20

}

function change(o) {

  o.age = 24;

  o = {

    name: 'Kath',

    age: 30

  }

  return o;

}

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

console.log(b.age);    //30 第一个console

console.log(a.age);    // 24 第二个console

这里的 function 和 return 带来了不一样的东西。

原因在于：函数传参进来的 o，传递的是对象在堆中的内存地址值，通过调用 o.age = 24（第 7 行代码）确实改变了 a 对象的 age 属性；但是第 12 行代码的 return 却又把 o 变成了另一个内存地址，将 {name: “Kath”, age: 30} 存入其中，最后返回 b 的值就变成了 {name: “Kath”, age: 30}。而如果把第 12 行去掉，那么 b 就会返回 undefined。这里你可以再仔细琢磨一下。

数据类型检测

typeof和instanceof

typeof 检测

typeof 1 // 'number'

typeof '1' // 'string'

typeof undefined // 'undefined'

typeof true // 'boolean'

typeof Symbol() // 'symbol'

typeof null // 'object'

typeof [] // 'object'

typeof {} // 'object'

typeof console // 'object'

typeof console.log // 'function'

typeof null 等于 object 但这不代表null是引用类型的数据结构，这是js长期存在的bug，所以不能通过typeof 判断是否为null，直接if（xxx === null），
object 除了function判断正确外，其余都为object，是无法通过typeof判断出来的

instanceof 检测

想必 instanceof 的方法你也听说过，我们 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

instanceof可以准确的判断出复杂引用的类型，却不能判断基础数据类型
typeof可以判断除null外的基础数据类型，但是引用类型中只能判断function，其余不能判断。可以两者混合使用。当然也有更好的判断方法：

Object.prototype.toString 判断

toString() 是 Object 的原型方法，调用该方法，可以统一返回格式为 “[object Xxx]” 的字符串，其中 Xxx 就是对象的类型。对于 Object 对象，直接调用 toString() 就能返回 [object Object]；而对于其他对象，则需要通过 call 来调用，才能返回正确的类型信息。我们来看一下代码。

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]"

从上面这段代码可以看出，Object.prototype.toString.call() 可以很好地判断引用类型，甚至可以把 document 和 window 都区分开来。

但是在写判断条件的时候一定要注意，使用这个方法最后返回统一字符串格式为 “[object Xxx]” ，而这里字符串里面的 “Xxx” ，第一个首字母要大写（注意：使用 typeof 返回的是小写），这里需要多加留意。

那么下面来实现一个全局通用的数据类型判断方法，来加深你的理解，代码如下:

function getType(obj){

  let type  = typeof obj;

  if (type !== "object") {    // 先进行typeof判断，如果是基础数据类型，直接返回

    return type;

  }

  // 对于typeof返回结果是object的，再进行如下的判断，正则返回结果

  return Object.prototype.toString.call(obj).replace(/^\[object (\S+)\]$/, '$1');  // 注意正则中间有个空格

}

/* 代码验证，需要注意大小写，哪些是typeof判断，哪些是toString判断？思考下 */

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()，这几

''==null
false
''==0
true
[]==0
true
[]==''
true
''==null
false
'123'==123
true
null == undefined
true
null === undefined
false
Number(null)
0
Number('')
0
parseInt('')
NaN
{} + 10
10


let obj = {
    [Symbol.toPrimitive]() {
        return 200;
    },
    valueOf() {
        return 300;
    },
    toString() {
        return 'Hello';
    }
}
console.log(obj + 200)
VM1519:12 400

Number() 方法的强制转换规则

如果是布尔值，true 和 false 分别被转换为 1 和 0；

如果是数字，返回自身；

如果是 null，返回 0；

如果是 undefined，返回 NaN；

如果是字符串，遵循以下规则：如果字符串中只包含数字（或者是 0X / 0x 开头的十六进制数字字符串，允许包含正负号），则将其转换为十进制；如果字符串中包含有效的浮点格式，将其转换为浮点数值；如果是空字符串，将其转换为 0；如果不是以上格式的字符串，均返回 NaN；

如果是 Symbol，抛出错误；

如果是对象，并且部署了 [Symbol.toPrimitive] ，那么调用此方法，否则调用对象的 valueOf() 方法，然后依据前面的规则转换返回的值；如果转换的结果是 NaN ，则调用对象的 toString() 方法，再次依照前面的顺序转换返回对应的值（Object 转换规则会在下面细讲）。

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。

Boolean(0)          //false

Boolean(null)       //false

Boolean(undefined)  //false

Boolean(NaN)        //false

Boolean(1)          //true

Boolean(13)         //true

Boolean('12')       //true

隐式类型转换

下面着重讲解一下日常用得比较多的“==”和“+”这两个符号的隐式转换规则。

‘==’ 的隐式类型转换规则

如果类型相同，无须进行类型转换；

如果其中一个操作值是 null 或者 undefined，那么另一个操作符必须为 null 或者 undefined，才会返回 true，否则都返回 false；

如果其中一个是 Symbol 类型，那么返回 false；

两个操作值如果为 string 和 number 类型，那么就会将字符串转换为 number；

如果一个操作值是 boolean，那么转换成 number；

如果一个操作值为 object 且另一方为 string、number 或者 symbol，就会把 object 转为原始类型再进行判断（调用 object 的 valueOf/toString 方法进行转换）。

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、布尔型或数字，则会将其转换成数字进行加法运算，对象的情况还是参考上一条规则。

如果其中一个是字符串、一个是数字，则按照字符串规则进行拼接。

Object 的转换规则

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

如果部署了 Symbol.toPrimitive 方法，优先调用再返回；

调用 valueOf()，如果转换为基础类型，则返回；

调用 toString()，如果转换为基础类型，则返回；

如果都没有返回基础类型，会报错。

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条规则