js判断对象是否是某一类型

判断JavaScript对象是否是某一类型有多种方法,下面介绍几种主要的方法。

1. 使用typeof运算符

typeof 运算符可以判断值的类型,对基本类型具有很好的支持。不过对于一些引用类型,typeof 返回的结果并不准确。

const num = 1;
console.log(typeof num); // "number"

const str = "hello";
console.log(typeof str); // "string"

const bool = true;
console.log(typeof bool); // "boolean"

const arr = [1,2,3];
console.log(typeof arr); // "object"

const obj = { name: "Tom", age: 18 };
console.log(typeof obj); // "object"

const func = function() {};
console.log(typeof func); // "function"

可以看到 typeof 运算符的结果是一个字符串,它返回值的类型名称。 对于基本数据类型有较好的支持,不过对于数组、函数和对象这些引用类型,typeof 判断的结果都是 "object",这就显得不够准确。

2. 使用instanceof运算符

instanceof 运算符使用方法:对象 instanceof 类型

const num = new Number(1);
console.log(num instanceof Number); // true

const str = new String("hello");
console.log(str instanceof String); // true

const bool = new Boolean(true);
console.log(bool instanceof Boolean); // true

const arr = [1,2,3];
console.log(arr instanceof Array); // true

const obj = { name: "Tom", age: 18 };
console.log(obj instanceof Object); // true

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

可以看到,instanceof 运算符可以准确地判断对象是否属于某一类型。但是如果检查一个对象是否属于 Object 类型,instanceof 运算符并不能给出正确的结果。

3. 使用toString()方法

const num = 1;
console.log(Object.prototype.toString.call(num)); // "[object Number]"

const str = "hello";
console.log(Object.prototype.toString.call(str)); // "[object String]"

const bool = true;
console.log(Object.prototype.toString.call(bool)); // "[object Boolean]"

const arr = [1,2,3];
console.log(Object.prototype.toString.call(arr)); // "[object Array]"

const obj = { name: "Tom", age: 18 };
console.log(Object.prototype.toString.call(obj)); // "[object Object]"

const func = function() {};
console.log(Object.prototype.toString.call(func)); // "[object Function]"

这种方式在各种对象类型的判断上都表现良好,但是麻烦的是需要借用 Object.prototype.toString() 方法来确定类型。

4. 使用ES6新特性,检查是否实现了Symbol.hasInstance方法

ES6 提供的 Symbol.hasInstance 方法可以判断一个对象是否是一个构造函数的实例。

一般写法:

class Person {}

const person = new Person();
console.log(person instanceof Person); // true

const num = 1;
console.log(num instanceof Number); // false
console.log(Number[Symbol.hasInstance](num)); // true

const str = "hello";
console.log(str instanceof String); // false
console.log(String[Symbol.hasInstance](str)); // true

const bool = true;
console.log(bool instanceof Boolean); // false
console.log(Boolean[Symbol.hasInstance](bool)); // true

const arr = [1,2,3];
console.log(arr instanceof Array); // true
console.log(Array[Symbol.hasInstance](arr)); // true

const obj = { name: "Tom", age: 18 };
console.log(obj instanceof Object); // true
console.log(Object[Symbol.hasInstance](obj)); // true

function Person2(name) {
  this.name = name;
}
Person2[Symbol.hasInstance] = function(obj) {
  if (obj instanceof Array) {
    return true;
  }
  return false;
}
const person2 = new Person2("Mike");
console.log(person2 instanceof Person2); // false
console.log(person2 instanceof Array); // true

可以看到,这种方式不仅支持原有的判断对象类型的方式,还支持用户自定义检查方式。

因此,从上面的介绍中,我们可以看到不同的方式都有其各自不同的优缺点,应根据实际情况选择合适的方法来判断对象是否是某一类型。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js判断对象是否是某一类型 - Python技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • 基于HTML5+tracking.js实现刷脸支付功能

    实现刷脸支付功能需要使用到HTML5和tracking.js两个技术。下面是具体的实现流程: 步骤一:准备工作 首先要安装tracking.js,可以使用npm或者直接在网页中引用tracking.min.js文件。 接下来需要用到摄像头,所以需要先获取用户的摄像头权限。在HTML5中,可以使用navigator.mediaDevices.getUserMe…

    JavaScript 2023年6月11日
    00
  • JavaScript计算两个日期时间段内日期的方法

    计算两个日期时间段内日期的方法可以通过 JavaScript 中的 Date 对象和循环结构来实现。以下是实现该方法的完整攻略: 1. 获取两个日期对象 首先,我们需要通过 JavaScript 中的 Date 对象来获取开始日期和结束日期。可以通过以下方式来创建 Date 对象: const date1 = new Date(‘2022-01-01’); …

    JavaScript 2023年5月27日
    00
  • JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)

    下面是对“JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)”的完整攻略: 1. 介绍 本篇攻略将介绍如何使用JS基于ocanvas插件实现简单画板效果,并附带demo源码下载。ocanvas是HTML5 Canvas的一个扩展库,它提供了更简单、更易用的API,并且可以方便地实现一些高级功能。 2. 前置条件 在开始使用ocanvas前…

    JavaScript 2023年6月10日
    00
  • JS如何操作DOM基于表格动态展示数据

    操作DOM基于表格动态展示数据是Web开发中常用的技术。JavaScript是DOM操作的主力军。下面是操作DOM基于表格动态展示数据的完整攻略: 1. 数据渲染 在JavaScript中,可以通过插值表达式、DOM操作等方式将数据渲染到HTML页面。下面我们将介绍两个渲染数据的示例。 1.1 使用innerHTML渲染表格 使用innerHTML属性,可以…

    JavaScript 2023年6月10日
    00
  • JavaScript正则表达式下之相关方法

    下面是关于“JavaScript正则表达式相关方法”的详细攻略。 一、使用正则表达式的方法 JavaScript中的正则表达式有以下两种基本声明方法: 1.使用字面量值声明的方法,即使用/正则表达式/的方式: const reg1 = /abc/; // 匹配’abc’ 2.使用RegExp方法声明的方法: const reg2 = new RegExp(‘…

    JavaScript 2023年6月10日
    00
  • javascript常用的设计模式

    JavaScript常用的设计模式 设计模式是一种解决特定类问题的经验总结,是经验的提炼。在JavaScript中,设计模式可以帮助我们避免重复的代码,提高代码的可维护性和可读性。下面是常见的JavaScript设计模式: 工厂模式 工厂模式是一种创建型模式,通过定义一个用于创建对象的接口来创建具体的对象实例。 function Car(type, bran…

    JavaScript 2023年6月10日
    00
  • 了解JavaScript中的选择器

    了解JavaScript中的选择器 在JavaScript中,选择器是非常重要的概念之一,它其实就是一种语法,可以帮助我们从HTML文档中选择出需要操作的元素。以下是本攻略的主要内容。 基础选择器 通过id选择元素 我们可以通过简单的 getElementById() 方法选择文档中的元素,只需使用元素的id标识作为参数即可。 示例代码: let myEle…

    JavaScript 2023年5月18日
    00
  • vue.js实现会动的简历(包含底部导航功能,编辑功能)

    下面是“vue.js实现会动的简历(包含底部导航功能,编辑功能)”的完整攻略: 1. 确定需求和技术栈 首先,我们需要明确实现的需求,包括会动简历、底部导航、编辑功能等。然后确定使用的技术栈为Vue.js,同时需要用到CSS动画和一些基础的HTML、CSS知识。 2. 设计简历样式和布局 在Vue.js中,可以使用组件来实现页面的设计和布局。因此,我们需要先…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部