美文网首页web前端开发让前端飞
JavaScript中的数据类型

JavaScript中的数据类型

作者: 88b61f4ab233 | 来源:发表于2018-11-03 21:09 被阅读3次

    在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。


    4、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() 都是由两个参数的，第一个参数是需要转换的值，第二个参数是转换使用的基数（即多少进制），为了防止转换出现问题，使用多进制转换的时候可以制定基数，避免不必要的错误。

    ** 5、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>

    6、Object类型

    对象其实就是一组数据和功能的集合。

    var obj = new Object(); // 可以创建一个对象
    Object的每个实例都具有一下属性和方法：

    ① constructor ：构造函数；

    ② hasOwnProperty ：用以检查给定属性是否存在于当前对象实例中；

    ③ isPrototypeOf ：用以检查传入的对象是否是传入对象的原型；

    ④ propertyIsEnumerable ：用以检查给定的属性是否能够用for-in语句来枚举；

    ⑤ toLocaleString() ：返回对象的字符串表示，该字符串与执行环境的地区相对应；

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

    ⑦ valueOf() ：返回对象的字符串、数值或布尔值表示。通常与 toString() 方法的返回值一致。

    相关文章

      网友评论

        本文标题：JavaScript中的数据类型

        本文链接：https://www.haomeiwen.com/subject/nallxqtx.html

        延伸阅读

        深度阅读

        • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

        栏目导航

        热点阅读

        web前端开发

        让前端飞

        关于我们|服务条款|联系我们|JavaScript中的数据类型|投稿指南|网站地图|RSS订阅|排版工具|手机版

        提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

        Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

        备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

        本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

        所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！