JavaScript的數據類型問題總結

来源:https://www.cnblogs.com/fermin/archive/2018/05/21/9063007.html
-Advertisement-
Play Games

一 JS中有哪些數據類型？ -- 共 6 種數據類型，其中 5 種基本數據類型Undefined，Null，Boolean，Number和 String，1 種複雜數據類型Object。因為ECMAScript不支持創建任何自定義的類型，所以最終所有的類型都是其中 6 種數據類型之一。（ES6中新增 ...


一    JS中有哪些數據類型？

-- 共 6 種數據類型，其中 5 種基本數據類型Undefined，Null，Boolean，Number和 String，1 種複雜數據類型Object。因為ECMAScript不支持創建任何自定義的類型，所以最終所有的類型都是其中 6 種數據類型之一。（ES6中新增了第七種數據類型Symbol）

1-1　原始類型/值類型（傳遞值）：Number，String，Boolean  +  合成類型/引用類型（傳遞指針）：Object  +  特殊類型：Undefined，Null

1-2　object：狹義對象-object  +  數組-array  +  函數-function

二　JS如何識別值的類型？

-- 3種方法：typeof，instanceof，Object.prototype.toString

2-1　typeof（檢測基本數據類型）返回number，string，boolean，function，undefined  +  其餘的都是object（array，null，object，window，等等）

2-1eg：

<body>
  <p id = "demo"></p> 
  <script>
    document.getElementById("demo").innerHTML = 
    typeof 1 + "<br>" +               //number
    typeof NaN + "<br>" +            //number
    typeof "hello" + "<br>" +       //string
    typeof false + "<br>" +        //boolean
    typeof function () {} + "<br>" +  //function
    typeof myCar + "<br>" +     //undefined
    typeof [1,2,3] + "<br>" +    //object
    typeof {name:'fermin', age:22} + "<br>" +  //object
    typeof new Date() + "<br>" +  //object
    typeof null;                 //object
  </script>
</body>

2-1-1　用typeof獲取變數是否存在， if(typeof a!="undefined"){}

2-2　incetanceof（檢測引用數據類型，非引用數據返回false）對應的引用類型數據返回true

2-2eg：

<body>
  <p id = "demo"></p>
  <script>
    var reg = new RegExp;
    document.getElementById("demo").innerHTML = 
    ({} instanceof Array) + "<br>" +    //false
    ([] instanceof Array) + "<br>" +   //true
    (reg instanceof RegExp) + "<br>" + //true
    ("hello" instanceof String);       //false 非引用數據都返回false
  </script>
</body>

2-3　Object.prototype.toString精確判斷對象的類型

2-3eg：

<body>
  <p id = "demo"></p> 
  <script>
    document.getElementById("demo").innerHTML =
    Object.prototype.toString.call(123) + "<br>" +      //[object  Number]
    Object.prototype.toString.call('123') + "<br>" +   //[object String]
    Object.prototype.toString.call(true) + "<br>" +   //[object Boolean]
    Object.prototype.toString.call(undefined) + "<br>" + //[object Undefined]
    Object.prototype.toString.call({}) + "<br>" +     //[object Object]
    Object.prototype.toString.call([]) + "<br>" +    //[object Array]
    Object.prototype.toString.call(function () {});  //[object Function]
  </script>
</body>

三　JS的類型轉換

-- JavaScript 變數可以轉換為新變數或其他數據類型，有兩種類型轉換方式，強制（顯示）類型轉換（String(), toString(), Number(), parseInt(string,radix), parseFloat(string), Boolean() ）和自動（隱式）類型轉換（isNaN()，一元操作符，算術運算符，邏輯運算符，比較運算符，if語句）

3-1　JS的強制類型轉換

3-1-1　強制轉換為數值類型：Number()，parseInt(string,radix)，parseFloat(string)

 

轉換規則　

（1）Number()轉換規則，整體轉換字元串類型

