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

yizhihongxing

判断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日

相关文章

  • ie6、ie7dom 元素重新渲染及zoom的使用

    当网站需要支持IE6和IE7浏览器时,可能会出现页面布局绘制问题,这是由于IE6和IE7的渲染机制不同,就会导致DOM元素重绘的问题。为解决这一问题,可以使用zoom属性重新渲染元素。 什么是DOM元素重新渲染 DOM元素的重新渲染是指改变元素的外观属性时,需要将其重新绘制一次。当浏览器重新渲染元素时,会影响到布局和性能。IE6和IE7的浏览器默认采用的是H…

    JavaScript 2023年6月10日
    00
  • JS、jQuery中select的用法详解

    JS、jQuery中select的用法详解 什么是select 在表单中,select元素可以让用户从指定的一组选项中选择一个或多个选项。在HTML中,我们使用<select>元素来呈现选择框。select元素同时也包括<option>元素,每一个option元素就是一个选择项。 基本语法 select语法格式如下: <sele…

    JavaScript 2023年6月11日
    00
  • js拼接html字符串的注意事项

    JS拼接HTML字符串是Web开发中非常常见的方法,通常用于在页面中动态显示数据或者添加新的HTML元素。在拼接HTML字符串时,需要注意以下几点: 1. 字符串拼接方式 字符串拼接可以使用 + 连接符,也可以使用模板字符串。使用模板字符串可以在字符串内方便地插入变量或表达式,避免繁琐的字符串连接操作。示例如下: // 使用+连接符 const htmlSt…

    JavaScript 2023年5月28日
    00
  • 深入理解JavaScript中的尾调用(Tail Call)

    深入理解JavaScript中的尾调用(Tail Call) 在JavaScript中,尾调用(Tail Call)是一个非常重要的概念。它解决了递归调用过多时可能发生的堆栈溢出问题,同时还可以提高代码的性能。本文将详细介绍什么是尾调用,以及如何正确地使用它。 尾调用的定义 尾调用是指函数最后执行的操作是一个返回语句,这个返回值可以直接返回给函数调用者。这个…

    JavaScript 2023年6月10日
    00
  • JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)

    判断浏览器是否为IE浏览器的方法有很多种,包括通过检测UserAgent(用户代理字符串)、检测浏览器特性、检测IE浏览器独有的属性等方式。以下是一些方法的示例说明。 方法一:检测UserAgent中是否包含”MSIE”或”Trident” function isIE() { const ua = window.navigator.userAgent; co…

    JavaScript 2023年6月10日
    00
  • 九种js弹出对话框的方法总结

    那么首先对于这个主题,我们需要先明确一下一些基本的概念。 什么是对话框 对话框是一种常用的网页中弹出提示信息的方式,类似于当前操作系统的模态对话框。它可以包含文本、按钮、表单等,显示给用户进行操作。 常见的对话框种类 在JS中,常见的对话框包括alert、confirm、prompt、layer、sweetAlert2、artDialog、mbox、weui…

    JavaScript 2023年6月11日
    00
  • 程序员必知35个jQuery 代码片段

    程序员必知35个jQuery 代码片段 本文将介绍35个常用的jQuery代码片段,以帮助程序员更快更方便地进行网页开发。 代码片段 以下是本文介绍的35个jQuery代码片段: 1. 获取当前时间 var now = new Date(); var hours = now.getHours(); var minutes = now.getMinutes()…

    JavaScript 2023年5月27日
    00
  • JavaScript学习笔记之DOM基础操作实例小结

    JavaScript(JS)是一种广泛使用的脚本语言,常用于网页设计与动态交互效果实现。DOM(Document Object Model)文档对象模型是JS操作网页中HTML元素和样式的接口。掌握DOM基础操作是学习JS的重要一步,本文将为你介绍如何使用DOM对网页进行修改操作。 1. 加载HTML和JS 在HTML文件中引入JS,然后再通过documen…

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