乐趣区

关于javascript:数据类型的判断方式以及转换方式的汇总

jiezi


本文内容：

  • 介绍了几种罕用的 数据类型判断形式 ，并且手写了一个 通用的判断办法
  • 强制类型转换 和隐式类型转换 的罕用办法和规定，以及常见的 面试题

数据类型检测

办法一：typeof

  • typeof 罕用来判断根底数据类型，判断援用类型会有 bug
  • typeof null 会输入 object，但这只是 JS 存在的一个悠久 Bug，不代表 null 就是援用数据类型，并且 null 自身也不是对象
  • 援用数据类型是无奈判断进去的，用 typeof 来判断的话，除了 function 会判断正确以外，其余都是 ’object’，
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'

形式二：instanceof

  • instanceof 罕用来判断援用数据类型
  • instanceof 运算符 用于检测构造函数的 prototype 属性是否呈现在某个实例对象的原型链上。
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

手写 instaneof

  1. 先用 typeof 来判断根底数据类型，如果是，间接返回 false
  2. 拿到参数的原型对象, 循环往下寻找进行判断，直到找到雷同的原型对象
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
  • 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]"

最优解：手写一个全局通用判断办法

原理：

  1. 先判断是否是根底类型，如果是，则间接返回类型
  2. 如果是 object 类型，应用 Object.prototype.toString 判断形式，进行正则匹配
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 返回

类型转换

先来一个小题，体验一下

'123' == 123   // false or true?    
''== null    // false or true?'' == 0        // false or true?   
[] == 0        // false or true?   
[] == ''       // false or true?    
[] == ![]      // false or true?    
null == undefined //  false or true?  
Number(null)     // 返回什么？Number('')      // 返回什么？parseInt('');    // 返回什么？{}+10           // 返回什么？let obj = {[Symbol.toPrimitive]() {return 200;},
    valueOf() {return 300;},
    toString() {return 'Hello';}
}
console.log(obj + 200); // 这里打印进去是多少？

答案在最下方，看看你能作对多少

强制类型转换

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

隐式类型转换

但凡通过逻辑运算符 &&、||、!、运算符 +、-、*、/、关系操作符 >、<、<=、>=、相等运算符 ==或者 if/while 条件的操作, 都算是隐式类型转换

==与 + 的几种隐式类型转换规定

== 的隐式类型转换规定

  1. 如果类型雷同，毋庸进行类型转换；
  2. 如果其中一个操作值是 null 或者 undefined，那么另一个操作符必须为 null 或者 undefined，才会返回 true，否则都返回 false；
  3. 如果其中一个是 Symbol 类型，那么返回 false；
  4. 两个操作值如果为 string 和 number 类型，那么就会将字符串转换为 number；
  5. 如果一个操作值是 boolean，那么转换成 number；
  6. 如果一个操作值为 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 曾经加上去了，这里须要留神一下

+ 的隐式类型转换规定

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

除了上述比拟惯例的状况外，还有一些非凡的规定，如下所示。

  1. 如果其中有一个是字符串，另外一个是 undefined、null 或布尔型，则调用 toString() 办法进行字符串拼接；如果是纯对象、数组、正则等，则默认调用对象的转换方法会存在优先级（下一讲会专门介绍），而后再进行拼接。
  2. 如果其中有一个是数字，另外一个是 undefined、null、布尔型或数字，则会将其转换成数字进行加法运算，对象的状况还是参考上一条规定。
  3. 如果其中一个是字符串、一个是数字，则依照字符串规定进行拼接。
上面还是联合代码来了解上述规定，如下所示。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，字符串拼接

答案

'123' == 123   // false or true?    true
''== null    // false or true?     false'' == 0        // false or true?    true
[] == 0        // false or true?    true
[] == ''       // false or true?    true
[] == ![]      // false or true?    true
null == undefined //  false or true?  true
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); // 这里打印进去是多少？400

本文由博客一文多发平台 OpenWrite 公布！

退出移动版