JavaScript 类型判断及类型转换规则

文章目录

- JavaScript 类型及其判断
- 使用 typeof 判断类型
- 使用 instanceof 判断类型
- 使用 constructor 和 Object.prototype.toString 判断类型
- JavaScript 类型及其转换
- JavaScript 函数参数传递
- cannot read property of undefined 问题解决方案
- 分析一道网红题目
- JavaScript 类型判断总结

✍创作者：全栈弄潮儿
🏡 个人主页：全栈弄潮儿的个人主页
🏙️ 个人社区，欢迎你的加入：全栈弄潮儿的个人社区
📙 专栏地址，欢迎订阅：前端架构师之路

JavaScript 类型及其判断

JavaScript 具有七种内置数据类型，它们分别是：

null
undefined
boolean
number
string
object
symbol

其中，前面五种为基本类型。第六种 object 类型又具体包含了 function、array、date 等。

对于这些类型的判断，我们常用的方法有：

typeof
instanceof
Object.prototype.toString
constructor

使用 typeof 判断类型

基本类型可以使用 typeof 来判断：

typeof 5 // "number"
typeof 'lucas' // "string"
typeof undefined // "undefined"
typeof true // "boolean"

但是也存在着一些特例，比如用 typeof 判断 null 时：

typeof null // "object"

我们再看使用 typeof 判断复杂类型时的表现：

const foo = () => 1
typeof foo // "function"

const foo = {}
typeof foo // "object"

const foo = []
typeof foo // "object"

const foo = new Date()
typeof foo // "object"

const foo = Symbol("foo") 
typeof foo // "symbol"

因此，我们可以总结出：使用 typeof 可以准确判断出除 null 以外的基本类型，以及 function 类型、symbol 类型；null 会被 typeof 判断为 object。

使用 instanceof 判断类型

再来看看 instanceof：

使用 a instanceof B 判断的是：a 是否为 B 的实例，即 a 的原型链上是否存在 B 构造函数。因此如果我们使用：

function Person(name) {
    this.name = name
}
const p = new Person('lucas')

p instanceof Person
// true

这里 p 是 Person 构造出来的实例。同时，顺着 p 的原型链，也能找到 Object 构造函数：

p.__proto__.__proto__ === Object.prototype

因此：

p instanceof Object

// true

原型原型链的知识我们会在后续章节中介绍，这里只需要理解 instanceof 的判断原理即可。另外，一个细节需要注意：

5 instanceof Number // false

返回 false，是因为 5 是基本类型，它并不是 Number 构造函数构造出来的实例对象，如果：

new Number(5) instanceof Number 

// true

结果返回 true。
我们使用以下代码来模拟 instanceof 原理：

// L 表示左表达式，R 表示右表达式
const instanceofMock = (L, R) => {
    if (typeof L !== 'object') {
        return false
    }
    while (true) { 
        if (L === null) {
            // 已经遍历到了最顶端
            return false
        }
        if (R.prototype === L.__proto__) {
            return true
        }
        L = L.__proto__
    } 
}

L 表示左表达式，R 表示右表达式，我们可以如此使用：

instanceofMock('', String)

// false

function Person(name) {
    this.name = name
}
const p = new Person('lucas')

instanceofMock(p, Person)

// true

使用 constructor 和 Object.prototype.toString 判断类型

使用 constructor 可以查看目标的构造函数，这也可以进行类型判断，但也存在着问题，具体请看：
var foo = 5
foo.constructor
// ƒ Number() { [native code] }

var foo = ‘Lucas’
foo.constructor
// ƒ String() { [native code] }

var foo = true
foo.constructor
// ƒ Boolean() { [native code] }

var foo = []
foo.constructor
// ƒ Array() { [native code] }

var foo = {}
foo.constructor
// ƒ Object() { [native code] }

var foo = () => 1
foo.constructor
// ƒ Function() { [native code] }

var foo = new Date()
foo.constructor
// ƒ Date() { [native code] }

var foo = Symbol(“foo”)
foo.constructor
// ƒ Symbol() { [native code] }

var foo = undefined
foo.constructor
// VM257:1 Uncaught TypeError: Cannot read property ‘constructor’ of undefined
at :1:5

var foo = null
foo.constructor
// VM334:1 Uncaught TypeError: Cannot read property ‘constructor’ of null
at :1:5

