JavaScript中的數據類型

来源:https://www.cnblogs.com/tinyTea/archive/2018/02/01/8378333.html
-Advertisement-
Play Games

在ECMAScript中，變數是鬆散類型的。所謂鬆散類型就是指變數可以用來保存任何類型的數據。 但是在實際開發中，我並不推薦大家這樣使用變數。這種操作方法是會讓代碼變得很不安全。為了規避這樣的問題，我在變數命名的時候對變數類型做了標明。 ECMAScript中有5種簡單數據類型：Undefined、 ...


在ECMAScript中，變數是鬆散類型的。所謂鬆散類型就是指變數可以用來保存任何類型的數據。 

// 下麵的操作是完全合法的
var message = "helloWorld";
message = 100;

但是在實際開發中，我並不推薦大家這樣使用變數。這種操作方法是會讓代碼變得很不安全。為了規避這樣的問題，我在變數命名的時候對變數類型做了標明。

var strMessage = "helloWorld"; // String類型

var nMessage = 100; // Number類型
// 如果有必要數字類型我也會進行細分
var iMessage = 1; // int類型
var fMessage = 0.5; // float類型

var objMessage = null; // Object類型

var bMessage = false; // Boolean類型

 

ECMAScript中有5種簡單數據類型：Undefined、Null、Boolean、Number、String，還有1種複雜數據類型Object。

1、Undefined類型

 聲明後未賦值的變數，或者未聲明的變數，typeof的值都是Undefined。區別在於，未聲明的變數在調用時會報錯。

有鑒於此，變數聲明之初初始化會十分有用。這樣我們通過typeof測試變數類型，若變數為Undefined的話，則說明該變數是未賦值，而不是尚未初始化了。

2、Null類型

null值標識的是一個空指針對象，所以他的typeof值為“Object”。所以在初始化Object類型變數的時候，使用null作為初始化的值就可以了。

undefined派生自null。所以 alert(null == undefined); // true 。

3、Boolean類型

Boolean類型的true或者false，並不是單純就指1或者0。可以說不同的數據類型，都可以轉換成true或者false。

數據類型 轉換為true的值 轉換為false的值
Boolean true false
String 任何非空字元串 ""（空字元串）
Number 任何非零數字值（包括無窮大） 0和NaN
Object 任何對象 null
Undefined n/a（意思是“不適用”） undefine

 

 

 

 

 

 

4、Number類型

 Number類型數值字面量格式有三種：十進位（n）、八進位（0 + n）、十六進位（0x + n）。

var iNum = 55; // 十進位
var octalNum = 070; // 八進位
var hexNum = 0xA; // 十六進位

需要註意的是，八進位字面量在嚴格模式下是無效的，謹慎使用。

（1）浮點數

由於保存浮點數的記憶體空間是保存整數的兩倍，所以凡是可以表示為整數的浮點數都會自動轉化為整數。例如 1.、10.0 等。

對於極大或者極小的數值可以表示為浮點數，即科學計數法，例如 3.125e7 == 3.125*107 、 3e-7 == 3*10-7 等。

需要註意的是，浮點數的最高進度是17位小數，在進行計算的時候其精確度遠不如整數。例如雖然 0.15 + 0.15 = 0.3 ，但是 0.1 + 0.2 = 0.30000000000000004 ，由此造成 0.1 + 0.2 == 0.3; // false 。所以不要用浮點數做比較。

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>testDocument</title>
 6     <style>
 7         html,body{width: 100%;height: 100%;}
 8         html,body,p{padding: 0;margin: 0;}
 9         div{box-sizing: border-box;}