（a）數值：轉換為十進位數
（b）字元串：空字元串 -> 0     只包含數字/有效浮點格式 -> 十進位/浮點格式，忽略前導0，其餘轉成NaN    
（c）布爾值：true-> 1     false-> 0
（d）undefined：轉成NaN
（e）對象：會調用自身valueOf()，返回原始類型值後用上述方法，否則再調用toString。若返回了原始類型再用上述轉換規則，否則系統報錯
（f）null： 轉成0

（1）eg

<body>
  <p id = "demo"></p> 
  <script>
    document.getElementById("demo").innerHTML =
    Number(011) + "<br>" +      // 9 識別了前導0轉換成八進位
    Number('011') + "<br>" +    // 11 
    Number('0') + "<br>" +    // 0
    Number('1a') + "<br>" +   // NaN
    Number('') + "<br>" +     //  0
    Number(true) + "<br>" +   // 1
    Number(undefined) + "<br>" + // NaN
    Number({}) + "<br>" +       //NaN
    Number(null) + "<br>" +    // 0
    Number([]) + "<br>" +     // 0
    Number(function () {});  // NaN
  </script>
</body>

 

（2）Number()與parseInt(string,radix)，parseFloat(string)的轉換規則異同

　　  Number整體轉換字元串類型，parseInt和parseFloat逐個解析字元，只把數字轉換出來，其餘都轉換為NaN

（2）eg：

<body>
  <p id = "demo"></p> 
  <script>
    document.getElementById("demo").innerHTML =
    parseInt(011) + "<br>" +       // 9
    parseInt('01') + "<br>" +     // 01
    parseInt('1a') + "<br>" +   // 1
    parseInt('1a2b') + "<br>" +   // 1
    parseInt('') + "<br>" +     //  NaN 與Number不同
    parseInt(true) + "<br>" +   // NaN 與Number不同
    parseInt(undefined) + "<br>" + // NaN
    parseInt({}) + "<br>" +       //NaN
    parseInt(null) + "<br>" +    // NaN
    parseInt([]) + "<br>" +     // NaN
    parseInt(function () {});  // NaN
  </script>
</body>

3-1-2　強制轉換為字元串類型：String（）

轉換規則　

（1）String()轉換規則，任意類型轉化成字元串

（a）布爾，undefined，null都是兩邊加""轉化為字元串，數值會轉換成十進位數再加""轉換為字元串，而字元串本身不變
（b）對象調用toString()，若返回原始類型值，再使用String()轉換，否則再調用valueOf(),若返回原始類型，再使用String()轉換，在否報錯

（1）eg：

<body>
  <p id = "demo"></p> 
  <script>
    document.getElementById("demo").innerHTML =
    String(011) + "<br>" +       // "9"
    String('011') + "<br>" +       // "011"
    String(true) + "<br>" +   // "true"
    String(undefined) + "<br>" + // "undefined"
    String({}) + "<br>" +       //"[object Object]"
    String(null) + "<br>" +    // "null"
    String([]) + "<br>" +     // ""
    String(function () {});  // "function () {}"
  </script>
</body>

3-1-2　強制轉換為字元串類型：Boolean（）

轉換規則　

（1）Boolean()轉換規則，任意類型轉化成布爾值

undefined，null，-0，+0，NaN，""(空字元串)這六個值轉換為false，其它的都轉換為ture，註意對象(new Boolean(false))轉換後對應的也是true

（1）eg：

<body>
  <p id = "demo"></p> 
  <script>
    document.getElementById("demo").innerHTML =
    Boolean(011) + "<br>" +          // true
    Boolean('011') + "<br>" +       // true
    Boolean(false) + "<br>" +      // false
    Boolean(new Boolean(false)) + "<br>" +   // true
    Boolean(undefined) + "<br>" + // false
    Boolean({}) + "<br>" +       //true
    Boolean(null) + "<br>" +    // false
    Boolean([]) + "<br>" +     // true
    Boolean(function () {});  // true
  </script>
</body>

3-2　JS的自動類型轉換

3-2-1　js何時自動轉換

