一、数据类型简介

1. 为什么需要数据类型

在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型

2. 变量的数据类型

变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将这些值的位存储到计算机的内存中。JavaScript是一种弱类型或者说动态语言，这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定

2.1 在代码运行时，变量的数据类型是由JS引擎根据 = 右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型

var age = 10;  // 数字型 
var name = '蔡徐坤';  // 字符串

2.2 JavaScript拥有动态类型，变量的数据类型是可以变化的，同时也意味着相同的变量可用作不同的类型

var x = 7;  // x 为数字
var x = 'Tom';  // x 为 字符串

3. 数据类型的分类

JS把数据类型分为两类：
简单数据类型(Number,String,Boolean,Undefined,Null)
复杂数据类型(object)

二、简单数据类型(基本数据类型)

1.Number：数字型，包含整型值和浮点型值，如21、0.21，默认值 0
2.Boolean：布尔值类型，如true、false，等价于 1 和 0
3.String：字符串类型，如 “张三”,字符串都带引号
4.Undefined：var a; 声明了变量a，但是没有赋值，此时 a = undefined
5.Null：var a = null; 声明了变量a为空值

1. 数字型 Number

JavaScript数字类型既可以用来保存整数值，也可以保存小数(浮点型)

var num = 10;   // 数字型
var PI = 3.14;  // 数字型

1.1 数字型进制

最常见的进制有二进制、八进制、十进制、十六进制

1.1.1 八进制 0 ~ 7 我们程序里面数字前面加0 表示八进制

 var num1 = 010;
console.log(num1);  // 010 八进制 转换为 十进制 就是 8
var num2 = 012;
console.log(num2);  // 10

1.1.2 十六进制 0 ~ 9 a ~ f #ffffff 数字的前面加0x 表示十六进制

var num3 = 0x9;
console.log(num3);  // 9
var num4 = 0xa;
console.log(num4);  // 10

1.2 数字型范围

JavaScript中数值的最大值

console.log(Number.MAX_VALUE);  // 1.7976931348623157e+308

JavaScript中数值的最小值

console.log(Number.MIN_VALUE);  // 5e-324

1.3 数字型三个特殊值

1.3.1 无穷大(Infinity)

console.log(Number.MAX_VALUE * 2);  // Infinity

1.3.2 无穷小(-Infinity)

console.log(-Number.MAX_VALUE * 2);  // -Infinity

1.3.3 非数字(NaN: Not a Number)

console.log('pink老师' -100);  // NaN

1.4 isNaN()方法

这个方法用来判断非数字，并且返回一个值。如果是数字返回的是false，如果不是数字返回true

console.log(isNaN(12));  // false
console.log(isNaN('蔡徐坤'));   // true

2. 字符串型 String

字符串可以是引号中的任意文本，其语法为双引号”” 和单引号’’
• 因为HTML标签里面的属性使用的是双引号，JS这里我们更推荐使用单引号
• JS可以用单引号嵌套双引号，或者用双引号嵌套单引号(外双内单，外单内双)

var strMessage1 = '你是个"憨憨"小可爱';
var strMessage2 = "你是个'憨憨'小可爱";
console.log(strMessage1);
console.log(strMessage2);

2.1 字符串转义符

类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符
转义符都是\开头的
\n 换行符(n是newline的意思)
\ 斜杠 \
\’ ‘ 单引号
\” “ 双引号
\t tab缩进
\b 空格(b是blank的意思)

var intro = "我是一个'刚入门的'\n程序员";
console.log(intro);

2.1.2 案例：弹出网页警示框

酷暑难耐，火辣的太阳底下，我挺拔的身姿，成为最为独特的风景。我审视四周，这里，是我的舞台，我就是天地间的王者。这一刻，我豪气冲天，终于大喊一声：”收破烂啦~”

alert('酷暑难耐，火辣的太阳底下，我挺拔的身姿，成为最为独特的风景。\n我审视四周，这里，是我的舞台，我就是天地间的王者。\n这一刻，我豪气冲天，终于大喊一声："收破烂啦~"');

2.2 字符串长度

字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的length属性可以获取整个字符串的长度

2.2.1 检测获取字符串的长度 length

var str = 'my name is Tom';
console.log(str.length);

2.3 字符串拼接 +

多个字符串之间可以使用 + 进行拼接，其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串
拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串

// 字符串相加
 console.log('沙漠' + '骆驼');   // 沙漠骆驼
// 数值 字符串 相加
console.log('蔡徐坤' + 18);   // 蔡徐坤18
// 字符串 + 布尔型
console.log('pink' + true);  // pinktrue
// 数值 + 数值
console.log(12 + 12);   // 24
// 数值字符串 + 数值
console.log('12' + 12);    // 1212

2.4 字符串加强

变量和字符串相连的口诀：引引加加

console.log('蔡徐坤' + age + '岁');

2.5 案例：显示年龄(利用JS编写的一个非常简单的交互效果程序)

弹出一个输入框，需要用户输入年龄，之后弹出一个警示框显示”您今年xx岁啦”(xx表示刚才输入的年龄)
1. 弹出一个输入框(prompt)，让用户输入年龄(用户输入)
2. 把用户输入的值用变量保存起来，把刚才输入的年龄与要输出的字符串拼接(程序内部处理)
3. 使用alert语句弹出警示框(输出结果)

