ES6中JS新增类型判断的4种方法详解

文
章
目
录

• 前言
• typeof方法详解
• instanceof方法详解
• Array.isArray()方法详解
• 语法
• 示例
• 注意事项
• 使用场景
• Object.prototype.toString()
• Object.prototype.toString.call()
• 语法
• 示例
• 作用
• 注意事项
• 总结

前言

本文重点讲解ES6中JS新增的类型判断的4种方法。在JavaScript中有四种方法可以用来判断数据类型，它们分别是：typeof、instanceof、Array.isArray()和Object.prototype.toString.call()，那么这些方法使用方法和区别是什么呢？让我们请看下面示例：

typeof方法详解

let str = \'Hello\';   // String类型
let num = 123;       // Number类型
let flag = false;    // Boolean类型
let un = undefined;  // Undefined类型
let nu = null;       // null类型
let big = 123n;      // BigInt类型
let s = Symbol(\'hello\'); // Symbol类型

console.log(typeof str);  // 输出：\"string\"
console.log(typeof num);  // 输出：\"number\"
console.log(typeof flag); // 输出：\"boolean\"
console.log(typeof un);   // 输出：\"undefined\"
console.log(typeof nu);   // 输出：\"object\"
console.log(typeof big);  // 输出：\"bigint\"
console.log(typeof s);    // 输出：\"symbol\"

当我们使用 typeof 操作符来检测原始数据的类型时，输出结果如下：

• 对于字符串类型（String）的变量 str，输出为 “string“。
• 对于数值类型（Number）的变量 num，输出为 “number“。
• 对于布尔类型（Boolean）的变量 flag，输出为 “boolean“。
• 对于未定义类型（Undefined）的变量 un，输出为 “undefined“。
• 对于空值类型（Null）的变量 nu，输出为 “undefined“。这个结果是 JavaScript 的一个历史遗留问题，实际上应该是 “null”，但由于历史原因而输出为 “object”。
• 对于大整数类型（BigInt）的变量 big，输出为 “bigint“。
• 对于符号类型（Symbol）的变量 s，输出为 “symbol“。

let obj = {}
let arr = []
let fn = function(){}
let date = new Date() 
console.log(typeof obj);     //object
console.log(typeof arr);     //object
console.log(typeof fn);      //function
console.log(typeof date);    //object

当我们使用 typeof 操作符来检测引用数据的类型时，输出结果如下：

• 对于空对象（Object）obj，输出为 “object“。这是因为在 JavaScript 中，对象属于引用类型，所以 typeof 操作符会将其归类为 “object”。
• 对于空数组（Array）arr，输出为 “object“。同样，数组也是 JavaScript 中的一种特殊对象，所以 typeof 操作符会认为它是 “object”。
• 对于函数（Function）fn，输出为 “function“。JavaScript 中的函数是一种特殊的对象，typeof 操作符专门将其识别为 “function”。
• 对于日期对象（Date）date，输出为 “object“。同样，日期对象也被 typeof 操作符识别为 “object” 类型。

总结来说，typeof 操作符对于对象和数组都返回 “object”，对于函数返回 “function”，而对于其他各种类型的对象（比如日期对象）也会返回 “object”,所以除了用typeof来判断是否为函数类型，其他引用类型的判断typeof并不适用

instanceof方法详解

JavaScript 中的 instanceof 操作符用于判断一个对象是否是某个构造函数创建的实例。它的语法形式为 object instanceof constructor，其中 object 是要检查的对象，constructor 是某个构造函数。只能用来判断引用类型，其判断逻辑是依靠原型链查找来实现的。

let obj = {}
let arr = []
let fn = function(){}
let date = new Date()

console.log(obj instanceof Object); 
console.log(arr instanceof Array);
console.log(fn instanceof Function);
console.log(date instanceof Date);

• 对于空对象 obj，obj instanceof Object 的输出为 true。这是因为在 JavaScript 中所有的对象都是 Object 类型的实例，所以空对象也是 Object 的实例。
• 对于空数组 arr，arr instanceof Array 的输出为 true。因为数组也是对象，而且也是 Array 类型的实例，所以 instanceof 判断返回 true。
• 对于函数 fn，fn instanceof Function 的输出为 true。因为函数本身就是 Function 类型的实例，所以 instanceof 判断也返回 true。
• 对于日期对象 date，date instanceof Date 的输出为true。由于 date 是由 Date 构造函数创建的实例，所以 instanceof 判断结果为 true。

因为instaceof判断数据类型原理是通过原型链来查找的，如果示例对象的隐式原型等于其构造函数的显示原型那么我们就判断其为这个构造函数创建的示例，所以我们可以手写一个instanceof函数，代码如下：

function instanceOf(L,R){
    let left = L.__proto__
    let right = R.prototype
    while(left !== null){
        if(left === right) return true

        left = left.__proto__
    }
    return false
}
console.log(instanceOf([],Array));
console.log(instanceOf([],Object));

解释： 在这段代码中我们实现了一个自定义的 instanceOf 函数，用于模拟 JavaScript 中的 instanceof 操作符。而instanceOf这个函数的主要思路是通过遍历 L 对象的原型链，直到找到 R 的 prototype(显示原型)，如果找到了则返回 true，否则返回 false。

然后我们给了两个测试用例，第一个测试 instanceOf([], Array) 返回 true，表明空数组是Array的实例；而第二个测试 instanceOf([], Object) 也返回 true，表明空数组同样也是Object的实例。

Array.isArray()方法详解

Array.isArray() 是 JavaScript 中用来确定一个值是否为数组的方法。它返回一个布尔值，如果值是数组则返回 true，否则返回 false。

语法

Array.isArray(value)

value：要检测的值。

如果 value 是数组，则返回 true。
如果 value 不是数组，则返回 false。

示例

let arr = [1, 2, 3];
console.log(Array.isArray(arr)); // 输出：true

let obj = { key: \'value\' };
console.log(Array.isArray(obj)); // 输出：false

在上面的例子中，Array.isArray(arr) 返回 true，因为 arr 是一个数组。而 Array.isArray(obj) 返回 false，因为 obj 是一个对象，不是数组。

注意事项

在 ECMAScript 5 中引入了 Array.isArray() 方法，因此在较老的浏览器中可能不被支持。
如果我们需要在不支持 Array.isArray() 的环境中使用该功能，可以考虑使用兼容性代码进行处理，或者使用其他方法来判断一个值是否为数组。

使用场景

在编程中，有时候我们需要确定一个值是否为数组，以便根据不同的数据类型执行不同的逻辑。

可以用于对函数参数的类型进行验证，以确保传入的参数符合预期。

总之，Array.isArray() 是 JavaScript 中用于确定一个值是否为数组的便捷方法，它能够帮助我们在处理各种数据类型时更加灵活和安全。

Object.prototype.toString()

console.log(
    Object.prototype.toString(\'Hello\') // [object Object]
)

当我们调用Object原型上的toString方法时，因为这个方法是不接收任何参数的，所以不管我们传入什么类型的参数都会打印出[object Object]

Object.prototype.toString.call()

我们从上述示例中知道不管在Object.prototype.toString（）中传入什么参数都是输出[object Object]，但是当我们对这个函数进行调用显示绑定这个方法并且传入一个数据参数时是否会发生改变呢。请看下列代码：

let s = \'Hello\'

function isType(s){
    console.log(Object.prototype.toString.call(s) // String
}

isType(s)

返回的结果是[object String]，并且这个方法可以用来判断所有数据类型，我这里就不一一列举了，在下面我会为大家详细介绍Object.prototype.toString.call()这个方法的语法及使用。

语法

Object.prototype.toString.call(value)

value：要获取类型信息的值。

返回值：返回一个表示 value 类型的内部属性 [[Class]] 的字符串。

示例

let arr = [1, 2, 3];
console.log(Object.prototype.toString.call(arr)); // 输出：[object Array]

let obj = { key: \'value\' };
console.log(Object.prototype.toString.call(obj)); // 输出：[object Object]

let num = 123;
console.log(Object.prototype.toString.call(num)); // 输出：[object Number]

在这些示例中，Object.prototype.toString.call(arr) 返回 [object Array]，表示 arr 是一个数组；而 Object.prototype.toString.call(obj) 返回 [object Object]，表示 obj 是一个对象；Object.prototype.toString.call(num) 返回 [object Number]，表示 num 是一个数值。

作用

获取变量的具体类型信息，包括内置对象类型（如 Array、Object、Number 等）和自定义对象类型。

在没有 Array.isArray() 方法的环境中，可以通过 Object.prototype.toString.call() 来判断一个值是否为数组。

注意事项

使用 Object.prototype.toString.call() 可以得到更准确的类型信息，而不仅仅是使用 typeof 来判断类型。

在处理复杂数据类型时，Object.prototype.toString.call() 很有用，因为它可以区分数组、对象、函数等不同类型的数据。

总之，Object.prototype.toString.call() 是一个常用的方法，用于获取变量的具体类型信息，帮助我们更好地处理不同类型的数据。

总结

在本篇文章中我们介绍了剩下的4种数据类型判断方法：

1） typeof
1. 可以准确判断除null之外的`原始数据类型`
2. 可以判断function

2）instanceof
1. 只能判断`引用数据类型`
2. 且是通过原型链查找来判断的

3）Array.isArray() 是 JavaScript 中用于确定一个值是否为数组的便捷方法，它能够帮助我们在处理各种数据类型时更加灵活和安全。

4）Object.prototype.toString.call() 是一个用于获取变量的具体类型信息的方法，在一些没有Array.isArray()方法的环境中，可以用Object.prototype.toString.call() 方法来判断一个值是否为数组。

以上就是ES6中JS新增的类型判断的4种方法详解的全部内容，希望对你有帮助！