面试题解析之对象类型的判断

对象类型是引用类型的一种,表示一个存储了键值对的集合。在对对象类型进行判断之前,我来为大家回忆一下有哪些数据类型。

数据类型有哪些

在 JavaScript中,数据类型可以分为原始类型和引用类型。

原始类型:

  1. 字符串(String) :表示一串字符。
  2. 数字(Number) :表示数值。
  3. 布尔值(Boolean) :表示真或假。
  4. 空值(Null) :表示一个空值对象。
  5. 未定义(Undefined) :表示一个未定义的值。
  6. Symbol:表示唯一的标识符。

原始类型是不可改变的简单数据类型,它的值在赋值和传递时,是按值传递的,即复制了原始值本身。

ini 复制代码
var a = 18;
var b = a;
a = 10;
console.log(b); // 输出: 18

引用类型:是可以改变的复杂数据类型

  1. 对象(Object) :表示键值对的集合。
  2. 数组(Array) :表示有序的值的集合。
  3. 函数(Function) :表示可执行的代码块。

引用类型的值在赋值和传递时,是按引用传递的,即复制了引用(指向内存中的对象)。

ini 复制代码
var obj1 = { name: '张三' };
var obj2 = obj1;
obj1.name = '李四';
console.log(obj2.name); // 输出: 李四

需要注意的是,虽然原始类型的值是不可改变的,但是我们可以通过重新赋值来改变变量的值。而引用类型的值是可变的,所以改变对象的属性会影响到所有引用该对象的变量。

对象类型的判断

typeof

javascript 复制代码
console.log(typeof 42); // 输出: "number"
console.log(typeof "Hello"); // 输出: "string"
console.log(typeof true); // 输出: "boolean"
console.log(typeof undefined); // 输出: "undefined"
console.log(typeof null); // 输出: "object" (这是 typeof 操作符的一个特殊情况)
console.log(typeof {}); // 输出: "object"
console.log(typeof []); // 输出: "object" (数组也是一种对象)
console.log(typeof function(){}); // 输出: "function"

typeof 运算符虽然可以帮助我们判断一个值是否为对象类型,但无法准确区分对象、数组和 null。为了更精确地判断一个值是否为对象类型,我们可以使用其他方法。


instanceof

javascript 复制代码
var obj = {};
var arr = [];
var nullValue = null;

console.log(obj instanceof Object); // 输出: true
console.log(arr instanceof Array); // 输出: true
console.log(nullValue instanceof Object); // 输出: false

instanceof 操作符用于检测构造函数的 prototype 属性是否出现在对象的原型链中的任何位置。如果是,则返回 true;否则返回 false

需要注意的是,instanceof 操作符只能用来判断对象是否是某个构造函数创建的实例,而不能用来判断基本数据类型(如字符串、数字、布尔值等)的类型。


Object.prototype.toString.call(xx)

javascript 复制代码
var obj = {};
var arr = [];
var str = "Hello";
var num = 42;

console.log(Object.prototype.toString.call(obj)); // 输出: "[object Object]"
console.log(Object.prototype.toString.call(arr)); // 输出: "[object Array]"
console.log(Object.prototype.toString.call(str)); // 输出: "[object String]"
console.log(Object.prototype.toString.call(num)); // 输出: "[object Number]"

Object.prototype.toString 是 JavaScript 所有对象都具有的方法,它返回一个表示当前对象类型的字符串,格式为 "[object 类型]"。通过使用 call 方法,我们可以改变 this 的指向,从而让 toString 方法作用于传入的参数 xx

总结

  • 可以使用 typeof 操作符来判断基本数据类型和大部分对象类型,而使用 instanceof 操作符来判断对象是否是特定构造函数创建的实例。
  • 可以通过Object.prototype.toString.call(xx)获得类似 [objectType] 的字符串。
  • instanceof可以正确的判断对象的类型,因为它用于检测构造函数的 prototype 属性是否出现在对象的原型链中。
相关推荐
十一吖i8 分钟前
Vue3项目使用ElDrawer后select方法不生效
前端
只可远观9 分钟前
Flutter目录结构介绍、入口、Widget、Center组件、Text组件、MaterialApp组件、Scaffold组件
前端·flutter
周胡杰11 分钟前
组件导航 (HMRouter)+flutter项目搭建-混合开发+分栏效果
前端·flutter·华为·harmonyos·鸿蒙·鸿蒙系统
敲代码的小吉米25 分钟前
前端上传el-upload、原生input本地文件pdf格式(纯前端预览本地文件不走后端接口)
前端·javascript·pdf·状态模式
是千千千熠啊26 分钟前
vue使用Fabric和pdfjs完成合同签章及批注
前端·vue.js
da-peng-song42 分钟前
ArcGIS Desktop使用入门(二)常用工具条——数据框工具(旋转视图)
开发语言·javascript·arcgis
九月TTS1 小时前
TTS-Web-Vue系列:组件逻辑分离与模块化重构
前端·vue.js·重构
我是大头鸟2 小时前
SpringMVC 内容协商处理
前端
Humbunklung2 小时前
Visual Studio 2022 中添加“高级保存选项”及解决编码问题
前端·c++·webview·visual studio
墨水白云2 小时前
nestjs[一文学懂nestjs中对npm功能包的封装,ioredis封装示例]
前端·npm·node.js