10         .container{width: 100%;height:100%;padding-left: calc((100vw - 600px) * .5);background-color: #006699;overflow: auto;}
11         .contentContainer{background-color: #fff;width: 600px;height: 100%;}
12     </style>
13 </head>
14 <body>
15     <div class="container">
16         <div class="contentContainer">
17             <select name="a" id="numA">
18                 <option value="0.05">0.05</option>
19                 <option value="0.15">0.15</option>
20                 <option value="0.1">0.1</option>
21             </select>
22             +
23             <select name="b" id="numB">
24                 <option value="0.25">0.25</option>
25                 <option value="0.15">0.15</option>
26                 <option value="0.2">0.2</option>
27             </select>
28             = 
29             <span id="numC">?</span>
30             <p>a + b == c ? <span id="isEqual"></span></p>
31         </div>
32     </div>
33     <script>
34         document.getElementById("numA").addEventListener("change", plusAB, false);
35         document.getElementById("numB").addEventListener("change", plusAB, false);
36 
37         function plusAB() {
38             var objA = document.getElementById("numA");
39             var fA = parseFloat(objA.options[objA.selectedIndex].value);
40             var objB = document.getElementById("numB");
41             var fB = parseFloat(objB.options[objB.selectedIndex].value);
42 
43             var fC = fA + fB;
44             document.getElementById("numC").innerHTML = fC;
45 
46             document.getElementById("isEqual").innerHTML = (fC == 0.3);
47         }
48     </script>
49 </body>
50 </html>

效果如下：

（2）數值範圍

查詢瀏覽器數值上限使用 Number.MAX_VALUE ，下限使用 Number.MIN_VALUE 。

基本上所有瀏覽器的上限均為 1.7976931348623157e+308 ，下限均為 5e-324 。

超出數值範圍，數值將被自動轉換為特殊的Infinity（無窮）值。要想確定數值是否有窮，即是否位於數值範圍內，可以使用 isFinite() 函數。

var nResult = Number.MAX_VALUE + Number.MAX_VALUE;
alert(isFinite(result)); // false超出數值範圍

（3）NaN（Not a Number）

首先要明確這個數值的應用。它是用於表示一個本來要返回數值的操作數未返回數值的情況。例如，任何數值除以0都會返回NaN。

NaN本身有兩個特點：①任何涉及NaN的操作都會返回NaN；②NaN與任何值都不相等，包括其本身NaN，即 NaN == NaN; // false 。

ECMAScript定義了 isNaN() 函數，用來測定參數是否為NaN。這個函數會將參數自動轉為數值，然後再進行測試。對於對象，該函數會自動調用對象的 valueof() 方法進行測試，如果不能，則繼續調用對象的 toString() ，進行測試。

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>testDocument</title>
 6     <style>
 7         html,body{width: 100%;height: 100%;}
 8         html,body,p{padding: 0;margin: 0;}
 9         div{box-sizing: border-box;}
10         .container{width: 100%;height:100%;padding-left: calc((100vw - 600px) * .5);background-color: #006699;overflow: auto;}
11         .contentContainer{background-color: #fff;width: 600px;height: 100%;}
12     </style>
13 </head>
14 <body>
15     <div class="container">
16         <div class="contentContainer">
17             <p>NaN == NaN?<span id="nan"></span></p>
18             <p>10 == NaN?<span id="num"></span> （10是一個數值）</p>
19             <p>"10" == NaN?<span id="numStr"></span> （可以被轉換成數值10）</p>
20             <p>"blue" == NaN?<span id="str"></span> （不能轉換為數值）</p>
21             <p>true == NaN?<span id="boolean"></span> （可以被轉換成數值1）</p>
22             <p>obj(<span id="objValue">{"num1":1,"num2":2}</span>) == NaN?<span id="obj"></span></p>
23             <button type="button" onclick="changeObjFun();">改變object的toString方法</button>
24         </div>
25     </div>
26     <script>
27         var numList = {
28             "num1":1,
29             "num2":2
30         };
31 
32         document.getElementById("nan").innerHTML = isNaN(NaN);
33         document.getElementById("num").innerHTML = isNaN(10);
34         document.getElementById("numStr").innerHTML = isNaN("10");
35         document.getElementById("str").innerHTML = isNaN("blue");
36         document.getElementById("boolean").innerHTML = isNaN(true);
37         document.getElementById("obj").innerHTML = isNaN(numList);
38 
39         function changeObjFun(){
40             numList.toString = function(){
41                 return "100";
42             }; // 重寫對象的toString方法，使其返回一個數值
43 
44             document.getElementById("objValue").innerHTML = "100";
45             document.getElementById("obj").innerHTML = isNaN(numList); // 由於對象的toString方法返回了一個數值，所以這裡變成了false
46         }
47     </script>
48 </body>
49 </html>

效果圖：

（4）數值轉換

有三個函數可以把非數值轉換為數值： Number() 、 parseInt() 、 parseFloat() 。第一個可以用於任何數據類型，而後兩個專用於字元串的轉換。

使用一元加操作符也可以實現與 Number() 同樣的效果： +value 。

 1 <!-- parseInt()函數轉換規則 -->
 2 <!DOCTYPE html>
 3 <html lang="zh-cn">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>testDocument</title>
 7     <style>
 8         html,body{width: 100%;height: 100%;}
 9         html,body,p{padding: 0;margin: 0;}
10         div{box-sizing: border-box;}
11         .container{width: 100%;height:100%;padding-left: calc((100vw - 600px) * .5);background-color: #006699;overflow: auto;}
12         .contentContainer{background-color: #fff;width: 600px;height: 100%;}
13     </style>
14 </head>
15 <body>
16     <div class="container">
17         <div class="contentContainer">
18             <p>"Hello World!" == <span id="str1"></span></p>
19             <p>"" == <span id="str2"></span></p>
20             <p>"hello123" == <span id="strNum"></span></p>
21             <p>null == <span id="rNull"></span></p>
22             <p>undefined == <span id="rUndefined"></span></p>
23             <p>true == <span id="boolean"></span></p>
24             <p>10 == <span id="num1"></span></p>
25             <p>10.5 == <span id="num4"></span></p>
26             <p>0xf == <span id="num2"></span></p>
27             <p>010 == <span id="num3"></span></p>
28             <p>"000010" == <span id="numStr"></span></p>
29             <p>" 10" == <span id="nullNum"></span></p>
30             <p>" 123blue" == <span id="nullNumStr"></span></p>
31             <p>obj == <span id="obj"></span></p>
32         </div>
33     </div>
34     <script>
35         var numList = {
36             "num1":
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 使用express+multer實現node中的圖片上傳
    使用express+multer實現node中的圖片上傳 在前端中，我們使用ajax來非同步上傳圖片,使用file input來上傳圖片，使用formdata對象來處理圖片數據，post到伺服器中 在node中使用multer中間件來對上傳路由介面進行處理 "multer文檔" package.jso ...
  • background使用
    background-position 有兩個參數，定義背景圖片起始位置可選值有： center top left right bottom px % background-size 可以用 px % 設定其寬高 值 cover 完全覆蓋背景區域 contain 適應背景區域 background- ...
  • 居中方案
    居中方案水平居中行內元素父元素設置text align:center定寬塊元素設置 margin 左右為 auto塊元素文本居中設置text align:center不定寬塊元素設置 display 為 table，margin 左右為 auto利用table標簽的長度自適應性 即不定義其長度也不默 ...
  • javascript中常見錯誤類型
    當我們在做開發時，編寫javascript代碼，不管是ES5還是ES6，我們往往或多或少的會在控制臺中，看見一些錯誤，比如常見的SyntaxError（語法錯誤），TypeError類型錯誤等等，但對於開發經驗不足，或者英語差，看不懂的開發人員而言，那就很苦惱了，不知道是什麼錯，不知道何從下手找bu... ...
  • 一張圖說明DIV盒子距離
    虛線的寬高為你實際指定的width和height 虛線外的白色區域為padding 紅色區域為border的width 紅色外的區域為margin ...
  • JS排序之選擇排序
    遍歷這個數組，先確定索引為0的數字為暫時最小數， 在剩下的數據中，以第一個為標桿，和剩下的數依次進行比較，如果標桿大於某數，則進行索引交換，繼續比較，則a[i]=min; 最後讓a[i]索引為0的數據進行交換，得到a[0]=min; 依次進行。。 ...
  • CSS3的常用屬性（一）
    選擇器 屬性選擇器（通過標簽屬性來選擇） E[attr]： 表示只要元素<E>存在屬性attr就能被選中 如： div[class] E[attr=val]： 表示元素<E>存在屬性attr的值等於val，即可被選中 如： div[class="val"] E[attr*=val]： 表示元素<E> ...
  • 選項卡套選項卡
    <!doctype html><html><head><meta charset="utf-8"><title>無標題文檔</title></head><style>*{margin:0;padding:0;list-style:none;}.box{width:800px;height:400px ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類