javascript重點-數據類型

来源:http://www.cnblogs.com/wusheng2016/archive/2017/02/07/6371537.html
-Advertisement-
Play Games

一、六種數據類型 (弱類型數據) 1.基本數據類型(5種):Undefined、Null、Boolean、Number、String 2.引用數據類型(1種):Object 例如: Function Date Array ... 在js中定義變數的時候無需指定類型。比如定義一個變數 var num ...


一、六種數據類型 (弱類型數據)

1.基本數據類型(5種):Undefined、Null、Boolean、Number、String

2.引用數據類型(1種):Object  例如: Function Date Array ...

在js中定義變數的時候無需指定類型。比如定義一個變數 var num = 16, 而此時我們也可以把一個字元串賦值給這個變數 num = "this is a string",這樣也是合法的。那可能有的朋友覺得js好簡單,定義變數的時候連類型是什麼都不用管,是這樣的嗎?那下麵我們來看一下:

  (1).  16 + 16 的運算結果是什麼呢,這個很簡單是 32

  (2). 我們把第一個 16 用雙引號引起來,理解為字元串。 "16" + 16 的運算結果是什麼呢,還是 32 嗎?肯定不是啦,此時這裡的理解為字元串拼接,答案為 “1616” 這樣一個字元串。

  (3). 我們繼續看同樣是那如果同樣是字元串或者是數字,我們把 + 變成 -,"16" - 16 此時運算結果是什麼呢? 答案是 0。這裡的理解為數字的運算所以答案就是0。

  小結:js在定義一個變數的時候雖然不用指定變數的數據類型,但是在涉及到操作符等等的一些運算的時候,背後往往有很多的隱式轉換邏輯。

 

二、隱式轉換 (+ 和 -,== 和 ===)

1.藉著上面提到的我們舉一個例子:

   "16" + 6   // "166"  (字元串拼接)

   "16" - 6   // 10 (數字運算)

  我們往往可以利用(+/-)規則來進行轉換類型。

  比如:我們想把變數num 轉換成數字類型,一個非常簡單的方法我們就可以 num - 0。又或者我們想把num轉換成 String 類型,我們該怎麼辦呢,對就是加一個空的字元串 num + ""。

2. == 和 ===

  (一)、相等運算符 (==)

    1、如果一個值是null,另一個是undefined,則它們相等。

    2、如果一個值是數字,另一個是字元串,先將字元串轉換為數字,然後使用轉換後的值比較。

    3、如果其中一個值是true,則將其轉換為1再進行比較。如果其中一個值是false,則將基轉換為0再進行比較。

    4、如果一個值是對象,另一個值是數字或字元串,則將對象轉換為原始值,然後再進行比較。對象通過toString()方法或valueOf()方法轉換為原始值。JavaScript核心的內置類首先嘗試使用valueOf(),再嘗試使用toString(),除了日期類,日期類只使用toString()轉換。那些不是JavaScript語言核心中的對象則通過各自的實現中定義的方法轉換為原始值。

    5、其他不同類型之間的比較均不相等.

    例如: null == undefined, //true

        “16” == 16,  //true

          0 == false, //true

        [1,2] == [1,2],  //false

        new Object() == new Object(),  //false

          new Object().toString() == new Object().toString(),   //true

        new String("aaa") == "aaa",  //true

        new String("11") == 11,  //true 

  (二)、嚴格等於(===)

    1、首先判斷他們的類型,如果兩個值類型不相同,則它們不相等,直接返回 false。   

      // “16” === 16,  //false

    2、如果兩個值都是null或者都是undefined,則它們才相等。

       //   null === null, //true,   undefined=== undefined, //true    undefined === null  //false

    3、如果兩個值都是布爾值true或false,則它們相等。

    4、如果其中一個值是NaN,或者兩個兩個值都是NaN,則它們不相等。NaN和其他任何值都是不相等的,包括它本身!!!通過x!==x來判斷x是否為NaN,只有在x為NaN的時候,這個表達式的值才為true。

    5、如果兩個值為數字,且數值相等,則它們相等。如果一個為0,另一個為-0,則它們同樣相等。

    6、如果兩個值為字元串,且所含的對應位上的16位數完全相等,則它們相等。如果它們的長度或內容不同,則它們不等。兩個字元串可能含義完全一樣且所顯示出手字元也一樣,但具有不同編碼的16位值。JavaScript並不對Unicode進行標準化的轉換,因此像這樣的字元串通過"==="和"=="運算符的比較結果也不相等。

    7、如果兩個引用值同一個對象、數組或函數,則它們是相等的。如果指向不同的對象,則它們是不等的。儘管兩個對象具有完全一樣的屬性。

 

