JavaScript中的數據類型

時間 2019-11-13

原文原文鏈接

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

// 下面的操做是徹底合法的
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。程序員

一、Undefined類型瀏覽器

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

有鑑於此，變量聲明之初初始化會十分有用。這樣咱們經過typeof測試變量類型，若變量爲Undefined的話，則說明該變量是未賦值，而不是還沒有初始化了。函數

二、Null類型學習

null值標識的是一個空指針對象，因此他的typeof值爲「Object」。因此在初始化Object類型變量的時候，使用null做爲初始化的值就能夠了。測試

undefined派生自null。因此 alert(null == undefined); // true 。spa

三、Boolean類型指針

Boolean類型的true或者false，並非單純就指1或者0。能夠說不一樣的數據類型，均可以轉換成true或者false。

四、Number類型

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

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

須要注意的是，八進制字面量在嚴格模式下是無效的，謹慎使用。

（1）浮點數

因爲保存浮點數的內存空間是保存整數的兩倍，因此凡是能夠表示爲整數的浮點數都會自動轉化爲整數。例如 1.、10.0 等。

對於極大或者極小的數值能夠表示爲浮點數，即科學計數法，例如 3.125e7 == 3.125107 、 3e-7 == 310-7 等。

須要注意的是，浮點數的最高進度是17位小數，在進行計算的時候其精確度遠不如整數。例如雖然 0.15 + 0.15 = 0.3 ，可是 0.1 + 0.2 = 0.30000000000000004 ，由此形成 0.1 + 0.2 == 0.3; // false 。因此不要用浮點數作比較。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>testDocument</title>
    <style>
        html,body{width: 100%;height: 100%;}
        html,body,p{padding: 0;margin: 0;}
        div{box-sizing: border-box;}
        .container{width: 100%;height:100%;padding-left: calc((100vw - 600px) * .5);background-color: #006699;overflow: auto;}
        .contentContainer{background-color: #fff;width: 600px;height: 100%;}
    </style>
</head>
<body>
    <div class="container">
        <div class="contentContainer">
            <select name="a" id="numA">
                <option value="0.05">0.05</option>
                <option value="0.15">0.15</option>
                <option value="0.1">0.1</option>
            </select>
            +
            <select name="b" id="numB">
                <option value="0.25">0.25</option>
                <option value="0.15">0.15</option>
                <option value="0.2">0.2</option>
            </select>
            = 
            <span id="numC">?</span>
            <p>a + b == c ? <span id="isEqual"></span></p>
        </div>//前端全棧學習交流圈:866109386
    </div>//面向1-3年經驗前端人員
    <script>//幫助突破技術瓶頸，提高思惟能力
        document.getElementById("numA").addEventListener("change", plusAB, false);
        document.getElementById("numB").addEventListener("change", plusAB, false);

        function plusAB() {
            var objA = document.getElementById("numA");
            var fA = parseFloat(objA.options[objA.selectedIndex].value);
            var objB = document.getElementById("numB");
            var fB = parseFloat(objB.options[objB.selectedIndex].value);

            var fC = fA + fB;
            document.getElementById("numC").innerHTML = fC;

            document.getElementById("isEqual").innerHTML = (fC == 0.3);
        }
    </script>
</body>
</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超出數值範圍</pre>

（3）NaN（Not a Number）

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

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

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

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>testDocument</title>
    <style>
        html,body{width: 100%;height: 100%;}
        html,body,p{padding: 0;margin: 0;}
        div{box-sizing: border-box;}
        .container{width: 100%;height:100%;padding-left: calc((100vw - 600px) * .5);background-color: #006699;overflow: auto;}
        .contentContainer{background-color: #fff;width: 600px;height: 100%;}
    </style>
</head>
<body>
    <div class="container">
        <div class="contentContainer">
            <p>NaN == NaN?<span id="nan"></span></p>
            <p>10 == NaN?<span id="num"></span> （10是一個數值）</p>
            <p>"10" == NaN?<span id="numStr"></span> （能夠被轉換成數值10）</p>
            <p>"blue" == NaN?<span id="str"></span> （不能轉換爲數值）</p>
            <p>true == NaN?<span id="boolean"></span> （能夠被轉換成數值1）</p>
            <p>obj(<span id="objValue">{"num1":1,"num2":2}</span>) == NaN?<span id="obj"></span></p>
            <button type="button" onclick="changeObjFun();">改變object的toString方法</button>
        </div>
    </div>
    <script>
        var numList = {
            "num1":1,
            "num2":2
        };

        document.getElementById("nan").innerHTML = isNaN(NaN);
        document.getElementById("num").innerHTML = isNaN(10);
        document.getElementById("numStr").innerHTML = isNaN("10");
        document.getElementById("str").innerHTML = isNaN("blue");
        document.getElementById("boolean").innerHTML = isNaN(true);
        document.getElementById("obj").innerHTML = isNaN(numList);

        function changeObjFun(){
            numList.toString = function(){
                return "100";
            }; // 重寫對象的toString方法，使其返回一個數值

            document.getElementById("objValue").innerHTML = "100";
            document.getElementById("obj").innerHTML = isNaN(numList); // 因爲對象的toString方法返回了一個數值，因此這裏變成了false
        }
    </script>
</body>
</html>

效果圖：

（4）數值轉換

有三個函數能夠把非數值轉換爲數值： Number() 、 parseInt() 、 parseFloat() 。第一個能夠用於任何數據類型，然後兩個專用於字符串的轉換。

使用一元加操做符也能夠實現與 Number() 一樣的效果： +value 。

<!-- parseInt()函數轉換規則 -->
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>testDocument</title>
    <style>
        html,body{width: 100%;height: 100%;}
        html,body,p{padding: 0;margin: 0;}
        div{box-sizing: border-box;}
        .container{width: 100%;height:100%;padding-left: calc((100vw - 600px) * .5);background-color: #006699;overflow: auto;}
        .contentContainer{background-color: #fff;width: 600px;height: 100%;}
    </style>
</head>
<body>
    <div class="container">
        <div class="contentContainer">
            <p>"Hello World!" == <span id="str1"></span></p>
            <p>"" == <span id="str2"></span></p>
            <p>"hello123" == <span id="strNum"></span></p>
            <p>null == <span id="rNull"></span></p>
            <p>undefined == <span id="rUndefined"></span></p>
            <p>true == <span id="boolean"></span></p>
            <p>10 == <span id="num1"></span></p>
            <p>10.5 == <span id="num4"></span></p>
            <p>0xf == <span id="num2"></span></p>
            <p>010 == <span id="num3"></span></p>
            <p>"000010" == <span id="numStr"></span></p>
            <p>" 10" == <span id="nullNum"></span></p>
            <p>" 123blue" == <span id="nullNumStr"></span></p>
            <p>obj == <span id="obj"></span></p>
        </div>//前端全棧學習交流圈：866109386
    </div>//面向1-3年前端就發人員
    <script>//幫助突破技術瓶頸，提高思惟能力
        var numList = {
            "num1":1,
            "num2":2
        };
        numList.toString = function(){
                return "100";
            };

        document.getElementById("str1").innerHTML = parseInt("Hello World!"); // 非空字符串返回NaN
        document.getElementById("str2").innerHTML = parseInt(""); // 空字符串返回NaN
        document.getElementById("strNum").innerHTML = parseInt("hello123"); // 第一個非空字符非數字返回NaN
        document.getElementById("rNull").innerHTML = parseInt(null); // null返回NaN
        document.getElementById("rUndefined").innerHTML = parseInt(undefined); // undefined返回NaN
        document.getElementById("boolean").innerHTML = parseInt(true); // 布爾值返回NaN
        // 因而可知parseInt()只處理第一個非空字符爲數字的值
        document.getElementById("num1").innerHTML = parseInt(10); // 數值返回該數值
        document.getElementById("num4").innerHTML = parseInt(10.5); // 浮點數返回去掉小數的整數
        document.getElementById("num2").innerHTML = parseInt(0xf); // 十六進制返回十進制
        document.getElementById("num3").innerHTML = parseInt(010); // 八進制返回十進制，嚴格模式下八進制無效，會解析爲10
        document.getElementById("numStr").innerHTML = parseInt("000010"); // 去掉多餘的0返回數值
        document.getElementById("nullNum").innerHTML = parseInt(" 10"); // 去掉前面的空格返回數值
        document.getElementById("nullNumStr").innerHTML = parseInt(" 123blue"); // 第一個非空字符爲數字返回數值
        document.getElementById("obj").innerHTML = parseInt(numList); // 調用對象的valueOf()或者toString()方法
    </script>
</body>
</html>

顯示效果：

<!-- parseFloat()函數轉換規則 -->
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>testDocument</title>
    <style>
        html,body{width: 100%;height: 100%;}
        html,body,p{padding: 0;margin: 0;}
        div{box-sizing: border-box;}
        .container{width: 100%;height:100%;padding-left: calc((100vw - 600px) * .5);background-color: #006699;overflow: auto;}
        .contentContainer{background-color: #fff;width: 600px;height: 100%;}
    </style>
</head>
<body>
    <div class="container">
        <div class="contentContainer">
            <p>"Hello World!" == <span id="str1"></span></p>
            <p>"" == <span id="str2"></span></p>
            <p>"hello123" == <span id="strNum"></span></p>
            <p>null == <span id="rNull"></span></p>
            <p>undefined == <span id="rUndefined"></span></p>
            <p>true == <span id="boolean"></span></p>
            <p>10 == <span id="num1"></span></p>
            <p>10.5 == <span id="num4"></span></p>
            <p>0xf == <span id="num2"></span></p>
            <p>010 == <span id="num3"></span></p>
            <p>"000010" == <span id="numStr1"></span></p>
            <p>"10.5.23" == <span id="numStr2"></span></p>
            <p>" 10" == <span id="nullNum"></span></p>
            <p>" 123.23blue" == <span id="nullNumStr"></span></p>
            <p>obj == <span id="obj"></span></p>
        </div>//前端全棧學習交流圈：866109386
    </div>//面向1-3年經驗前端人員
    <script>//幫助突破技術瓶頸，提高思惟能力。
        var numList = {
            "num1":1,
            "num2":2
        };
        numList.toString = function(){
                return "100";
            };

        document.getElementById("str1").innerHTML = parseFloat("Hello World!"); // 非空字符串返回NaN
        document.getElementById("str2").innerHTML = parseFloat(""); // 空字符串返回NaN
        document.getElementById("strNum").innerHTML = parseFloat("hello123"); // 第一個非空字符非數字返回NaN
        document.getElementById("rNull").innerHTML = parseFloat(null); // null返回NaN
        document.getElementById("rUndefined").innerHTML = parseFloat(undefined); // undefined返回NaN
        document.getElementById("boolean").innerHTML = parseFloat(true); // 布爾值返回NaN
        // 因而可知parseFloat()只處理第一個非空字符爲數字的值
        document.getElementById("num1").innerHTML = parseFloat(10); // 數值返回該數值
        document.getElementById("num4").innerHTML = parseFloat(10.5); // 浮點數返回去掉小數的整數
        document.getElementById("num2").innerHTML = parseFloat(0xf); // 十六進制返回十進制
        document.getElementById("num3").innerHTML = parseFloat(010); // 八進制返回十進制，嚴格模式下八進制無效，會解析爲10
        document.getElementById("numStr1").innerHTML = parseFloat("000010"); // 去掉多餘的0返回數值
        document.getElementById("numStr2").innerHTML = parseFloat("10.5.23"); // 多餘的小數點後面的值都會去掉
        document.getElementById("nullNum").innerHTML = parseFloat(" 10"); // 去掉前面的空格返回數值
        document.getElementById("nullNumStr").innerHTML = parseFloat(" 123.23blue"); // 第一個非空字符爲數字返回數值
        document.getElementById("obj").innerHTML = parseFloat(numList); // 調用對象的valueOf()或者toString()方法
    </script>
</body>
</html>

顯示效果：

注： parseInt() 和 parseFloat() 都是由兩個參數的，第一個參數是須要轉換的值，第二個參數是轉換使用的基數（即多少進制），爲了防止轉換出現問題，使用多進制轉換的時候能夠制定基數，避免沒必要要的錯誤。

** 五、String類型**

在ECMAScript中字符串用雙引號（"）或者單引號（'）都是能夠的，可是爲了作一個全方面發展的好程序員，仍是區分對待比較好。就目前我學過的語言來講，雙引號（「）多用於合法的字符串符號。

（1）字符字面量

這個就是String類型所說的轉義字符的，對照表網上一搜一大堆，我就不特別列舉了。須要注意的是一個轉義字符就表示1個字符。

（2）字符串的特色

字符串是不可變的，也就是說一旦建立不可改變。這就使得修改字符串成爲了一個先破後立的過程。

（3）轉換爲字符串

數值轉換字符串都會轉換成十進制，而後輸出字符串。

轉換字符串除了如下兩個傳統方法之外，使用 value + "" 也能達到轉換字符串的效果。

　① toString() 方法

null和undefined沒有 toString() 方法，若是使用會報錯。

<!-- toString()函數轉換規則 -->
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>testDocument</title>
    <style>
        html,body{width: 100%;height: 100%;}
        html,body,p{padding: 0;margin: 0;}
        div{box-sizing: border-box;}
        .container{width: 100%;height:100%;padding-left: calc((100vw - 600px) * .5);background-color: #006699;overflow: auto;}
        .contentContainer{background-color: #fff;width: 600px;height: 100%;}
    </style>
</head>
<body>
    <div class="container">
        <div class="contentContainer">
            <p>null == <span id="rNull"></span></p>
            <p>undefined == <span id="rUndefined"></span></p>
            <p>true == <span id="boolean"></span></p>
            <p>255 == <span id="num1"></span></p>
            <p>255 == <span id="num1_2"></span> （二進制）</p>
            <p>255 == <span id="num1_8"></span> （八進制）</p>
            <p>255 == <span id="num1_16"></span> （十六進制）</p>
            <p>10.5 == <span id="num4"></span></p>
            <p>0xf == <span id="num2"></span></p>
            <p>010 == <span id="num3"></span></p>
            <p>obj == <span id="obj"></span></p>
        </div>
    </div>
    <script>
        var n1 = 255;
        var n2 = 0xf;
        var n3 = 010;
        var n4 = 10.5;
        var rNull = null;
        var rUndefined = undefined;
        var rBoolean = true;
        var numList = {
            "num1":1,
            "num2":2
        };

        // document.getElementById("rNull").innerHTML = rNull.toString(); // null轉字符串，沒有toString()方法，因此不能用toString轉換
        // document.getElementById("rUndefined").innerHTML = rUndefined.toString(); // undefined轉字符串，沒有toString()方法，因此不能用toString轉換
        document.getElementById("boolean").innerHTML = rBoolean.toString(); // Boolean轉字符串
        document.getElementById("num1").innerHTML = n1.toString(); // 整數轉字符串
        // toString()方法的參數是輸出基數，即進制
        document.getElementById("num1_2").innerHTML = n1.toString(2); // 整數轉字符串，二進制
        document.getElementById("num1_8").innerHTML = n1.toString(8); // 整數轉字符串，八進制
        document.getElementById("num1_16").innerHTML = n1.toString(16); // 整數轉字符串，十六進制
        document.getElementById("num4").innerHTML = n4.toString(); // 浮點數轉字符串
        document.getElementById("num2").innerHTML = n2.toString(); // 十六進制整數轉字符串，會先轉換成十進制
        document.getElementById("num3").innerHTML = n3.toString(); // 八進制整數轉字符串，會先轉換成十進制
        document.getElementById("obj").innerHTML = numList.toString(); // 對象轉字符串
    </script>
</body>
</html>

　顯示效果：

　② String() 方法

<!-- String()函數轉換規則 -->
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>testDocument</title>
    <style>
        html,body{width: 100%;height: 100%;}
        html,body,p, pre{padding: 0;margin: 0;}
        div{box-sizing: border-box;}
        .container{width: 100%;height:100%;padding-left: calc((100vw - 600px) * .5);background-color: #006699;overflow: auto;}
        .contentContainer{background-color: #fff;width: 600px;height: 100%;}
    </style>
</head>
<body>
    <div class="container">
        <div class="contentContainer">
<!--             <p>null == <span id="rNull"></span></p>
            <p>undefined == <span id="rUndefined"></span></p>
            <p>true == <span id="boolean"></span></p>
            <p>255 == <span id="num1"></span></p>
            <p>10.5 == <span id="num4"></span></p>
            <p>0xf == <span id="num2"></span></p>
            <p>010 == <span id="num3"></span></p>
            <p>obj == <span id="obj"></span></p> -->
            <pre>
<script>
var n1 = 255;
var n2 = 0xf;
var n3 = 010;
var n4 = 10.5;
var rNull = null;
var rUndefined = undefined;
var rBoolean = true;
var numList = {
    "num1":1,
    "num2":2
};

document.writeln("null == " + String(rNull)); // null轉字符串
document.writeln("undefined == " + String(rUndefined)); // undefined轉字符串
document.writeln("true == " + String(rBoolean)); // Boolean轉字符串
document.writeln("255 == " + String(n1)); // 整數轉字符串
document.writeln("10.5 == " + String(n4)); // 浮點數轉字符串
document.writeln("0xf == " + String(n2)); // 十六進制整數轉字符串，會先轉換成十進制
document.writeln("010 == " + String(n3)); // 八進制整數轉字符串，會先轉換成十進制
document.writeln("obj == " + String(numList)); // 對象轉字符串


// document.getElementById("rNull").innerHTML = String(rNull); // null轉字符串
// document.getElementById("rUndefined").innerHTML = String(rUndefined); // undefined轉字符串
// document.getElementById("boolean").innerHTML = String(rBoolean); // Boolean轉字符串
// document.getElementById("num1").innerHTML = String(n1); // 整數轉字符串
// document.getElementById("num4").innerHTML = String(n4); // 浮點數轉字符串
// document.getElementById("num2").innerHTML = String(n2); // 十六進制整數轉字符串，會先轉換成十進制
// document.getElementById("num3").innerHTML = String(n3); // 八進制整數轉字符串，會先轉換成十進制
// document.getElementById("obj").innerHTML = String(numList); // 對象轉字符串
</script>
            </pre>
        </div>
    </div>
</body>
</html>

六、Object類型

對象其實就是一組數據和功能的集合。

var obj = new Object(); // 能夠建立一個對象 Object的每一個實例都具備一下屬性和方法：

① constructor ：構造函數；

② hasOwnProperty ：用以檢查給定屬性是否存在於當前對象實例中；

③ isPrototypeOf ：用以檢查傳入的對象是不是傳入對象的原型；

④ propertyIsEnumerable ：用以檢查給定的屬性是否可以用for-in語句來枚舉；

⑤ toLocaleString() ：返回對象的字符串表示，該字符串與執行環境的地區相對應；

⑥ toString() ：返回對象的字符串表示；

⑦ valueOf() ：返回對象的字符串、數值或布爾值表示。一般與 toString() 方法的返回值一致。