js的数据类型

intrepidyouth

已于 2022-05-13 09:48:40 修改

阅读量346

点赞数

分类专栏： javascript 文章标签： javascript 前端开发语言

于 2022-02-10 22:51:34 首次发布

本文链接：https://blog.csdn.net/intrepidyouth/article/details/122868831

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

数据类型概念

在这里插入图片描述

前7中数据类型为基本类型数据
最后一种为引用类型数据:Array - 数组对象、RegExp - 正则对象、Date - 日期对象、Math - 数学函数、Function - 函数对象。
基础类型存储在栈内存，被引用或拷贝时，会创建一个完全相等的变量；
引用类型存储在堆内存，存储的是地址，被引用或者拷贝时，赋的其实是在栈中的地址，而不是堆中的数据，也就是两个对象指向的是同一个存储空间，无论哪个对象发生改变，其实都是改变的存储空间的内容，因此，两个对象是联动的。
第一个为浅拷贝，第二个为深拷贝

数据类型的检测

typeof

typeof只能对基础数据类型进行检测，对引用数据类型并不能做一个准确的检测

console.log(typeof undefined) //undefined
console.log(typeof null) // object
console.log(typeof true) // boolean
console.log(typeof '111') //string
console.log(typeof 1) //number
console.log(typeof Symbol()) //symbol
console.log(typeof BigInt(Number.MAX_SAFE_INTEGER)) //bigint
console.log(null === null) // true`
// 在这里有一个问题就是null 的 typeof 为什么是 Object呢，这里要和强调一下，虽然
// typeof null 会输出 object，但这只是 JS 存在的一个悠久 Bug，不代表 null 就是引用
// 数据类型，并且 null 本身也不是对象。因此，null 在 typeof 之后返回的是有问题的结果，
// 不能作为判断 null 的方法。如果你需要在 if 语句中判断是否为 null，直接通过 
// ‘===null’来判断就好。
console.log(typeof []) // object
console.log(typeof {}) // object
console.log(typeof new Date()) // object
console.log(typeof console.log) // function
console.log(typeof /runoob/i) // object
console.log(typeof Math) // object
// 对于引用数据类型的数据，除了function能判断正确外，其它的结果均为object

instanceof

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。
方法：object instanceof constructor

object：某个实例对象。
constructor：某个构造函数

说明：instanceof 运算符用来检测 constructor.prototype 是否存在于参数 Object 的原型链上。（判断一个变量是否某个对象的实例）
所有引用类型值都是object的实例，所以在检测一个引用类型值和Object构造函数时，instanceof操作符会一直返回true。如用instanceof操作符检测基本类型值时，会一直返回false，原因很简单，因为基本类型不是对象。
我们也可以通过instanceof判断数据的基本类型

var a = 1
console.log(a instanceof Number) // false
var b = '123'
console.log(b instanceof String) // false
var c = true
console.log(c instanceof Boolean) //false
var d = null
// console.log(d instanceof null) //报错
var e = undefined
// console.log(e instanceof undefined) // 报错
var f = Symbol(1)
console.log(f instanceof Symbol) // false
var g = BigInt(Number.MAX_SAFE_INTEGER)
console.log(g instanceof BigInt) // false
var h = {}
console.log(h instanceof Object) // true
var i = []
console.log(i instanceof Array) // true
var j = new Date()
console.log(j instanceof Date) // true
var k = console.log
console.log(k instanceof Function) //true
var l = /runoob/i
console.log(l instanceof RegExp) //true
var l = Math
console.log(l instanceof Math) // 报错
// ------到此截至可以看到是可以判断到引用数据类型滴------
// 使用new 关键字
var j = new String()
console.log(Object.prototype.toString.call(j)) // [object String]
console.log(j instanceof String) // true
var k = new Object()
console.log(Object.prototype.toString.call(k)) // [object Object]
console.log(k instanceof Object)//true
// ------到这发现使用new关键字的话，也是能判断基本数据类型的

instanceof 的底层实现

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

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

console.log(Object.prototype.toString.call(undefined)) // [object Undefined]
console.log(Object.prototype.toString.call(null)) // [object Null]
console.log(Object.prototype.toString.call(true)) // [object Boolean]
console.log(Object.prototype.toString.call('111')) // [object String]
console.log(Object.prototype.toString.call(1)) // [object Number]
console.log(Object.prototype.toString.call(Symbol())) // [object Symbol]
console.log(Object.prototype.toString.call(BigInt(Number.MAX_SAFE_INTEGER))) // [object BigInt]
console.log(Object.prototype.toString({})) // [object Object]
console.log(Object.prototype.toString.call({})) // [object Object]
console.log(Object.prototype.toString.call([])) // [object Array]
console.log(Object.prototype.toString.call(new Date())) // [object Date]
console.log(Object.prototype.toString.call(console.log)) // [object Function]
console.log(Object.prototype.toString.call(/runoob/i)) // [object RegExp]
console.log(Object.prototype.toString.call( Math)) // [object Math]

使用该方法判断基础数据类型有点大材小用了，因此我们可以结合typeof 封装一个方法用于判断数据的类型

function getType(obj) {
    let type = typeof obj;
    if (type !== "object") {
        return type;
    }
    return Object.prototype.toString.call(obj).replace(/^\[object (\S+)\]$/, "$1");
}
console.log(getType([])) // Array
console.log(getType(1)) // number

数据类型转换

在日常的业务开发中，经常会遇到 JavaScript 数据类型转换问题，有的时候需要我们主动进行强制转换，而有的时候 JavaScript 会进行隐式转换，隐式转换的时候就需要我们多加留心。

console.log('123' == 123 ) // true
console.log('' == null) // false
console.log('' == 0 ) // true
console.log([] == 0) // true
console.log([] == '') // true
console.log([] == ![]) // true
console.log(null == undefined) // true
console.log(Number(null)) // 1
console.log(Number('')) // 1
console.log(parseInt('')) // NaN

强制类型转换

强制类型转换方式包括 Number()、parseInt()、parseFloat()、toString()、String()、Boolean()，这几种方法都比较类似，通过字面意思可以很容易理解，都是通过自身的方法来进行数据类型的强制转换。

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

console.log(Number(true)) // 1
console.log(Number(false)) // 0
console.log(Number(1.01)) // 1.01
console.log(Number(null)) // 0
console.log(Number(undefined)) // NaN
console.log(Number('')) // 0
console.log(Number('1234')) //1234
console.log(Number('1.01')) // 1.01
console.log(Number('aaa')) // NaN

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

这个方法的规则是：除了 undefined、 null、 false、 “”、 0（包括 +0，-0）、 NaN 转换出来是 false，其他都是 true。

console.log(Boolean(undefined)) // false
console.log(Boolean(false)) // false
console.log(Boolean("")) // false
console.log(Boolean(null)) // false
console.log(Boolean(0)) // false

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

toString()方法可以将所有的数据转换为字符串，但null与undefined除外

console.log(false.toString()) // false
console.log(typeof false.toString()) // string
console.log({}.toString()) // [object Object]
// console.log(undefined.toString()) 报错
// console.log(null.toString()) 报错

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

string()方法可以转换null和undefined

console.log(String(null)) // null
console.log(typeof String(null)) // string
console.log(String(undefined)) // undefined
console.log(typeof String(undefined)) //string

隐式类型转换

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

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

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

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

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

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

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()，如果转换为基础类型，则返回；
如果都没有返回基础类型，会报错。

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