（a）不同類型數據互相運算，多個非數值相加時，將非字元串自動強制轉換為字元串，再相加成字元串，其餘自動強制轉換為十進位數值再運算
（b）非布爾值類型數據求布爾值，如if中的條件，自動強制轉換為布爾類型
（c）非數值類型數據用一元運算符（"+"和"-"），自動強制轉換為十進位類型
（d）使用相等或不相等操作符時，會自動強制轉換操作數，再比較他們的相等性。將非整數類型自動強制轉換為整數類型，但是undefined和null不改變，
     且undefined==null返回true，NaN==NaN返回false

 

3-2-2　自動轉換為數值Number類型

eg：

<body>
  <p id = "demo"></p> 
  <script>
    document.getElementById("demo").innerHTML =
    ("2" - "1") + "<br>" +   // 1
    ("2" + "1")+ "<br>" +    // 21
    (true + 1) + "<br>" +    // 2
    ("1" * []) + "<br>" +    // 0
    ("a" - 1 ) + "<br>" +     // NaN
    (+"a") + "<br>" +      // NaN
    (+false) + "<br>";     // 0
  </script>
</body>

 3-2-3　自動轉換為字元串String類型

eg：

<body>
  <p id = "demo"></p> 
  <script>
    document.getElementById("
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 【百度地圖API】如何給自定義覆蓋物添加事件
    摘要： 給marker、lable、circle等Overlay添加事件很簡單，直接addEventListener即可。那麼，自定義覆蓋物的事件應該如何添加呢？我們一起來看一看~ 一、定義構造函數並繼承Overlay 二、初始化自定義覆蓋物 三、繪製覆蓋物 四、添加覆蓋物 五、給自定義覆蓋物添加事 ...
  • Vue.js 相關知識（動畫）
    1. 簡介 Vue 在插入、更新或移除 DOM 時，提供多種不同方式的過渡效果，並提供 transition 組件來實現動畫效果（用 transition 組件將需執行過渡效果的元素包裹） 語法：<transition name=””>元素或組件（進入或離開時會有動畫效果）</transition> ...
  • JavaScript 變數和函數提升問題總結
    一　什麼是JavaScript 變數提升？ -- JS程式運行時， （a）變數的聲明會被解釋器"提升"到方法體內的頂部，初始化賦值操作不提升按順序執行 （b）函數體內未聲明的變數，解釋器會在函數體外聲明變數，成為全局變數 （c）聲明過的函數，整個函數體會被解釋器提升到方法體的頂部，初始化賦值操作按順 ...
  • EJS-初識
    項目中使用了EJS，因此，也開始接觸了EJS。 EJS官方定義：it's just plain JavaScript。 總的來說，上手較快（畢竟我是個菜鳥）。 第一步：安裝： 第二部使用： 在html中，嵌套ejs標簽。 使用較多的是：<%，這個的作用是控制流。代碼實例： 其實很簡單，就是正常的ht ...
  • vue.js小總結
    Vue.js 的核心是一個允許採用簡潔的模板語法來聲明式地將數據渲染進 DOM 的系統; 指令帶有首碼 v-，以表示它們是 Vue 提供的特殊特性; v-for 指令可以綁定數組的數據來渲染一個項目列表; 為了讓用戶和你的應用進行交互，我們可以用 v-on 指令添加一個事件監聽器，通過它調用在 Vu ...
  • 2、第一個應用
    內容：Node.js應用組成，第一個應用創建+代碼 ###########################################################################Node.js 應用組成• 引入 required 模塊：我們可以使用 require 指令來載入 ...
  • 淺談JS的__proto__和prototype，引伸call
    __proto__、prototype傻傻分不清楚？ 記住以下兩點:1.__proto__是每個對象都有的一個屬性，而prototype是函數才會有的屬性。2.__proto__指向的是當前對象的原型對象，而prototype指向的，是以當前函數作為構造函數構造出來的對象的原型對象 (寫在最前面，轉 ...
  • 深入css佈局(2) — 定位與浮動
    深入css佈局(2) — 定位與浮動 在css知識體系中，除了css選擇器，樣式屬性等基礎知識外，css佈局相關的知識才是css比較核心和重要的點。今天我們來深入學習一下css佈局相關的知識。 上篇文章我們講完了css佈局中盒模型和元素分類的相關知識，同時介紹了box-sizing和行框。這篇我們繼 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 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 ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類