详解JavaScript类型判断的四种方法

详解JavaScript类型判断的四种方法

JavaScript 是一种弱类型语言,在使用时需要对数据的类型进行判断和转换。本文将介绍常见的 JavaScript 类型判断方法,包括:

  1. typeof
  2. instanceof
  3. Object.prototype.toString.call()
  4. constructor

1. typeof

typeof 是 JavaScript 内置的操作符,用于判断一个变量的类型。它可以返回以下字符串中的一个:undefined, boolean, number, string, object, function。

示例:

var a;
console.log(typeof a); // "undefined"

var b = "hello";
console.log(typeof b); // "string"

var c = 123;
console.log(typeof c); // "number"

var d = true;
console.log(typeof d); // "boolean"

var e = { foo: 'bar' };
console.log(typeof e); // "object"

var f = function() {};
console.log(typeof f); // "function"

需要注意的是,typeof null 返回 "object",这是一个旧有的 Bug。

2. instanceof

instanceof 可以用于判断对象的原型链上是否存在一个构造函数。它接受两个参数,一个是对象实例,一个是构造函数。若对象实例在其原型链上能找到这个构造函数,则返回 true,否则返回 false。

示例:

function Person() {
}
var person = new Person();

console.log(person instanceof Person); // true
console.log(person instanceof Object); // true

var str = "hello";
console.log(str instanceof String); // false

var num = 123;
console.log(num instanceof Number); // false

var bool = true;
console.log(bool instanceof Boolean); // false

var obj = {};
console.log(obj instanceof Object); // true

var arr = [];
console.log(arr instanceof Array); // true
console.log(arr instanceof Object); // true

var date = new Date();
console.log(date instanceof Date); // true
console.log(date instanceof Object); // true
console.log(date instanceof Number); // false

需要注意的是,instanceof 只能用于判断对象,而不能用于判断基本类型。

3. Object.prototype.toString.call()

Object.prototype.toString() 方法返回一个表示当前对象类型的字符串。这个方法可以用来判断一个对象的类型,也可以用来判断基本类型的值类型。

示例:

console.log(Object.prototype.toString.call(undefined)); // "[object Undefined]"
console.log(Object.prototype.toString.call(null)); // "[object Null]"
console.log(Object.prototype.toString.call(true)); // "[object Boolean]"
console.log(Object.prototype.toString.call(123)); // "[object Number]"
console.log(Object.prototype.toString.call("hello")); // "[object String]"
console.log(Object.prototype.toString.call({})); // "[object Object]"
console.log(Object.prototype.toString.call([])); // "[object Array]"
console.log(Object.prototype.toString.call(new Date)); // "[object Date]"
console.log(Object.prototype.toString.call(function() {})); // "[object Function]"

需要注意的是,这种方法也可以用来识别出它所在上下文环境的类型,例如:

console.log(Object.prototype.toString.call(arguments)); // "[object Arguments]"
console.log(Object.prototype.toString.call(document.getElementsByTagName("body"))); // "[object HTMLCollection]"
console.log(Object.prototype.toString.call(document.createElement("div"))); // "[object HTMLDivElement]"

4. constructor

constructor 是 JavaScript 对象的一个属性,指向创建该对象的函数。使用 constructor 属性进行类型判断需要注意原型链。

示例:

function Person() {}
var person = new Person();

console.log(person.constructor === Person); // true

var str = "hello";
console.log(str.constructor === String); // true

var num = 123;
console.log(num.constructor === Number); // true

var bool = true;
console.log(bool.constructor === Boolean); // true

var obj = {};
console.log(obj.constructor === Object); // true

var arr = [];
console.log(arr.constructor === Array); // true

var date = new Date();
console.log(date.constructor === Date); // true

需要注意的是,在继承中,如果一个对象的原型链上存在多个构造函数,那么使用 constructor 判断类型时,将会得到第一个构造函数。

function Animal() {} 
function Dog() {} 

Dog.prototype = new Animal();
Dog.prototype.constructor = Dog;

var dog = new Dog();
console.log(dog.constructor); // Animal