我们发现对于 undefined 和 null，如果尝试读取其 constructor 属性，将会进行报错。并且 constructor 返回的是构造函数本身，一般使用它来判断类型的情况并不多见。

使用 Object.prototype.toString 判断类型，我们称之为“万能方法”，“终极方法”：
console.log(Object.prototype.toString.call(1))
// [object Number]

console.log(Object.prototype.toString.call(‘lucas’))
// [object String]

console.log(Object.prototype.toString.call(undefined))
// [object Undefined]

console.log(Object.prototype.toString.call(true))
// [object Boolean]

console.log(Object.prototype.toString.call({}))
// [object Object]

console.log(Object.prototype.toString.call([]))
// [object Array]

console.log(Object.prototype.toString.call(function(){}))
// [object Function]

console.log(Object.prototype.toString.call(null))
// [object Null]

console.log(Object.prototype.toString.call(Symbol(‘lucas’)))
// [object Symbol]

JavaScript 类型及其转换

JavaScript 的一个显著特点就是“灵活”。“灵活”的反面就是猝不及防的“坑”多，其中一个典型的例子就是被诟病的类型“隐式转换”。

MDN 这样介绍过 JavaScript 的特点：JavaScript 是一种弱类型或者说动态语言。这意味着你不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

我们再来看一些基本例子，在使用加号进行运算时：

console.log(1 + '1')
// 11

console.log(1 + true)
// 2

console.log(1 + false)
// 1

console.log(1 + undefined)
// NaN

console.log('lucas' + true)
// lucastrue

我们发现：

当使用 + 运算符计算 string 和其他类型相加时，都会转换为 string 类型；其他情况，都会转换为 number 类型，但是 undefined 会转换为 NaN，相加结果也是 NaN
比如布尔值转换为 number 类型：true 为 1，false 为 0，因此：

console.log(1 + true)
// 2

console.log(1 + false)
// 1

console.log(false + false)
// 0

console.log(true + true)
// 2

再看代码：

console.log({} + true)
// [object Object]true

在 + 号两侧，如果存在复杂类型，比如对象，那么这到底是怎样的一套转换规则呢？

当使用 + 运算符计算时，如果存在复杂类型，那么复杂类型将会转换为基本类型，再进行运算。

这就涉及到“对象类型转基本类型”这个过程。具体规则：对象在转换基本类型时，会调用该对象上 valueOf 或 toString 这两个方法，该方法的返回值是转换为基本类型的结果。

那具体调用 valueOf 还是 toString 呢？这是 ES 规范所决定的，实际上这取决于内置的 toPrimitive 调用结果。主观上说，这个对象倾向于转换成什么，就会优先调用哪个方法。如果倾向于转换为 Number 类型，就优先调用 valueOf；如果倾向于转换为 String 类型，就只调用 toString。

valueOf 以及 toString 是可以被开发者重写的。比如：

const foo = {
  toString () {
    return 'lucas'
  },
  valueOf () {
    return 1
  }
}

我们对 foo 对象的 valueOf 以及 toString 进行了重写，这时候调用：

alert(foo)

输出：lucas。这里就涉及到“隐式转换”，在调用 alert 打印输出时，“倾向于使用 foo 对象的 toString 方法，将 foo 转为基本类型”，得以打印出结果。
然而：

console.log(1 + foo)

输出：2，这时候的隐式转换“倾向于使用 foo 对象的 valueOf 方法，将 foo 转为基本类型”，得以进行相加。

我们再全面总结一下，对于加法操作，如果加号两边都是 Number 类型，其规则为：

如果 + 号两边存在 NaN，则结果为 NaN（typeof NaN 是 ‘number’）
如果是 Infinity + Infinity，结果是 Infinity
如果是 -Infinity + (-Infinity)，结果是 -Infinity
如果是 Infinity + (-Infinity)，结果是 NaN

如果加号两边有至少一个是字符串，其规则为：

如果 + 号两边都是字符串，则执行字符串拼接
如果 + 号两边只有一个值是字符串，则将另外的值转换为字符串，再执行字符串拼接
如果 + 号两边有一个是对象，则调用 valueof() 或者 toStrinig() 方法取得值，转换为基本类型再进行字符串拼接。

当然也可以进行显式转换，我们往往使用类似 Number、Boolean、String、parseInt 等方法，进行显式类型转换。

JavaScript 函数参数传递