三、包裝對象

      定義:在JavaScript中,“一切皆對象”,數組和函數本質上都是對象,就連三種原始類型的值——數值、字元串、布爾值——在一定條件下,也會自動轉為對象,也就是原始類型的“包裝對象”。

通俗來講:字元串,數值,字元串,這些單身狗看其它人都有對象,非常不爽,所以自己也搞了個對象,名字叫包裝。

1.一般來說,只有對象是可以對屬性進行讀寫操作的。但是聰明的騷年,你有沒有發現,平時我們用得很多的字元串方法和屬性,都是直接通過”.”操作符訪問的。比如:

  console.log("hello world".length);
  console.log("this a string".indexOf("a"));

2.其實,在我們調用這些方法和屬性時,JS內部已經隱式地幫我們幫創建了一個包裝對象了,以上的實際的情形應該是這樣的:

  console.log(new String("hello world").length);
  console.log(new String("this a string").indexOf("a"));

3.但是兩者還是有區別的,
  區別1:
  瀏覽器自己隱式創建的包裝對象和你顯式創建的包裝對象不嚴格相等。簡單來說,雖然說錶面JS對親生的與領養的一樣,但實際上,親生的不等於領養的。

    var a1 = "test",
        a2=new String("test");
    console.log(a1 == a2);//true
    console.log(a1 === a2);//false

  區別2:
  隱式創建的包裝對象,在使用完後之後就會被拋棄了。簡單來說就是,一個大大的負心漢,上完我,就拋棄,還重新去找其他對象。
  拿我們開頭的那道題來說:
    test.a = "hello";
  這裡隱式創建了一個包裝對象,所以這裡賦值不會報錯。
    console.log(test.a);
  這裡之前的包裝對象已經被拋棄了,但是使用了"."運算符,所以又創建一個新的包裝對象,但是這個對象的屬性a並沒有賦值,所以屬性a的值是undefined。

  說到實際運用中,有的瀏覽器性能不是很好,比如說低版本IE,當頻繁處理字元串時,效率會很低。所以很多時候,我們還不如直接顯式地創建包裝對象,防止瀏覽器過多地創建隱式的包  裝對象,提升性能。

    //不推薦使用種方法
    var example = "this is a example";  
    //推薦使用這種方法,提升性能。
    var example2 = new String("this is a example");