以上就是四种常见的 JavaScript 类型判断方法。在实际开发过程中,需要根据情景选用合适的判断方法,进行类型校验和转换。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:详解JavaScript类型判断的四种方法 - Python技术站

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

相关文章

  • JS实现的杨辉三角【帕斯卡三角形】算法示例

    下面就是关于JS实现的杨辉三角算法的详细攻略: 杨辉三角简介 杨辉三角,又称为帕斯卡三角形,是一个数列,其中每个数是上方两数之和。杨辉三角的前几行如下所示: 1 1 1 1 2 1 1 3 3 1 1 4 6 4 1 杨辉三角具有一些奇特的性质,例如每行数字左右对称,每个数字等于其左上方和右上方数字之和等等。 算法步骤 以下是JS实现的杨辉三角算法的步骤: …

    JavaScript 2023年5月28日
    00
  • Javascript基础之数组的使用

    Javascript基础之数组的使用 什么是数组? 数组是Javascript中的一种数据结构,用于存储多个相同类型的数据。一个数组可以包含任意数量的元素,且这些元素可以是数字、字符串、对象、甚至另一个数组。 如何声明一个数组? 声明一个数组的语法是 [],可以选择性地在中括号内包含多个元素。例如: var fruits = [‘apple’, ‘banan…

    JavaScript 2023年5月28日
    00
  • JavaScript 中的12种循环遍历方法【总结】

    JavaScript 中的12种循环遍历方法【总结】 在 JavaScript 中,我们经常需要对数据进行遍历,获取其中的值或者进行一定的处理,本文总结了 JavaScript 中常见的 12 种数据遍历方法,分别是: for 循环 for…in 循环 for…of 循环 forEach() 方法 map() 方法 filter() 方法 some(…

    JavaScript 2023年5月27日
    00
  • Js参数RSA加密传输之jsencrypt.js的使用

    让我来给您详细讲解“Js参数RSA加密传输之jsencrypt.js的使用”的完整攻略。 什么是RSA加密 RSA加密是一种非对称加密,它的实现需要公钥和私钥两个因子。将消息加密使用的是公钥,而解密需要用到私钥,这样就可以防止信息被中间人截获。RSA加密算法常用于保护数据在传输的过程中不能被恶意拦截或窃取。在Web开发中,RSA加密常常用于加密用户的个人信息…

    JavaScript 2023年5月19日
    00
  • JavaScript中获取未知对象属性的代码

    获取未知对象属性是 JavaScript 中常见的需求之一,通常可以通过以下两种方式来实现: 1. 使用“[]”操作符 JavaScript 中可以通过“[]”操作符来获取对象属性。它的语法为: object[property] 其中,object 是要获取属性的对象,property 是属性名称(可以是变量或字符串)。 如果对象存在该属性,则返回该属性的值…

    JavaScript 2023年6月10日
    00
  • JavaScript中Function()函数的使用教程

    下面就为大家详细讲解JavaScript中Function()函数的使用教程。 一、什么是Function()函数 Function()函数是JavaScript中的一种内置函数,它用来创建一个函数对象。在JavaScript中,函数也是对象,因此它们可以像其他对象一样传递、存储和处理。 二、Function()函数的基本语法 function functi…

    JavaScript 2023年5月27日
    00
  • JavaScript 使用 splice 方法删除数组元素可能导致的问题

    JavaScript 使用 splice 方法删除数组元素可能导致的问题 splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。 JavaScript 遍历数组并通过 splice 方法删除该数组符合某些条件的元素将会导致哪些问题? 导致的问题 当使用 splice 方法从 JavaSc…

    JavaScript 2023年4月24日
    00
  • JS判断字符串长度的5个方法(区分中文和英文)

    这里是详细讲解“JS判断字符串长度的5个方法(区分中文和英文)”的完整攻略。 什么是字符串长度 在JavaScript编程中,字符串长度指的是字符串中包含的字符数。在英文环境中,一个字符通常只占用一个字节的空间,而在中文环境中,一个字符可能需要占用多个字节的空间。因此,在处理字符串时,需要特别注意字符长度的计算问题。 判断字符串长度的方法 下面介绍5种常用的…

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