第2章 JavaScript数据类型

最新推荐文章于 2023-08-03 19:32:30 发布

原创最新推荐文章于 2023-08-03 19:32:30 发布 · 270 阅读

0 ·

CC 4.0 BY-SA版权

《21天学通JavaScript》笔记专栏收录该内容

7 篇文章

订阅专栏

本文深入讲解JavaScript中的各种数据类型，包括字符串、数值、布尔型、undefined、null等基本类型，以及数组、日期、数学对象等复合类型。同时，探讨了数据类型转换、内置对象的使用及函数的创建。

➊字符串型

<script type="text/javascript">
    var hello = "你好";
    var name = 'Peter';
    alert(hello + name);
</script>

➋数值型

<script type="text/javascript">
    var i = 0xf2;// 十六进制，前缀0x
    var j = 0o123;// 八进制，前缀0o
    var k = 0.3e7; // 十进制科学计数法
</script>

➌布尔型

<script type="text/javascript">
    var t = true;
    var f = false;
</script>

➍undefined

<script>
    var t1 = "";
    var t2;
    if (t1 === undefined) {
        alert("t1 is undefined");// 不弹窗
    }
    if (t2 === undefined) {
        alert("t2 is undefined");// 弹窗
    }
</script>

➎null

typeof undefined             // undefined
typeof null                  // object
null === undefined           // false
null == undefined            // true

“==”如果两个操作数不是同一类型，那么相等运算符会尝试一些类型转换，然后进行比较。

“===”首先计算其操作数的值，然后比较这两个值，比较过程没有任何类型转换。即类型和数值都相等才返回true。

（1）undefined：是所有没有赋值变量的默认值，自动赋值。

（2）null：主动释放一个变量引用的对象，表示一个变量不再指向任何对象地址。

何时使用null?

当使用完一个比较大的对象时，需要对其进行释放内存时，设置为 null。

null 与 undefined 的异同点是什么呢？

共同点：

都是原始类型，保存在栈中变量本地。

不同点：

（1）undefined——表示变量声明过但并未赋过值。

它是所有未赋值变量默认值，例如：var a; a自动被赋值为 undefined

（2）null——表示一个变量将来可能指向一个对象。

一般用于主动释放指向对象的引用，例如：var emps = ['ss','nn']; emps = null;释放指向数组的引用

复合数据类型：

常用内置对象：（对象封装了数据和操作数据的方法）

var obj = new Object();

常用日期对象：

date = new Date();// 直接创建(当前日期)
date = new Date(val); // val是1970-1-1至今的毫秒数
date = new Date(y,m,d[,h[,min[,sec[,ms]]]]);// h/min/sec/ms可选

<script>
    var cur = new Date();
    var year = cur.getFullYear();
    var month = cur.getMonth();
    var days = cur.getDate();
    var hours = cur.getHours();
    var minutes = cur.getMinutes();
    var seconds = cur.getSeconds();
    alert("此时时间是：" + year + "年" + (month + 1) + "月" + days + "日" + hours + "时" + minutes + "分" + seconds + "秒");
</script>

Date对象的常用方法：

全局对象：所有全局方法的拥有者，用来统一管理全局方法，全局方法也就是指全局函数。所有的方法直接调用即可。

<script>
    var a = NaN;
    var b = "123"// 字符串样式数字
    var c = 123;
    var d = "1.23";// 字符串样式数字
    var ta = isNaN(a);
    var tb = isNaN(b);
    var tc = isNaN(c);
    var td = isNaN(d);
    document.write("<b>Global对象的isNaN方法</b><br>");
    document.write("<li>a的值是否是NaN:" + ta + "<br>");
    document.write("<li>b的值是否是NaN:" + tb + "<br>");
    document.write("<li>c的值是否是NaN:" + tc + "<br>");
    document.write("<li>d的值是否是NaN:" + td + "<br>");
    document.write("<b>Global对象的parseInt方法</b><br>");
    var ib = parseInt(b);
    if (ib == c)
        document.write("<li>b解析为数值:" + ib + "<br>");
    document.write("<b>Global对象的parseFloat方法</b><br>");
    var id = parseFloat(d);
    if (id == 1.23)
        document.write("<li>d解析为数值:" + id + "<br>");
</script>

常用数学对象：

Math.[{属性名|方法名}];

<script>
    var r = 2;
    var pi = Math.PI;
    var s = pi * r * r;
    alert("圆面积为：" + s);
</script>

常用字符串对象：

String([strVal]);// 构造函数

<script>
    var comment = "静夜思李白床前明月光，疑是地上霜。举着望明月，低头思故乡。";
    var partial = comment.substring(0, 3);// 取出标题
    partial = partial.bold();// 加粗
    document.write("<p align='center'>");
    document.write(partial);
    partial = comment.slice(3, 5);// 取出作者
    document.write("<br>");
    document.write(partial);
    partial = comment.slice(5, 17);// 取出第一句诗文
    partial = partial.fontcolor("gray");// 设置诗文颜色为灰色
    document.write("<br>");
    document.write(partial);// 输出第一句诗
    partial = comment.slice(17, 29);
    partial = partial.fontcolor("gray");
    document.write("<br>");
    document.write(partial);// 输出第二句诗
    document.write("</p>");
</script>

数组对象：

var a = new Array();// 方式1: 构造函数创建一个没有任何元素的数组
var a = new Array(3);// 方式2: 构造函数创建一个包含3个元素的数组
var a = new Array(10, 20, 30, "string", 40);// 方式3: 给构造函数传递数组元素为参数
var a = [10, 20, 30, "string", 40];// 方式4: 不调用构造函数，直接将元素放入"[]"即可

<script>
    var poets = new Array("王维", "杜甫", "李白", "白居易");
    document.write("古代几大诗人：<br>");
    for (n in poets) {
        document.write("<li>" + poets[n]);// 数组名[下标]访问元素
    }
</script>

使用函数：

function TypeName([arg,...]) {
    this.arg = arg;
}

<script>
    function Card(owner, rate) {
        this.Owner = owner;// this 表示该方法所属的对象
        this.MaxRate = rate;
    }
    var myCard = new Card("Sunsir", "400KMpH"); // 创建一个车子实例，此时this即是myCard
    document.write(myCard.Owner + "的车子极速为" + myCard.MaxRate);
</script>

数据类型的转换：

隐式类型转换：

程序运行时，系统根据当前上下文的需要，自动将数据从一种类型转换为另一种类型的过程称为隐式类型转换。上面的代码中大量使用了window对象的alert方法和document对象的write方法，可以向这两个方法中传入任何类型的数据，这些数据最终都被自动转换为字符串型。

<script>
    var age = prompt("请输入您的年龄：", "0");
    if (age <= 0) {
        alert("输入数据不合法！");
    } else {
        alert("你的年龄为" + age + "岁");
    }
</script>

显示类型转换：

<script>
    var priceOfApple = "3元";
    var priceOfBanana = "3.5元";
    priceOfApple = parseInt(priceOfApple);// 解析苹果的价格（从字符串中解析出数值数据）
    var priceOfBanana2 = parseInt(priceOfBanana);// 解析香蕉的价格
    if (priceOfApple === 3 && priceOfBanana2 === 3 && parseFloat(priceOfBanana) === 3.5) {
        alert("苹果价格：" + priceOfApple
            + "\n香蕉价格整数部分：" + priceOfBanana2
            + "\n香蕉价格：" + parseFloat(priceOfBanana));
    } else {
        alert("并没有得到预期的转换效果");
    }
</script>