四、類型檢測

  在js中檢測類型的方法有很多,比如 typeof、instanceof、Object.prototype.toString、constructor、duck type

  1. typeof 運算符,有兩種方式 typeof + 檢測目標 或者 typeof (檢測目標),該方法適用於基本數據類型和函數的檢測(遇到null失效),返回的結果都是字元串

    typeof 100    “number”

    typeof true   “boolean”

    typeof("hello")  "String"

    typeof Function   “Function”

    typeof undefined  “undefined”

    typeof null  “Object”  歷史遺留的問題,為了相容

    typeof NaN  “number”   判斷NaN的方法可以用isNaN(NaN)來判斷,如果返回true就是NaN

    typeof new Object()   “Object”

    typeof [1,2]   "Object"

    大家可能註意到了,typeof在檢測對象類型的時候是無法區分的,此時我們就要用第二種方法instanceof

  2.instanceof運算符(適用於自定義對象或者原生對象數據類型的檢測),基於原型鏈的類型檢測

    比如判斷一個對象是不是數組: [1,2] instanceof Array 返回 true

    obj instanceof Object   :它期望左操作數obj 是一個對象,如果是一個數字1,2,3或者true,false時就會直接返回false。

                 它期望右操作數是一個函數對象或者是函數構造器,如果不是就會拋出Typeerror異常

    instanceof 工作的一個大概的原理就是它會判斷左操作數這樣一個對象的原型鏈上是否有右邊這個構造函數的prototype屬性

    我們舉一個例子:

      function Person(){}

      function Student(){}

      Student.prototype = new Person();

      Student.protype.constructor = Student

      var a = new Person();

      var b = new Student();

      -----------------------------------------

      a instanceof Person   // true

      b instanceof Student   //true

      a instanceof Student   //false

      b instanceof Person    //true

    註意:不同window之間和跨iframe之間是不可以使用instanceof的,雖然看著是同一個對象但是在不同window之間和跨iframe之間是不同的對象,每個iframe下都有自己的一套原型鏈,跨frame實例化的對象彼此是不共用原型鏈,因此會返回false

  3.Object.prototype.toString 函數方法

    Object.prototype.toString.call()或者Object.prototype.toString.apply()

    例如:

    Object.prototype.toString.call([])     //"[object Array]"

    Object.prototype.toString.call(function(){})  //"[object Function]"

    Object.prototype.toString.call(undefined)  //"[object Undefined]"

    Object.prototype.toString.call(null)      //"[object Null]"

 

    註意:1.解決了跨iframe 失效的問題

       2.IE 6,7,8下  Object.prototype.toString.call(null或undefined)      //"[object Object]"

  4.constructor方法

    function A(){}; 

    function B(){};  

    A.prototype = new B(); 

    var aObj = new A(); 

    --------------------------------

    aObj.constructor === B; //true;  

    aObj.constructor === A; //false;

        註意:類繼承時會出現問題

  5.duck type(鴨子類型)

    比如檢測數組時,我們可以檢測他有沒有push()方法等等


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 職責鏈模式 使多個對象都有機會處理請求,從而避免請求的發送者和接收者之間的耦合關係,將這些對象連成一條鏈,並沿著這條鏈傳遞該請求,直到有一個對象處理它為止。 書里的訂單的例子 假設我們負責一個售賣手機的電商網站,經過分別交納500元定金和200元定金的兩輪預定(訂單已在此時生成),現在已經到了正式購 ...
  • 一、js表達式 定義:表達式是指能計算出值得任何可用程式單元。 ——wiki 表達式是js一種短語,可使js解釋器用來產生一個值。 ——js《權威指南》 1.原始表達式。 常量/直接量: 3.14/ "test" 等 關鍵字: null,this,true,false 等 變數: i,k,j 等 復 ...
  • 中間件express.static 我們使用express初始化一個目錄的時候,會在app.js中看到一大推的app.use。 其中一個主要的中間件是 express.static (4.0版本依舊保留的中間件) 通過 express.static 可以幫助我們 托管 靜態文件,js,css,img ...
  • 由OpenDigg 出品的前端開源項目周報第七期來啦。我們的前端開源周報集合了OpenDigg一周來新收錄的優質的前端開源項目,方便前端開發人員便捷的找到自己需要的項目工具等。lottie-react-native 實時渲染After Effects動畫 react-navigation 學習一次隨 ...
  • 寫在前面的話 過去一年自己接觸了不少手機前端開發,得益於現在手機性能的提升和4G普及,感覺使用混合技術開發手機App已經可以滿足越來越多的應用場景了。新年伊始,對自己2016年所學知識做一個階段性總結,記錄一個自製的“小而萌”Hybrid App開發歷程,共勉! 〖擴展閱讀〗 企業移動應用開發 混合 ...
  • 每個Nodejs項目的根目錄下麵,一般都會有一個package.json文件。該文件可以由 生成,定義了項目所需要的各種模塊,以及項目的配置信息(比如名稱、版本、許可證等元數據)。 package.json文件內部就是一個JSON對象,該對象的每一個成員就是當前項目的一項設置。 基本欄位 1. na ...
  • 一、relative對absolute的限製作用 1、限制left/top/right/bottom定位。absolute預設是在也沒的左上角,當父類設定為relative,absolute就被限制在父類的區域內,設定top/left/right/bottom時,起始點為父類的左上角 2、限制z-i ...
  • v-if v-if指令可以完全根據表達式的值在DOM中生成或移除一個元素。如果v-if表達式賦值為false,那麼對應的元素就會從DOM中移除;否則,對應元素的一個克隆將被重新插入DOM中,代碼如下: 由於v-if是一個指令,需要將它添加到一個元素上。但是如果想要切換多個元素,則可以把<templa ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...