首页 > 资讯 > 前端开发 > JavaScript >关于JS数据类型检测的多种方式总结

127

分享到

关于JS数据类型检测的多种方式总结

2024-04-02 19:04:59 127人浏览薄情痞子

摘要

目录背景判断数据类型的手段有哪些？ 1. 用typeof判断基础数据类型： 2. 用instanceof判断对象数据类型3. 用contructor属性 4. toString方法

1. 用typeof判断基础数据类型：
2. 用instanceof判断对象数据类型
3. 用contructor属性
4. toString方法
5. 用Array.isArray判断数组
6.区分ArrayLike与Array
7.判断一个对象是否是纯对象（or普通对象）
8. NaN如何检测，Number.isNaN与isNaN有啥区别
9. 鸭式类型检测法

总结

背景

总所周知，js是一门动态的弱类型脚本语言，其采用动态的类型系统以及基于原型的继承方式。

缺乏类型的静态约束，这意味着数据类型导致的程序错误并不能在编译阶段及时发现，要想写出健壮的代码，就必须在运行时各种的check&兼容，所以能够熟练准确的检测数据类型成为掌握这门语言最重要的基础之一。

判断数据类型的手段有哪些？

总的来说大致有以下几种：typeof、instanceof、Object.prototype.toString、constructor、鸭式类型、及针对特定类型的检测方法Array.isArray(),Number.isNaN()，虽然方法很多，但他们的使用场景有所不同。

1. 用typeof判断基础数据类型：

返回值有undefined、string、number、boolean、object、function、symbol七种。

可以看出，typeof作为官方提供的类型检测操作符，在检测undefined、string、boolean、symbol这些基本数据类型及function方面是十分靠谱的。表现拉垮的地方主要在于

1）不能对具体对象类型（Array、Date、regExp）进行区分。
2） typeof null === 'object' // 竟然是true。。。。

缺陷 2）可以避免，在判断对象引用类型时多判断一句即可，typeof x === 'object' && x !== null。但是不能区分对象的具体类型，确实是个很大痛点。

2. 用instanceof判断对象数据类型

此运算符用于检测某个构造函数的prototype是否出现在目标对象的原型链上。

这是一种预测的检测方式，并不会像typeof一样直接将数据类型以字符串的方式进行返回，而是你需要预判对象类型的构造函数，最终返回一个boolean值。

检测规则其实从命名就可以看出，判断实例是否是由某个构造函数所创建的，那么知道了原理，现在动手实现一个属于自己的instanceof。


function myInstanceof(target,constructor){
  const baseType = ['string', 'number','boolean','undefined','symbol']
    if(baseType.includes(typeof(target))) { return false }
    //原型链其实就是个对象组成的链表，遍历这个链表，
  let prototype = Object.getPrototypeOf(target);
    while(prototype){
        //一旦链上有对象有符合，就返回true
      if(prototype === constructor.prototype){
        return true
      }else{
        prototype = Object.getPrototypeOf(prototype)
      }
    }
    return false
}
console.log(myInstanceof([],Array))

在js里，可以从广义上认为万物源于对象，因为实例虽然是通过构造函数创建的，但是构造函数本身只是没有感情的生产机器，实例的灵魂和性格（公共属性和方法）都是共享自构造函数的prototype属性指向的那个原型对象，而且原型对象都是纯对象，纯对象又是由Object构造函数创建的，那么就会造成下边这种后果。

对于数组，遍历原型链上的对象,Array.prototype Object.prototype都会出现。

并且，对字面量方式创建的基本数据类型无法进行判断。比如

如何弥补上边的缺陷呢，答案是可以在上边特殊的场景中采用下边的constructor代替instanceof。

3. 用contructor属性

首先先明确。constructor是原型上的属性，实例继承自原型，所以实例上也能直接访问此属性。
首先看下contructor的通用性表现

意外的表现不错，除了null、undefined，有contructor属性的基础（包装）类型或者对象类型都能准确判断。

能准确区分Array|Object 因为它没有instanceof那样会遍历整条原型链，只是在实例身上进行判断。但也有个致命的缺陷，实例上的这一属性太容易被修改了，一旦修改，这个方法就没有意义了。

