(面试回答手把手教学)你知道哪些数据类型的判断方法？😋

直接上干货(后面还有场景题想看可以直接跳)

首先我可以说说具体有哪几种数据类型，分为简单数据类型和引用数据类型，简单数据类型有：number、boolean、stybol、null、undefined、string ,后面因为 number 不能表示太大的数值引入了bigint类型，而引用类型有function、array、object。如果需要判断类型，我会想到使用，typeof方法去判断，对于简单数据类型都可以判断外加一个函数类型，除了null会被判断为object，这个是因为是历史遗留问题也就是一个bug，紧接着说引用数据类型，中可以使用Array.isArray（）去判断数组，讲完这些我们就可以知道哪些别的方法再一一道来：比如 Object.prototype.toString.call() 方法(下面有用法)，能够精确的识别所有的类型，instanceof 操作符 判断是否为对象。

• 上述内容只是回答时的大概方向，需要详细去解释，不用生搬硬套，适合自己才是最好的
• 面试问八股时可以想想一下再回答，不要一下一股脑都说完了
• 整理好思绪，有逻辑的回答，就更加分，面试其实就是向面试官展示你的表演

下面是知识点：

1. typeof 操作符

• 原理：返回一个表示操作数类型的字符串（小写字母）。
• 优点 ：简单快速，能区分基本类型（除 null 外）。
• 缺点 ： • 对于 null 返回 "object"（这是一个历史遗留问题）。
• 数组和对象都会返回 "object"，无法区分。
• Symbol 和 BigInt 在旧版本浏览器中可能不被支持。
• 示例：

typeof 123;        // "number"
typeof "hello";     // "string"
typeof true;       // "boolean"
typeof undefined;   // "undefined"
typeof {};         // "object"
typeof [];         // "object"
typeof null;       // "object" ❌

2. instanceof 操作符

• 原理：检查对象是否是某个构造函数的实例。
• 优点：能区分数组、自定义对象等引用类型。
• 缺点 ：跨 iframe 或不同全局上下文的对象可能失效（因为构造函数不同） 基本类型（非对象）直接返回 false。
• 示例：

[] instanceof Array;      // true
{} instanceof Object;      // true
([] instanceof Object);     // true（因为数组继承自 Object）
5 instanceof Number;       // false（基本类型不是对象）

---

3. Object.prototype.toString() 方法

• 原理 ：通过调用对象的 toString() 方法，返回 [object Type] 字符串。
• 优点 ：最精确的方法，能识别所有数据类型（包括 null、Symbol 等）。
• 缺点：需要显式调用原型方法，语法稍繁琐。
• 示例：

Object.prototype.toString.call(123);      // "[object Number]"
Object.prototype.toString.call([]);        // "[object Array]"
Object.prototype.toString.call(null);       // "[object Null]" ✅
Object.prototype.toString.call(Symbol());    // "[object Symbol]"

4. 自定义类型判断（构造函数属性）

• 原理 ：通过 type 属性或构造函数的 name 属性判断。
• 优点：灵活，适用于自定义数据类型。
• 缺点：依赖开发者规范，易出错。
• 示例：

function Person(name) {}
const person = new Person("Alice");
console.log(person instanceof Person); // true
console.log(person.constructor.name); // "Person"

// 判断数组（需注意跨环境）
const arr = [];
console.log(arr.constructor === Array); // true

---

5. JSON.stringify()

• 原理：将值序列化为 JSON 字符串，观察类型标识符。
• 优点：简单直观。
• 缺点 ：无法直接使用，需解析字符串；对 undefined 和函数会报错。
• 示例：

JSON.stringify(123);        // "123" → 类型为 number
JSON.stringify([]);         // "[]" → 类型为 array
JSON.stringify({});          // "{}" → 类型为 object
JSON.stringify(undefined);   // undefined → 报错 ❌

---

6. Array.isArray() 方法（ES6+ 标准）

• 原理：专门用于检测一个值是否为数组。

• 优点：

  • 准确性高 ：不受跨 iframe/跨作用域影响（传统 instanceof 可能失效）。
  • 语义明确：直接判断是否为数组，而非依赖原型链。
  • 兼容现代浏览器：主流环境（Chrome、Firefox、Safari、Edge 等）均支持。

• 缺点：

  • 旧版浏览器不支持：如 IE8 及以下需要 polyfill。
  • 无法识别自定义数组类 ：若通过 class 继承 Array，需额外处理。

• 示例：

  Array.isArray([]);// true
  Array.isArray({});// false
  Array.isArray(null);// false
  Array.isArray(123);// false// 跨 iframe 示例（假设 iframe 中的数组来自其他源）
  const iframeArray = window.iframe.contentWindow.Array;
  const arr = new iframeArray(1, 2, 3);
  Array.isArray(arr);// true ❌（传统 instanceof 可能为 false）

• Polyfill（兼容旧环境） ：

  if (!Array.isArray) {
    Array.isArray = function(value) {
      return Object.prototype.toString.call(value) === '[object Array]';
    };
  }

---

总结表

方法	适用场景	推荐优先级
typeof	快速判断基本类型（注意 null）	⭐️⭐️
instanceof	区分引用类型（如数组、自定义对象）	⭐️⭐️
Object.prototype.toString()	精确识别所有数据类型（包括边缘情况）	⭐️⭐️⭐️
​Array.isArray()	专门判断数组（现代浏览器首选）	⭐️⭐️⭐️
自定义构造函数检查	自定义类或严格规范的场景	⭐️

---

关键对比

方法	能否正确识别跨 iframe 数组？	支持 Symbol/BigInt 等新类型？
instanceof	❌（可能失效）	❌（旧浏览器）
Object.prototype.toString()	✅	✅
Array.isArray()	✅（标准实现）	✅（现代浏览器）

进阶技巧

对于复杂类型（如 Map、Set、RegExp 等），可以直接结合 Object.prototype.toString() 或第三方库（如 lodash 的 _.isObject）进行判断。

真题挑战！！

代码：

实现一个函数，将输入数组按指定类型过滤，如果是要把对象过滤，怎么操作 ？？

function filteByType(arr,type){
    // es6 filter 方法
    return arr.filter(item=>{
          const itemType = typeof item; // 类型
          if(type === 'object'){
             return item !==null && itemType === type&&!Array.isArray(item);
          }
          if(type === 'array'){
            return Array.isArray(item);
          }
          return itemType === type;
         
    })
}

解析：

1. 函数签名：

• arr: 需要过滤的数组。
• type: 要过滤的目标数据类型（字符串形式）。

2. filter 方法：

• arr.filter(...)：使用 filter 方法遍历数组中的每个元素，并返回一个新数组，包含满足条件的所有元素。

3. typeof 运算符：

• const itemType = typeof item;：获取当前元素的类型。typeof 返回的是一个字符串，表示该值的基本数据类型。

4. 条件判断：

• 当目标类型为 'object' ：

  • item !== null: 确保元素不是 null，因为 typeof null 返回 'object'。
  • itemType === type: 确保元素的类型确实是 'object'。
  • !Array.isArray(item): 确保元素不是数组。

• 当目标类型为 'array' ：

  • Array.isArray(item): 直接检查元素是否为数组。

• 对于其他类型：

  • 直接比较 itemType === type。

END

如果有问题，也请指教，谢谢您的阅读