我们知道 JavaScript 当中有“引用赋值”和“基本类型赋值”以及相关概念：“深拷贝”、“浅拷贝”区分。那么函数的参数传递有什么讲究呢？请看例题：

let foo = 1
const bar = value => {
    value = 2
    console.log(value)
}
bar(foo)
console.log(foo)

两处输出分别为 2、1；也就是说在 bar 函数中，参数为基本类型时，函数体内复制了一份参数值，而不会影响参数实际值。

let foo = {bar: 1}
const func = obj => {
    obj.bar = 2
    console.log(obj.bar)
}
func(foo)
console.log(foo)

两处输出分别为 2、{bar: 2}；也就是说如果函数参数是一个引用类型，当在函数体内修改这个引用类型参数的某个属性值时，将会对参数进行修改。因为这时候函数体内的引用地址指向了原来的参数。

但是如果在函数体内，直接修改了对参数的引用，则情况又不一样：

let foo = {bar: 1}
const func = obj => {
    obj = 2
    console.log(obj)
}
func(foo)
console.log(foo)

两处输出分别为 2、{bar: 1}；这样的情况理解起来较为晦涩，其实总结下来就是：

参数为基本类型时，函数体内复制了一份参数值，对于任何操作不会影响参数实际值
函数参数是一个引用类型时，当在函数体内修改这个值的某个属性值时，将会对参数进行修改
函数参数是一个引用类型时，如果我们直接修改了这个值的引用地址，则相当于函数体内新创建了一份引用，对于任何操作不会影响原参数实际值

cannot read property of undefined 问题解决方案

这里我们分析一个常见的 JavaScript 细节：cannot read property of undefined 是一个常见的错误，如果意外的得到了一个空对象或者空值，这样恼人的问题在所难免。

考虑这样的一个数据结构：

const obj = {
    user: {
        posts: [
            { title: 'Foo', comments: [ 'Good one!', 'Interesting...' ] },
            { title: 'Bar', comments: [ 'Ok' ] },
            { title: 'Baz', comments: []}
        ],
        comments: []
    }
}

为了在对象中相关取值的过程，需要验证对象每一个 key 的存在性。常见的处理方案有：

&& 短路运算符进行可访问性嗅探

obj.user &&
obj.user.posts &&
obj.user.posts[0] &&
obj.user.posts[0].comments

|| 单元设置默认保底值

(((obj.user || {}).posts||{})[0]||{}).comments

try…catch

var result
try {
    result = obj.user.posts[0].comments
}
catch {
    result = null
}

最后，TC39 提案中有一个新的提案，支持：
console.log(obj?.user?.posts[0]?.comments)

由此可见，JavaScript 语言也在不断演进。通过这个案例，想告诉大家：熟练掌握基础环节，将对于进阶起到关键作用。

分析一道网红题目

综合以上知识点，我们来看一道“网红”题目：
Can (a == 1 && a == 2 && a == 3) ever evaluate to true?
即：
a == 1 && a == 2 && a == 3 可能为 true 吗？
直观上分析，如果变量 a 是一个基本 Number 类型，这是不可能为 true 的，因此解题思路也需要从变量 a 的类型及（对象）转换（基本类型）上来考虑。

方案一：

const a = {
    value: 1,
    toString: function () {
        return a.value++
    }
}
console.log(a == 1 && a == 2 && a == 3) // true

这个方案中，我们将 a 定义为一个对象，并重写了其 toString 方法。因此在每次进行判断时，按照规则，== 号两边出现了对象类型，另一边是 Number 类型，需要调用 a 对象 toString 方法，toString 方法的返回值会作为对象转为基本类型的值，我们每次将 value 属性加 1。同样，如果按照相同的方式重写 valueOf 方法，也是可以达到同样目的的。

方案二：

let value = 0
Object.defineProperty(window, 'a', {
    get: function() {
        return ++value
    }
})

console.log(a == 1 && a == 2 && a == 3) // true

这里我们将 a 作为属性，挂载在 window 对象当中，重写其 getter 方法。

JavaScript 类型判断总结

通过 x === null 来判断 null 类型
对于 typeof x 不为 object 的情况，直接返回 typeof x 结果，这时候可以判断出 number，string，boolean，undefined，symbol 类型
Object.prototype.toString 方法，该方法确实可以称得上“终极方案”。对返回结果使用 .slice(8, -1)，更加方便拿到结果：

Object.prototype.toString.call(true).slice(8, -1)
// "Boolean"