4. toString方法

首先，js的对象类型或者基础类型的包装对象都有一个toString方法。继承自Object.prototype.toString()，调用会返回对应类型的字符串标记"[object Type]"。

这个方法有种乱拳打死老师傅，无心插柳柳成荫的感觉，本来的作用只是得到一个表示该对象的字符串，现在用在js类型检测上，表现简直不要太好，针对基础类型及对象类型表现都非常不错，如果非要说个缺点，只能说返回的字符串有点复杂，使用不太方便，现在让我们动手简化一下。

先写一个简版


function isType(type,value){
    return Object.prototype.toString.call(value) === `[object ${type}]`
}
console.log(isType('Array',[]))
console.log(isType('Number',1))

这样使用也不太方便，‘Array' ‘Number'这样的类型参数，很容易拼写错误，所以希望方法可以预设参数，并且希望构造一个函数工厂，调用返回类似于isArray这样的函数。在IDE中函数名相比字符串会拥有更好的代码提示，不容易拼写错误。


function isType(type){
    return function(value){
        return Object.prototype.toString.call(value) === `[object ${type}]`
    }
}

const isArray = isType('Array')
const isNumber = isType('Number')
console.log(isArray([]),isNumber(1))

这里运用了高阶函数的思想，保留参数+返回一个新的函数,那么可以想到js里bind除了可以绑定this，也有保留参数+返回新函数的功能，用在这里也很合适。


function isType(type,value){
    return Object.prototype.toString.call(value) === `[object ${type}]`
}

const isArray = isType.bind(null,'Array')
const isNumber = isType.bind(null,'Number')
console.log(isArray([]),isNumber(1))

更进一步，用参数柯里化的思想改造一波


function isType(type,value){
    return Object.prototype.toString.call(value) === `[object ${type}]`
}
function curring (fn,...args1){
    let len = fn.length;
    return function(...args2){
        const args = args1.concat(args2);
        if(args.length < len){
            return curring(fn,...args)
        }else{
            return fn(...args)
        }
    }
}
const isArray = curring(isType,'Array')
const isNumber = curring(isType,'Number')
console.log(isArray([]),isNumber(1))

最后，丰富一下支持的类型，大功告成。


const types = [
    'Null',
    'Undefined',
    'String',
    'Number',
    'Boolean',
    'Object',
    'Array',
    'Date',
    'Function',
    'RegExp',
    'Symbol',
    'Math',
]
const checkTypeUtil = {}
types.forEach((type)=>{
    checkTypeUtil[`is${type}`] = curring(isType,type)
})
export {
 checkTypeUtil
}
console.log(checkTypeUtil.isArray([]))

5. 用Array.isArray判断数组

上边提到 instanceof可以用来检测数组，但是这在iframe创建的多window环境中，因为window全局环境需要隔离，所以Array和Array.prototype在每个窗口中必须是不同的，所以iframeA.Array.prototype ≠ iframeB.Array.prototype，所以 iframeA.arr instanceof iframeB.Array必定是返回false，这是小概率的事件，但是在使用iframe的场景里，互相传值，也是非常可能发生的。使用es6提供的Array.isArray就没有这个问题，可以准确判断数组。

可以这样 pollify


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

6.区分ArrayLike与Array

类数组的定义是：

拥有length属性，其它属性（索引）为非负整数（对象中的索引会被当做字符串来处理
不具有数组所具有的方法


function isLikeArray(x){
    if(!(typeof x === 'object' && x !== null)){
        return false
    }
    return typeof x.length === 'number' && x.length >= 0 && !Array.isArray(x)
}

类数组可以用Array.from Array.prototype.slice.call(val)来转换为真正的数组。

7.判断一个对象是否是纯对象（or普通对象）

纯对象的定义：特指通过一下三种方式创建的对象

new Object
对象字面量创建 {}
Object.create(null)

Jquery、lodash源码都是采用下边的方法来检测


const funcToString = Function.prototype.toString
const objectCtorString = funcToString.call(Object)

