【前端面试】聊聊ES6中JS新增的两种“原始数据类型”及“类型判断”的四种方法（1）

一、新增原始数据类型

在ES6，JavaScript新增了两种原始数据类型，分别是BigInt和Symbol数据类型。接下来我会给大家演示这两种数据类型有哪些特点和使用方法。

BigInt

JavaScript中的BigInt是一种用来表示任意精度整数的数据类型，它为JavaScript提供了表示大整数的能力，使得在处理需要高精度整数的场景下更加方便和可靠。

为什么要创建这样一个数据类型呢，我给大家举个例子就知道了，我们来到浏览器上输入2 ** 53代表2^53并打印其结果，并尝试在其后面进行以下操作：

从运算结果中我们看到两次运算的结果都是一样的，我们不是在2^53基础上再加了1吗，不变的原因是对于number类型处理器的算力天花板就是2^53，所以在ES6之后新增了一种数据类型BigInt，请看下面示例：

当我们在此基础上分别在number类型的整数后面加一个n进行运算后就可以正常进行运算了，并且这个BigInt类型是没有上限的，在日常中我们计算Number类型就已经足够了，但是对于企业来说很可能会涉及很大数字的计算，这时候BigInt类型就完美的符合要求了。

Symbol

JavaScript中的Symbol是一种基本数据类型，它在ES6（ECMAScript 2015）中被引入。Symbol类型的值是唯一且不可变的，通常用于对象属性的键值，以确保属性名的唯一性。

在JavaScript中"="号代表赋值语句，"=="代表判断两边数据的值是否相等，"==="代表判断两边数据的值和数据类型是否相同，而这时候我们需要提到"==="判断的底层逻辑，简单来说其实是判断这两个数据的地址是否相等。那么Symbol类型有什么特点和作用呢，请看下面示例：

let str = 'Hello'  
let str2 = 'Hello'
console.log(str == str2); //True

没错，最终结果会是True，在框架开发中，当我们的代码和别人的代码结合时如果遇到变量名冲突就可以使用Symbol来定义数据类型

let s = Symbol('hello') //Symbol
let s2 = Symbol('hello')

console.log(s === s2); // False

我们定义了两个Symbol对象，在创建这两个变量时会单独为其开辟独立的空间，所以这两个数据的地址是不同的，最后输出也就是False。

二、类型判断

在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 操作符来检测原始数据的类型时，输出结果如下：

1. 对于字符串类型（String）的变量 str，输出为 "string"。

2. 对于数值类型（Number）的变量 num，输出为 "number"。

3. 对于布尔类型（Boolean）的变量 flag，输出为 "boolean"。

4. 对于未定义类型（Undefined）的变量 un，输出为 "undefined"。

5. 对于空值类型（Null）的变量 nu，输出为 "undefined"。这个结果是 JavaScript 的一个历史遗留问题，实际上应该是 "null"，但由于历史原因而输出为 "object"，详细解释可以去看我的这篇文章［前端面试］面试官：细说原型与原型链 深入探讨 V8 引擎执行的隐式过程

6. 对于大整数类型（BigInt）的变量 big，输出为 "bigint"。

7. 对于符号类型（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 操作符来检测引用数据的类型时，输出结果如下：

1. 对于空对象（Object）obj，输出为 "object"。这是因为在 JavaScript 中，对象属于引用类型，所以 typeof 操作符会将其归类为 "object"。

2. 对于空数组（Array）arr，输出为 "object"。同样，数组也是 JavaScript 中的一种特殊对象，所以 typeof 操作符会认为它是 "object"。

3. 对于函数（Function）fn，输出为 "function"。JavaScript 中的函数是一种特殊的对象，typeof 操作符专门将其识别为 "function"。

4. 对于日期对象（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);

1. 对于空对象 obj，obj instanceof Object 的输出为 true。这是因为在 JavaScript 中所有的对象都是 Object 类型的实例，所以空对象也是 Object 的实例。
2. 对于空数组 arr，arr instanceof Array 的输出为 true。因为数组也是对象，而且也是 Array 类型的实例，所以 instanceof 判断返回 true。
3. 对于函数 fn，fn instanceof Function 的输出为 true。因为函数本身就是 Function 类型的实例，所以 instanceof 判断也返回 true。
4. 对于日期对象 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的实例。

总结

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

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

在这篇文章中我们引入并分析了ES6新增的两种原始数据类型，然后介绍了JavaScript四种判断数据类型方法的其中两种，下一篇文章会更加具有深度所以分开来写，我们会在下一篇文章继续为大家讲解JavaScript中用于判断数据类型的Object.prototype.toString和Array.isArray(arr)方法

如果本篇文章对你有帮助的话，给作者一点鼓励点个赞吧♥

如果想了解更多有用的干货，关注➕收藏 面试不迷茫

所有文章的源码，给作者的开源git仓库点个收藏吧: gitee.com/cheng-bingw...

更多干货内容：【AIGC】更牛逼的"情感分析"大模型 这次我们用OpenAI"自动完成模型"省去复杂的代码一步到位