04-数据类型

---

1.数据类型简介

1.1.为什么需要数据类型

1.2.变量的数据类型

• JavaScript 是一种弱类型或者称动态语言。
• 变量的数据类型是由JS引擎，根据 = 右边变量值的数据类型来判断，运行完毕之后， 变量就确定了数据类型。
• JavaScript 拥有动态类型，同时也意味着相同的变量可用作不同的类型。

1.3.数据类型的分类

JS把数据类型分为两类：

• 简单数据类型
• 复杂数据类型

2.简单数据类型

2.1.简单数据类型有五类

• Number 数字型
• Boolean 布尔值类型
• String 字符串类型
• Undefined 未定义
• Null 空值

2.2.数字型 Number

可以用来保存整数、小数（浮点数）。

2.2.1.数字型进制

在JS中八进制前面加0，十六进制前面加 0x。

        // 八进制在前面加0
        var num1 = 012; //对应十进制的10
        console.log(num1);
        // 十六进制在前面加0x
        var num2 = 0xa;
        console.log(num2);

2.2.2.数字型范围

JS中数值的最大值和最小值。

        // 数值的最大值和最小值
        console.log(Number.MAX_VALUE);
        console.log(Number.MIN_VALUE);

2.2.3.数字型三个特殊值

• 无穷大
• 无穷小
• 非数字

        // 数值的无穷大,无穷小，非数字
        console.log(Number.MAX_VALUE * 255); // Infinity
        console.log(-Number.MAX_VALUE * 255); // -Infinity
        console.log('我是巴拉拉' - 255); // NaN

2.2.4.isNaN()

用来判断变量是否为数字，是数字返回false，不是数字返回true。

2.3.字符串 String

2.3.1.字符串引号嵌套

• 一定要有引号，JS里推荐用单引号 ’ ’ 。
• 内单外双 or 内双外单。

2.3.2.字符串转义符

转义符得包含在引号里面。

2.3.3.字符串长度（重要）

        // 检测字符串的长度
        var str = '好困啊啊！'
        alert(str.length); // 页面弹出 5 

2.3.4.字符串拼接

字符串 + 任何类型 = 拼接后的任何新字符串

        // 字符串拼接
        console.log('我是' + 'SB'); //字符串  我是SB
        console.log('永远' + 255); // 字符串  永远255
        console.log(12 + 34); // 数字型  46
        console.log('12' + 34); // 字符串  1234

2.3.5.字符串拼接加强（重要）

口诀：引引加加

        // 字符串拼接加强
        var str = 6;
        console.log('今天吃了' + str + '顿饭')

2.4.布尔型 Boolean

        // 布尔型
        var flag = true; // flag  布尔型
        var flag1 = false; // flag  布尔型
        console.log(flag + 1); // true参与加法运算当1来看
        console.log(flag1 + 1); // false参与加法运算当0来看

2.5.Undefined 和 Null

        // 如果一个变量声明未赋值，就是undefined未定义数据类型
        var str;
        console.log(str);

        var variable = undefined;
        console.log(variable);

        console.log(variable + '快乐老家'); // undefined快乐老家
        console.log(variable + 1); // NaN  undefined和数字相加结果是NaN

        //null空值
        var space = null;
        console.log(space + '快乐老家'); // null快乐老家
        console.log(space + 1); // 1

3.获取变量数据类型

3.1.获取检测变量的数据类型

• 方法1——typeof 可用来获取检测变量的数据类型

        // 获取检测变量的数据类型   typeof 的用法
        var num = 18;
        console.log(typeof num) // 结果 number

一些发现

        // prompt取过来的值是string型的
        var age = prompt('请输入您的年龄');
        console.log(age);
        console.log(typeof age);

• 方法2——在chrome浏览器的后台看字体的颜色

3.2.字面量

字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。

• 数字字面量：8, 9, 10
• 字符串字面量：‘黑马程序员’, “大前端”
• 布尔字面量：true，false

4.数据类型转换

• 转换为字符串类型
• 转换为数字型
• 转换为布尔型

4.1.转换为字符串

• 最常用第3种隐式转换

        // 转换为字符串
        // 1. toString()
        var num = 10000;
        var str = num.toString();
        console.log(str);
        // 2. String(变量)
        console.log(String(num));
        // 3.利用 + 拼接字符串的方法实现转换效果，也称为隐式转换
        console.log(num + '');

4.2.转换为数字型（重点）

• 重点掌握第1、2种

        // 转换为数字型
        // 1. parseInt(变量) 可以把字符型转换为数字型，得到的是整数。
        // var age = prompt('请输入您的年龄');
        // console.log(parseInt(age));
        console.log(parseInt('3.14')); // 3 取整
        console.log(parseInt('3.94')); // 3 取整
        console.log(parseInt('12px')); // 12 会去掉px这个单位
        console.log(parseInt('rem12px')); // NaN 
        // 2.parseFloat(变量) 可以把字符型转换为数字型，得到的是小数 浮点数。
        console.log(parseFloat('3.94')); // 3.94 
        console.log(parseFloat('12px')); // 12 会去掉px这个单位
        console.log(parseFloat('rem12px')); // NaN 
        // 3.利用Number(变量)
        console.log(Number('123')); // 123 数字型
        // 4.利用算数运算 - * /  隐式转换
        console.log('12' - 0); // 12 数字型
        console.log('123' - '120'); // 3 数字型
        console.log('123' * 1); // 123 数字型

• 案例练习见【day10-简单加法器案例.html】

      /*① 先弹出第一个输入框，提示用户输入第一个值 保存起来
        ② 再弹出第二个框，提示用户输入第二个值 保存起来
        ③ 把这两个值相加，并将结果赋给新的变量（注意数据类型转换） ④ 弹出警示框（alert) ， 把计算的结果输出 （输出结果） */
        var str1 = prompt('请输入第一个值');
        var str2 = prompt('请输入第二个值');
        var result = parseFloat(str1) + parseFloat(str2);
        alert('总和是' + result);

• 案例练习见【day10-计算年龄案例.html】

     /* ① 弹出一个输入框（prompt)，让用户输入出生年份 （用户输入）
        ② 把用户输入的值用变量保存起来，然后用今年的年份减去变量值，结果就是现在的年龄 （程序内部处理）
        ③ 弹出警示框（alert) ， 把计算的结果输出 （输出结果 */
        var year = prompt('请问您的出生年份是多少')
        var age = 2022 - year; // year 取过来是字符串，但这里是减法，有隐式转换。
        alert('您今年已经' + age + '岁了');

4.3.转换为布尔型

• 代表空、否定的值会被转换为false，如’'、0、NaN、null、undefined
• 其余都被转换为true