JavaScript --- 数据类型的判断

简介

  • 基本数据类型: undefined 、null 、Boolean、number、String 、symbol [ ES6 新增 ]
  • 引用数据类型: Object 、function、Array
  • 判断数据类型的方法:Array.isArray()、Object.prototype.toString.call()、typeof()、instanceof()、constructor

判断数据类型的方法


  • typeof
    • undefined 类型
    let a = undefined;
    console.log(typeof a); //undefined
    
    let b;
    console.log(typeof b); //undefined
    • null 类型
    let a = null;
    console.log(typeof a); //object
    • Boolean 类型
    let a = Boolean(true);
    console.log(typeof a); //boolean
    
    let b = true;
    console.log(typeof b); //boolean
    • number类型
    let a = Number(3);
    console.log(typeof a); //number
    
    let b = 6;
    console.log(typeof b); //number
    • String 类型
    let a = String("str");
    console.log(typeof a); //string
    
    let b = "peach";
    console.log(typeof b); //string
    • symbol
    let a = Symbol(1);
    console.log(typeof a); //symbol
    • Object
    let b = {
        name: "lily",
        age: "18"
    }
    console.log(typeof b); //object
    • function
    let c = function () {
        console.log("aaa");
    }
    console.log(typeof c); //function
    
    function c() {
        console.log("aaa");
    }
    console.log(typeof c); //function
    • Array
    let a = [1, 2, 3, 4];
    console.log(typeof a); //object
    
    let b = new Array(1, 1, 2);
    console.log(typeof b); //object

    以上,我们可知:typeof 可以准确地判断 undefined 、Boolean、number、String 、symbol 、function类型。但不能分辨 null、Object、Array。

    【机器码000表示为对象 ;typeof null 也是全零】

  • instanceof

    instanceof 只能用于检验引用数据类型,不能判断基本类型

    是基于原型链的判断:查找被检测对象的原型链上是否有与检验类型匹配的原型

    • Object
    // 例1
    let a = new Object();
    a.name = "hary";
    a.age = "16";
    console.log(a instanceof Object); //true
    
    let b = {
        name: "lily",
        age: "18"
    }
    console.log(b instanceof Object); //true

    ​ 如例1,被检测的对象是a,instanceof会向上查找a的原型,查找到a.__proto__ === Object.prototype,所以符合条件,为true。

    • function
    function c() {
        console.log("aaa");
    }
    console.log(c instanceof Function); //true
    • Array
    let a = [1, 2, 3, 4];
    console.log(a instanceof Array); //true
    
    let b = new Array(1, 1, 2);
    console.log(b instanceof Array); //true
  • constructor

    constructor同样可以理解为基于原型链,但修改原型会使结果不准确,比如在跨框架iframe的时候,使用页面中的对象会失败,因为在不同的框架iframe中,创建的对象不会相互共享其prototype属性;【constructor 属性返回对创建此对象的函数的引用。】

    • Object
    let a = new Object();
    a.name = "hary";
    a.age = "16";
    console.log(a.constructor === Object); //true
    
    let b = {
        name: "lily",
        age: "18"
    }
    console.log(b.constructor === Object); //true
    • function
    function c() {
        console.log("aaa");
    }
    console.log(b.constructor === Function); //true
    • Array
    let a = [1, 2, 3, 4];
    console.log(a.constructor === Array); //true
    
    let b = new Array(1, 1, 2);
    console.log(b.constructor === Array); //true
    • 扩展介绍:constructor 属性返回对创建此对象的函数的引用
    function employee(name,job,born)
    {
        this.name=name;
        this.job=job;
        this.born=born;
    }
    
    var bill=new employee("Bill Gates","Engineer",1985);
    
    console.log(bill.constructor);
    /* 输出结果:
        function employee(name, job, born)
        {this.name = name; this.job = job; this.born = born;}
    */
  • Array.isArray

    Array.isArray() 用于确定传递的值是否是一个 Array

    Array.isArray([1, 2, 3]);  
    // true
    Array.isArray({foo: 123}); 
    // false
    Array.isArray("foobar");   
    // false
    Array.isArray(undefined);  
    // false
  • Object.prototype.toString.call()

    最准确

    // 参考链接 5中的代码直接复制过来的,偷个懒嘻嘻
    console.log(Object.prototype.toString.call("jerry"));//[object String]
    
    console.log(Object.prototype.toString.call(12));//[object Number]
    
    console.log(Object.prototype.toString.call(true));//[object Boolean]
    
    console.log(Object.prototype.toString.call(undefined));//[object Undefined]
    
    console.log(Object.prototype.toString.call(null));//[object Null]
    
    console.log(Object.prototype.toString.call({name: "jerry"}));//[object Object]
    
    console.log(Object.prototype.toString.call(function(){}));//[object Function]
    
    console.log(Object.prototype.toString.call([]));//[object Array]
    
    console.log(Object.prototype.toString.call(new Date));//[object Date]
    
    console.log(Object.prototype.toString.call(/\d/));//[object RegExp]
    
    function Person(){};
    
    console.log(Object.prototype.toString.call(new Person));//[object Object]

参考链接

  1. JavaScript 判断该对象是否为数组:https://www.runoob.com/w3cnote/javascript-check-arrayisobject.html

  2. js 判断数组:https://www.cnblogs.com/yelongsan/p/6548123.html

  3. 如何理解JavaScript的原型和原型链 (扣丁学堂)(微信公众号)【不知道为啥微信文章的链接老是失效,这里就不贴链接了】

  4. Array.isArray()|MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray

  5. Object.prototype.toString.call(obj)精确判断对象的类型:https://blog.csdn.net/qq_39408204/article/details/91492061?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页