var age = prompt("请输入您的年龄：");
alert("您今年" +age + '岁啦!' );

3. 布尔型Boolean

布尔类型有两个值：true和false，其中true表示真(对)，而false表示假(错)
布尔型和数字型相加的时候，true的值为1，false的值为0

var flag = true;    // flag 布尔型
var flag1 = false; // flag1 布尔型
console.log(true + 1); // 2
console.log(false + 1); // 1

4. Undefined和Null

4.1 Undefined

一个声明后没有被赋值的变量会有一个默认值undefined(如果进行相连或者相加是，注意结果)
如果一个变量声明未赋值就是undefined未定义数据类型

var str;
console.log(str);
var variable = undefined;
console.log(variable + 'pink'); // undfinedpink
// undefined和数字相加最后的结果是NaN
console.log(undefined + 1); // NaN

一个声明后没有被赋值的变量会有一个默认值undefined(如果相连或者相加时，注意结果)

var variable;
console.log(variable); // undefined
console.log('你好' + variable); // 你好undefined
console.log(11 + variable); // NaN
console.log(true + variable); // NaN

4.2 Null 空值

var space = null;
console.log(space + 'pink'); // nullpink
console.log(space + 1); // 1

一个声明变量给null值，里面存的值为空

var vari = null;
console.log('你好' + vari); // 你好null
console.log(11 + vari); // 11
console.log(true + vari); // 1

三、获取变量数据类型

3.1 typeof可用来获取检测变量的数据类型

var num = 10;
console.log(typeof num); // number
var str = 'pink';
console.log(typeof str); // string
var flag = true;
console.log(typeof flag); // boolean
var vari = undefined;
console.log(typeof vari); // undefined
var timer = null;
console.log(typeof timer); // object
// prompt取过来的值是字符型的
var age = prompt('请输入您的年龄');
console.log(age);
console.log(typeof age); // string

我们还可以通过console这个浏览器控制台的颜色来判断它属于哪一种数据类型(数字型是蓝色、字符串型是黑色、布尔型是深蓝色、undefined和null是浅灰色)

3.2 字面量

字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值
数字字面量：8, 9, 10
字符串字面量：’黑马程序员’, “大前端”
布尔字面量：true，false

四、数据类型转换

使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另外一种数据类型
我们通常会实现3种方式的转换：
• 转化为字符串类型
• 转换为数字型
• 转换为布尔型

4.1 转换为字符串

// 1. 把数字型转换为字符串型 变量.toString()
var num = 10;
var str = num.toString();
console.log(str); // 10(黑色的是字符串型)
console.log(typeof str); // string
// 2. 利用String(变量)
console.log(String(num)); // 10(黑色的是字符串型)
// 3. 利用 + 拼接字符串的方法实现转换效果(隐式转换)
console.log(num + ''); // 10(黑色的是字符串型)

4.2 转换为数字型(重点)

// 1. parseInt(变量) 和 parseFloat(变量)
var age = prompt('请输入您的年龄');
// parseInt(变量) 可以把字符型转换为数字型，得到的是整数
console.log(parseInt(age)); // 13 (蓝色的是数字型)
console.log(parseInt('3.17')); // 3 取整
console.log(parseInt('3.97')); // 3 取整
console.log(parseInt('120px')); // 120 会去掉px单位
console.log(parseInt('rem120px')); // NaN
// parseFloat(变量) 可以把字符型转换成数字型，得到的是小数
console.log(parseFloat('3.14')); // 3.14 (蓝色的是数字型)
console.log(parseFloat('120px')); // 120 (蓝色的是数字型)
console.log(parseFloat('rem120px')); // NaN (蓝色的是数字型)
2. Number(变量)
var str = '123';
console.log(Number(str)); // 123
console.log(Number('12')); // 12
// 利用算数运算 - * / 隐式转换
console.log('12' - 0); // 12
console.log('123' - '120'); // 3
console.log('123' * 1); // 123

注意：parseInt和parseFloat单词的大小写

4.3 转换为布尔型

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

console.log(Boolean('')); // false
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean('小白')); // true
console.log(Boolean(12)); // true

4.4 案例

案例1：计算年龄

要求在页面中弹出一个输入框，我们输入出生年份后，能计算出我们的年龄
案例分析：
1. 弹出一个输入框(prompt)，让用户输入出生年份(用户输入)
2. 把用户输入的值用变量保存起来，然后用今年的年份减去变量值，结果就是现在的年龄(程序内部处理)
3. 弹出警示框(alert)，把计算的结果输入(输入结果)

var year = prompt('请输入您的出生年份');
var age = 2021 - year;
alert('您今年' + age + '岁啦!');

案例2：简单加法器

计算两个数的值，用户输入第一个值后，继续弹出第二个输入框并输入第二个值，最后通过弹出窗口显示出两次输入值相加的结果
案例分析：
1. 先弹出第一个输入框，提示用户输入第一个值，保存起来
2. 先弹出第二个输入框，提示用户输入第二个值，保存起来
3. 把这两个值相加，并将结果赋给新的变量(注意数据类型转换)
4. 弹出警示框(alert)，把计算的结果输出(输出结果)

var num1 = prompt('请输入第一个值');
var num2 = prompt('请输入第二个值');
var result = parseInt(num1) + parseInt(num2);
alert(result);