基礎一：JS數據類型

codecook 發布于2019-08-19 18:44 / 2227人閱讀

摘要：本文章主要總結一下數據類型的識別判斷方法最后封裝一個函數，可以判別所有的類型數據類型基本類型類型該類型只有一個值，即小寫，在使用聲明變量但是未對其加以初始化時，這個變量的值就是。

*本文章主要總結一下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是小寫之外，其他的首字母都是大寫。

GPU云服務器云服務器 js基礎數據類型 js中基礎數據類型 js的基礎數據類型基礎數據類型

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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