基础一：JS数据类型

codecook 发布于2019-08-19 18:44 / 2141人阅读

摘要：本文章主要总结一下数据类型的识别判断方法最后封装一个函数，可以判别所有的类型数据类型基本类型类型该类型只有一个值，即小写，在使用声明变量但是未对其加以初始化时，这个变量的值就是。

*本文章主要总结一下js数据类型的识别判断方法
tyoeof
instanceof
Object.prototype.toString.call
constructor
最后封装一个函数，可以判别所有的类型*

1.数据类型

基本类型：

Undefined类型：该类型只有一个值，即undefined（小写），在使用var声明变量但是未对其加以初始化时，这个变量的值就是undefined。

Null类型：该类型也只有一个值，即null（小写），null值表示一个空对象指针，所以用typeof操作符检测null值会返回object的原因。

Boolean类型：改类型有两个值：true和false（小写）。

Number类型：表示整数和浮点数

String类型：即字符串

引用类型

Object类型：即对象

Array类型：数组

Date类型：日期

RegExp类型：正则

Function类型

2.类型的识别的判断方法 （1）typeof总结：

首先typeof不是方法，只是一个操作符。

可以识别标准类型（Null除外）

不能识别具体的对象类型（Function除外）

返回的值首字母都是小写！！！！！！！！

    //识别标准类型
        typeof "jerry";      //"string"
        typeof 12;           //"number"
        typeof true;         //"boolean"
        typeof undefined;   //"undefined"
        typeof null;         //"object"
        typeof {name:"jerry"};   //"object"
        
    //识别引用类型
        typeof function(){};  //"function"
        typeof [];            //"object"
        typeof new Date;     //"object"
        typeof /d/;         //"object"
        //创建一个自定义对象
        function Person(){};
        typeof new Person;      //"object"

（2）instanceof

    //能够判别引用类型
    [] instanceof Array;       //true
    /d/ instanceof RegExp;    //true
    new Date instanceof Date;  //true
    var a = function(){}; 
    a instanceof Function;     //true
   
    //不能判别原始类型
    1 instanceof Number;          //false
    "jerry" instanceof String;  //false
    
    //能够判别自定义对象类型及父子类型
    //自定义类型
    function Person(){};
    Person instanceof Function;  //true
    //父子类型
    function Point(x,y){
        this.x = x;
        this.y = y;
    }
    function Cirele(x,y,r){
        Point.call(this,x,y);
        this.radius = r;
    }
    Circle.prototype = new Point();
    Circle.prototype.constructor = Circle;
    var c = new Circle(1,1,2);
    c instanceof Circle  //true
    c instanceof Point  //true

结论：

可以判别内置对象类型

不能判别原始类型

判别自定义对象类型

结合1和3，用instanceof可以识别所有的对象类型

（3）Object.prototype.toString.call

    Object.prototype.toString.call("123");    //"[object String]"
    
    //封装函数,并做截取
    function type(obj){
        return Object.prototype.toString.call(obj).slice(8,-1);
    }
    //测试
    type("123");  //"String"
    
    //自定义类型
    function Point(x,y){
        this.x = x;
        this.y = y;
    }
    //测试
    type(new Point(1,2));       //"Object"

结论：

上述封装的函数可以识别基本类型以及引用对象类型

不能识别自定义对象类型

（4）constructor（构造这个对象的构造函数的本身）

    //判断基本类型(基本类型也有构造函数)；但是null和undefined除外，它俩没有构造函数
    "jerry".constructor === String;  //true
    (1).constructor ===Number;        //true
    
    //判断引用类型
    new Date().constructor === Date;  //true
    [].constructor === Array;   //true
    
    //判断自定义对象
    function Person(name){
        this.name = name;
    }
    new Person("jerry").constructor === Person; //true
    
    //对constructor判别进行方法的封装
    function getConstructorName(obj){
        return (obj===undefined||obj===null)?obj:        
           (obj.constructor && obj.constructor.toString().match(/functions*([^(]*)/)[1]);
    }

封装的原理：

obj:假如传入的参数是null或者undefined，没有构造函数直接返回

obj.constructor如果存在执行&&后面的语句

obj.constructor.toString()：将类型对应的构造函数转化成字符串 "Function Number(){code...}"

math(/functions*([^(]*)/)[1]：匹配构造函数的名称，正则匹配

结论：

判别基本类型（Undefined/Null除外）

判别引用类型

判别自定义对象类型

结论：所以可以封装一个函数getConstructorName判断所有类型，但是这个函数返回的除了null和undefined是小写之外，其他的首字母都是大写。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79936.html

Js基础知识（一） - 变量

摘要：内置函数和对象中内置了一些函数和对象，很多语言都会有内置的方法，直接可以调用开发。根据语法标准提供的内置函数包括和。注意基础语法提供的内置函数和方法只有这些，像那是浏览器提供给我们的。强制类型转换大家应该都知道。 js基础 - 变量 *大家对js一定不会陌生，入门很简单（普通入门），很多人通过网络资源、书籍、课堂等很多途径学习js，但是有些js基础的只是往往被大家遗漏，本章就从js变量...

leone 2019-08-26 11:33 评论0 收藏0
Js基础知识（一） - 变量

摘要：内置函数和对象中内置了一些函数和对象，很多语言都会有内置的方法，直接可以调用开发。根据语法标准提供的内置函数包括和。注意基础语法提供的内置函数和方法只有这些，像那是浏览器提供给我们的。强制类型转换大家应该都知道。 js基础 - 变量 *大家对js一定不会陌生，入门很简单（普通入门），很多人通过网络资源、书籍、课堂等很多途径学习js，但是有些js基础的只是往往被大家遗漏，本章就从js变量...

MageekChiu 2019-08-01 18:29 评论0 收藏0
前端基础进阶（一）：内存空间详细图解

摘要：一栈数据结构与不同，中并没有严格意义上区分栈内存与堆内存。引用数据类型的值是保存在堆内存中的对象。不允许直接访问堆内存中的位置，因此我们不能直接操作对象的堆内存空间。为了更好的搞懂变量对象与堆内存，我们可以结合以下例子与图解进行理解。 showImg(https://segmentfault.com/img/remote/1460000009784102?w=1240&h=683); ...

_Suqin 2019-08-21 18:30 评论0 收藏0
基础数据结构及js数据存储

摘要：引用数据类型及堆内存引用数据类型是保存在堆内存中的对象，他的大小是不固定的。基础数据类型在变量对象里可以直接对应对应的值，而引用数据类型是存储在堆里的，在变量对象中对应的是堆内存的地址。因为我们修改本质上是修改了堆内存里的数据。因为以前前端开发跟数据存储打交道比较少，javascript又具有自动垃圾回收机制。数据结构以及存储相关的概念，其实是很容易被前端er忽略的。...

Brenner 2019-08-23 18:08 评论0 收藏0
【连载】前端个人文章整理-从基础到入门

摘要：个人前端文章整理从最开始萌生写文章的想法，到着手开始写，再到现在已经一年的时间了，由于工作比较忙，更新缓慢，后面还是会继更新，现将已经写好的文章整理一个目录，方便更多的小伙伴去学习。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 个人前端文章整理从最开始萌生写文章的想法，到着手...

madthumb 2019-08-23 14:15 评论0 收藏0