zoukankan      html  css  js  c++  java
  • js有哪些数据类型?及检测数据类型的方式有哪些

    一.typeof

    typeof操作符返回一个用来表示数据类型的字符串,注意typeof运算之后的结果都是字符串类型的

    注意:typeof是一个操作符,不是一个函数!

    1.“string” 值是字符串

    2.“boolean” 值是布尔值

    3.“number” 值是数值

    4.“undefined” 值未定义

    5.“object” 值是对象,数组或null

    6.“function” 值是函数

    7.“symbol” 值是Symbol

    var num=123;
    var str="123";
    var boo=true;
    var und=undefined;
    var arr=[];
    var obj={};
    var nul=null;
    var fun=function(){};
    var s = Symbol();
    console.log(typeof num); //"number"
    console.log(typeof str); //"string"
    console.log(typeof boo); //"boolean"
    console.log(typeof und); //"undefined"
    console.log(typeof arr); //"object"
    console.log(typeof obj); //"object"
    console.log(typeof nul); //"object"
    console.log(typeof fun); //"function"
    

    1 优点
    只能检测出number,boolean,string,symbol,undefined,function,object

    2.缺点
    基本数据类型,null返回object 其他都可以返回正确结果
    引用数据类型,除了function以外,都返回object
    function返回function类型

    二.instanceof

    instanceof运算符用于测试构造函数的prototype属性是否出现在对象的原型链中的任何位置.

    语法: object instanceof 构造函数

    返回值:如果是这个构造函数构造出来的,返回true,否则返回false。

    console.log(1 instanceof Number); //false
    console.log("liuqiao" instanceof String); //false
    console.log(true instanceof Number); //false
    console.log(function(){} instanceof Function); //true
    console.log({} instanceof Object);//true
    console.log([1,2,3] instanceof Array);//true


    得出一个结论:instanceof 运算符用于对象类型检测,无法检测基本数据类型,因为内部机制是通过判断对象的原型链中是不是能找到类型的 prototype。

    并且也无法检测undefined和null ,因为他们两个比较特殊,使用instanceof检测时,浏览器根本不识别,会报错

    class Animal {
    constructor() {
    
    }
    }
    class CatParent extends Animal {
    constructor() {
    super();
    }
    }
    class CatSon extends CatParent {
    constructor() {
    super();
    }
    }
    var catson = new CatSon();
    console.log(catson instanceof CatSon);//true
    console.log(catson instanceof CatParent);//true
    console.log(catson instanceof Animal);//true
    console.log(catson instanceof Object);//true

    instanceof 只要该实例的父亲辈,爷爷辈以及祖先辈,都会返回true

    1.优点
    可以检测出某特定的引用类型具体是某种类型
    2.缺点只能检测引用类型

    三.constructor

    每个对象都有一个隐藏属性constructor,该属性指向对象的构造函数(类)

    console.log(("1").constructor === String);//true
    console.log((1).constructor === Number);//true
    console.log((true).constructor === Boolean);//true
    console.log(([]).constructor === Array);//true
    console.log((function () { }).constructor === Function);//true
    console.log(({}).constructor === Object);//true


    1.优点
    基本上基本数据类型和引用数据类型都可以检测,但是除了自定义的对象外
    2.缺点
    为什么说除了自定义对象外都可以检测 ,因为检测自定义对象时不可靠!具体原因参考参考用constructor来做类型识别,并不可靠
    函数的 constructor 是不稳定的,这个主要体现在自定义对象上,当开发者重写 prototype 后,原有的 constructor 引用会丢失,constructor 会默认为 Object
    undefined和null无法检测

    四.Object.prototype.toString.call()

    使用Object.prototype上的原生toString()方法判断数据类型

    当要判断多类型比较复杂的时候,强烈推荐使用这个方法

    jQuery就是通过这种方式来判断的!

    var m = Object.prototype.toString;
    console.log(m.call("aaa"));//[object String]
    console.log(m.call(1));//[object Number]
    console.log(m.call(true));//[object Boolean]
    console.log(m.call(null));//[object Null]
    console.log(m.call(undefined));//[object Undefined]
    console.log(m.call([]));//[object Array]
    console.log(m.call(function () { }));//[object Function]
    console.log(m.call({}));//[object Object]
    console.log(m.call(new Date));//[object Date]
    console.log(m.call(/d/));//[object RegExp]
    function Person() { };
    console.log(m.call(new Person));//[object Object]


    1.优点
    基本上的数据类型都可以检测
    2.缺点
    自定义的类是不能准确判断的,这里可以采用instanceof
    Object.prototype.toString()本身是允许被修改的,而我们目前所讨论的关于Object.prototype.toString()这个方法的应用都是假设toString()方法未被修改为前提的。

    3,扩展
    我们发现上面打印[object String]类似这种不太完美,比如我想直接打印string呢

    function parse(str) {
    return str.slice(8, -1).toLowerCase();
    }


    封装一个函数,实际上Object.prototype.toString.call()得到的是一个字符串,只要我们对他进行截取即可,然后转为小写,就可以得到我们想要的结果,与typeof打印的格式一样

  • 相关阅读:
    53、Gif 控件GifView 的使用,播放gif图片
    52、图片缩放库 PhotoView
    51、自定义View基础和原理
    Adapter适配器 final int Id 导致选中的Item不在当前界面
    Linux目录结构
    Linux包管理工具分析
    Linux 软件包安装管理
    MySQL配置详解
    MySQL 5.5.x配置文件详解
    Linux Apache2 配置介绍
  • 原文地址:https://www.cnblogs.com/ygunoil/p/14593648.html
Copyright © 2011-2022 走看看