function isPlainObject(value){
    // 先用toString先排除其他数据类型
    if(!value || !Object.prototype.toString.call(value) === "[object Object]"){
        return false
    }
    const proto = Object.getPrototypeOf(value)
    if(proto === null){//兼容Object.create(null)这样创建的对象
        return true
    }
    const Ctor = Object.prototype.hasOwnProperty.call(proto,'constructor') && proto.constructor;
    if(typeof Ctor !== 'function'){
        return false
    }
    // 这里通过字符串判断构造函数是否是Object，而不是直接使用instanceof，是为了避免上边提到的 多window环境Object不同的问题
    if(funcToString.call(Ctor) === objectCtorString){
        return true
    }
    return false
}
console.log(isPlainObject(Object.create(null)))
console.log(isPlainObject(new Object))
console.log(isPlainObject({a:1}))

8. NaN如何检测，Number.isNaN与isNaN有啥区别

结论：Number.isNaN会严格的判断传入的值是否是直接等于NaN。

isNaN则会先进行Number()转换，然后再进行是否是NaN的判断。

9. 鸭式类型检测法

其实上边利用constuctor判断数据类型，就是采用了这种方法。判断一个动物是不是鸭子，那么通过看起来像鸭子，叫起来像鸭子这样简单的经验判断就可大致进行判断。

比如判断一个对象是不是一个Promise，就可以这样


function isPromise(x){
    if(!(x instanceof Promise)){
        return false
    }
    return typeof x.then === 'function'
}

总结

到此这篇关于JS数据类型检测的文章就介绍到这了,更多相关JS数据类型检测内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 关于JS数据类型检测的多种方式总结

本文链接: https://www.lsjlt.com/news/134612.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

回答

如何调试操作系统的错误？
操作系统

2023-11-15发布

回答

操作系统中的I/O系统是如何实现的？
操作系统

2023-11-15发布

回答

如何实现操作系统的内存管理？
操作系统

2023-11-15发布

回答

什么是虚拟内存，它对操作系统有什么影响？
操作系统

2023-11-15发布

回答

ASP中的MVC架构和WebForms架构有什么区别和使用场景？
ASP.NET

2023-11-15发布

回答

ASP中的数据验证和数据校验有什么不同？
ASP.NET

2023-11-15发布

回答

ASP中的ADO对象和DAO对象有什么区别和使用方法？
ASP.NET

2023-11-15发布

回答

Node.js中的包管理器NPM是什么？如何使用它进行依赖管理？
node.js

2023-11-15发布

回答

Vue.js中的动态组件是什么？如何使用它来动态渲染组件？
VUE

2023-11-15发布

回答

如何使用Vue.js实现懒加载和预加载？
VUE

2023-11-15发布

关于JS数据类型检测的多种方式总结

目录

背景

判断数据类型的手段有哪些？

1. 用typeof判断基础数据类型：

2. 用instanceof判断对象数据类型

3. 用contructor属性

4. toString方法

5. 用Array.isArray判断数组

6.区分ArrayLike与Array

7.判断一个对象是否是纯对象（or普通对象）

8. NaN如何检测，Number.isNaN与isNaN有啥区别

9. 鸭式类型检测法

总结

本篇文章演示代码以及资料文档资料下载

关于JS数据类型检测的多种方式总结

JavaScript中检测数据类型的四种方法总结

JS数据类型判断的9种方式总结

js中基于数据类型检测的方式有哪些

JavaScript中检测数据类型的四种方法

js中各种数据类型检测和判定的实战示例

【总结】golang中各种数据类型间的转换方法

Mybatis-plus多数据源配置的两种方式总结

JavaScript中检测数据类型的四种方法分别是什么

总结php中字符串转为数字类型的几种方式

利用SpringBoot实现多数据源的两种方式总结

SpringMVC接收java.util.Date类型数据的2种方式小结

京东一面：post为什么会发送两次请求？???

鼠标划过时整行变色284607详解

鼠标划过时整行变色284415处理办法

TypeScript接口和类型的区别小结

细说JS数组遍历的一些细节及实现

深入浅出JavaScript前端中的设计模式

初学者如何快速搭建Express开发系统步骤详解

JavaScrip简单数据类型隐式转换的实现

前端Website sitemap.xml文件搜索引擎优化

vue使用Swiper踩坑解决避坑