js数据类型检测和数据类型转换

1. 数据类型概念

JavaScript 的数据类型有下图所示的 8 种:

其中,前 7 种类型为基础类型,最后 1 种(Object)为引用类型,而引用数据类型(Object)又分为图上这几种常见的类型:Array - 数组对象RegExp - 正则对象Date - 日期对象Math - 数学函数Function - 函数对象

  1. 基础类型存储在栈内存,被引用或拷贝时,会创建一个完全相等的变量;
  2. 引用类型存储在堆内存,存储的是地址,多个引用指向同一个地址

2. 数据类型检测常用的三种方法

2.1 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,这是 JS 存在的一个悠久 Bug,引用数据类型 Object,用 typeof 来判断的话,除了 function 会判断为 OK 以外,其余都是 'object',是无法判断出来的

2.2 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
2.2.1 具体实现
function myInstanceof(left, right) {
  // 判断是否为引用数据类型
  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);
  }
}

console.log(myInstanceof(new Number(123), Number));    // true
console.log(myInstanceof(123, Number));                // false
  1. instanceof 可以准确地判断复杂引用数据类型,但是不能正确判断基础数据类型
  2. typeof也存在弊端,它虽然可以判断基础数据类型(null 除外),但是引用数据类型中,除了 function 类型以外,其他的也无法判断

2.3 Object.prototype.toString

toString() 是 Object 的原型方法,调用该方法,可以统一返回格式为 "[object Xxx]" 的字符串,其中 Xxx 就是对象的类型。

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]"
2.3.1 具体实现
function getType(obj){
  let type  = typeof obj;
  // 先进行typeof判断,如果是基础数据类型,直接返回
  if (type !== "object") { 
    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返回

3. 数据类型转换

'123' == 123   // true
'' == null    // false
'' == 0        // true
[] == 0        // true
[] == ''       // true
[] == ![]      // true
null == undefined // true
Number(null)     // 0
Number('')      // 0
parseInt('')    // NaN
{} + 10  // 10
10 + {} // "10[object Object]"
// 对象在作为操作数时,解释器总是优先调用valueOf(), 而其他情况,解释器总是认为我们想要的是字符串,所以会优先调用toString()。 因此对象在前面返回结果就是Number;其他情况对象默认用toString

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

3.1 强制类型转换

强制类型转换方式包括 Number()、parseInt()、parseFloat()、toString()、String()、Boolean()

3.1.1 Number() 方法的强制转换规则
转换类型 转换结果
布尔值 true 和 false 分别被转换为 1 和 0
数字 自身
null 0
undefined NaN
字符串 字符串中只包含数字(或者是 0X / 0x 开头的十六进制数字字符串,允许包含正负号),则将其转换为十进制;<br />字符串中包含有效的浮点格式,将其转换为浮点数值;<br />空字符串,将其转换为 0;<br />不是以上格式的字符串,均返回 NaN
Symbol 抛出错误
对象 部署了 [Symbol.toPrimitive] ,那么调用此方法,<br />否则调用对象的 valueOf() 方法,然后依据前面的规则转换返回的值;<br />如果转换的结果是 NaN ,则调用对象的 toString() 方法,再次依照前面的顺序转换返回对应的值
Number('0111');      //111
Number(null);        // 0
Number('');          // 0
Number('1a');        // NaN
Number(-0X11);       //-17
3.1.2 Boolean() 方法的强制转换规则

除了 undefined、 null、 false、 ' '、 0(包括 +0,-0)、 NaN 转换出来是 false,其他都是 true

3.2 隐式类型转换

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

3.2.1 '==' 的隐式类型转换规则
转换类型 转换结果
类型相同 无须进行类型转换
其中一个操作值是 null 或者 undefined 另一个操作符必须为 null 或者 undefined,返回 true<br />否则返回 false
其中一个是 Symbol 类型 返回 false
两个操作值为 string 和 number 类型 将字符串转换为 number
一个操作值是 boolean 转换成 number
一个操作值为 object 另一方为 string、number 或者 symbol,就会把 object 转为原始类型再进行判断(调用 object 的 valueOf/toString 方法进行转换)
3.2.2 '+' 的隐式类型转换规则
转换类型 转换结果
其中有一个是字符串 另外一个是 undefined、null 或布尔型,则调用 toString() 方法进行字符串拼接,没有toString()方法,则调用 Strin;<br />如果是纯对象、数组、正则等,则默认调用对象的转换方法,然后再进行拼接
其中有一个是数字 另外一个是 undefined、null、布尔型或数字,则会将其转换成数字进行加法运算,<br />对象的情况还是参考上一条规则
其中一个是字符串 另一个是数字,则按照字符串规则进行拼接
'1' + undefined   // "1undefined"
'1' + null        // "1null"
'1' + true        // "1true"
'1' + 1n          // '11' 比较特殊字符串和BigInt相加,BigInt转换为字符串

1 + undefined     // NaN  规则2,undefined转换数字相加NaN
1 + null          // 1
1 + true          // 2
1 + 1n            // 错误 不能把BigInt和Number类型直接混合相加

3.3 Object 的转换规则

转换类型 转换结果
如果部署了 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进行'+'运算

[1,2,undefined,4,5] + 10
// "1,2,,4,510",注意[1,2,undefined,4,5]会默认先调用valueOf结果还是这个数组,不是基础数据类型继续转换,也还是调用toString,返回"1,2,,4,5",然后再和10进行运算
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容