判断数据类型的五种方法

本文介绍了JavaScript中判断数据类型的五种方法:1) typeof,适用于基本数据类型;2) instanceof,可判断引用类型,但对原始类型和iframe中的数组无效;3) Object.prototype.toString.call,通用且能识别null和undefined;4) constructor,不推荐使用,因为构造函数可被修改;5) jq中的Array.isArray(), NaN(), isFunction()。在性能和准确性上,Array.isArray()最佳,instanceof次之。" 103328357,8615809,Springboot整合JPA实现增删改查,"['Spring框架', '后端开发', '数据库', 'Web开发', 'Spring Data JPA']

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.typeof

typeof运算符的返回类型为字符串,值包括如下几种:

    1. 'undefined'              --未定义的变量或值

    2. 'boolean'                --布尔类型的变量或值

    3. 'string'                 --字符串类型的变量或值

    4. 'number'                 --数字类型的变量或值(包括整数和浮点数)

    5. 'object'                 --对象类型的变量或值,或者null(数组也是对象的一种)

    6. 'function'               --函数类型的变量或值 (typeof Symbol 值为 'function' )
    
    7. 'symbol'                --Symbol  (typeof Symbol() 值为 'symbol'  )

typeof 123 // ‘number’
typeof 123 === ‘number’; //true

2.instanceof

用于判断一个引用类型是否属于某构造函数;
instanceof 能够判断出 [ ] 是Array的实例,但它认为 [ ] 也是Object的实例

1. [] instanceof Array             --true

2. [] instanceof Object            --true

3. '111' instanceof String          --false

4. ({}) instanceof Object           --true

5. {} instanceof Object             --报错

6. Symbol instanceof Symbol         --false

7. Symbol() instanceof Symbol       --false
 
var simpleStr = "This is a simple string"; 
var myString  = new String();
var newStr    = new String("String created with constructor");
var myDate    = new Date();
var myObj     = {};
var myNonObj  = Object.create(null);

simpleStr instanceof String; // 返回 false, 检查原型链会找到 undefined
myString  instanceof String; // 返回 true
newStr    instanceof String; // 返回 true
myString  instanceof Object; // 返回 true
myObj instanceof Object;    // 返回 true, 尽管原型没有定义
({})  instanceof Object;    // 返回 true, 同上
myNonObj instanceof Object; // 返回 false, 一种创建非 Object 实例的对象的方法
myString instanceof Date; //返回 false
myDate instanceof Date;     // 返回 true
myDate instanceof Object;   // 返回 true
myDate instanceof String;   // 返回 false

instanceof

  • instanceof的内部机制是通过判断对象的原型链中是不是能找到类型的prototype
  • 使用instanceof判断一个对象是否为数组,instanceof会判断这个对象的原型链上是否会找到对应的Array的原型,找到返回true,否则返回false
  • instanceof不能检测来自iframe的数组
  • instanceof不能校验原始值类型

3.Object.prototype.toString.call

Object.prototype.toString.call() 常用于判断浏览器内置对象。

  • 每一个继承的Object对象都有toString方法,方法没有重写的话会返回[Object type],

  • 其中type为对象的类型。

  • 但当除了Object类型的对象外,其他类型直接使用toString方法时,会直接返回都是内容的字符串,

  • 所以我们需要使用call或者apply方法来改变toString方法的执行上下文

    这种方法对于所有基本的数据类型都能进行判断,即使是 null 和 undefined 。
    const an = [‘Hello’,‘An’];
    an.toString();//“Hello,An”

    • Object.prototype.toString.call(an);//"[object Array]"
    • Object.prototype.toString.call(‘An’) // “[object String]”
    • Object.prototype.toString.call(1) // “[object Number]”
    • Object.prototype.toString.call(Symbol(1)) // “[object Symbol]”
    • Object.prototype.toString.call(null) // “[object Null]”
    • Object.prototype.toString.call(undefined) // “[object Undefined]”
    • Object.prototype.toString.call(function(){}) // “[object Function]”
    • Object.prototype.toString.call({name: ‘An’}) // “[object Object]”

    Object.prototype.toString.call() 不能校验自定义类型

    function Animal (){}
    let a = new Animal()
    Object.prototype.toString.call(a)//"[object Object]"

4.constructor

1. [].constructor === Array             --true

2. [].constructor === Object            --false

3. '123'.constructor === String          --true

4. ({}).constructor === Object           --true

5. {}.constructor === Object             --报错

6. function a(){}
   a.constructor === Function           --true
   
7. Symbol().constructor === Symbol      --true

8. Symbol.constructor === Symbol         --false 

5.jq中判断数据类型的方法 Array.isArray() isNaN() isFunction()

3 个判断数组的方法,请分别介绍它们之间的区别和优劣

Object.prototype.toString.call() 、 instanceof 以及 Array.isArray()

  • Object.prototype.toString.call() 常用于判断浏览器内置对象时。
  • instanceof 只能用来判断对象类型,原始类型不可以。并且所有对象类型 instanceof Object 都是 true。

instanceof 与 isArray

  • 当检测Array实例时,Array.isArray 优于 instanceof ,因为 Array.isArray 可以检测出 iframes
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
xArray = window.frames[window.frames.length-1].Array;
var arr = new xArray(1,2,3); // [1,2,3]

// Correctly checking for Array
Array.isArray(arr);  // true
Object.prototype.toString.call(arr); // true
// Considered harmful, because doesn't work though iframes
arr instanceof Array; // false

Array.isArray() 与 Object.prototype.toString.call()

*Array.isArray()是ES5新增的方法,当不存在 Array.isArray() ,可以用 Object.prototype.toString.call() 实现。

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

instanceof是判断类型的prototype是否出现在对象的原型链中,但是对象的原型可以随意修改,所以这种判断并不准确。

const obj = {}
obj.__proto__ = Array.prototype
// Object.setPrototypeOf(obj, Array.prototype)
obj instanceof Array // true

对于性能问题, Array.isArray 的性能最好,instanceof 比 toString.call 稍微好了一点点

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值