JavaScript基础--数据类型

1. 为什么需要数据类型

我们知道，在计算机中，数据是存储在内存中的，而不同的数据占用的内存大小不一，所以为了充分利用存储空间，于是定义了不同的数据类型。
而所谓的数据类型就是数据的类别型号。比如姓名‘张三’和年龄‘18’，我们明显可以感知到它们不是属于同一类别的数据。

2. 变量的数据类型

变量是用来存储值的空间，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。

var width = 10;   // 这是一个数字型
var areYouOk = '是的';   // 这是一个字符串

在代码运行时，变量的数据类型是由 JS引擎 根据 = 右边变量值的数据类型来判断 的，运行完毕之后， 变量就确定了数据类型。
JavaScript 拥有动态类型，同时也意味着相同的变量可用作不同的类型：

var a = 6;   // a为数字
var a = "Bill";  // a 为字符串 

3. 数据类型的分类

JS 把数据类型分为两类：
①简单数据类型 （Number，String，Boolean，Undefined，Null）
②复杂数据类型 （object)

简单数据类型（基本数据类型）具体说明如下表：

简单数据类型	说明	默认值
Number	数字型，包含 整型值和浮点型值，如10、0.35	0
String	字符串类型，如'您好' ，注意我们JS里面，字符串都是带引号的	‘’
Boolean	布尔值类型，如true、false，等价于1和0	false
Undefined	var x; 声明了变量x，但是没有赋值，此时x=undefined	undefined
Null	var x=null; 声明了变量x 为空值	null

3.1 数字型 Number

JS中的数字类型既可以用来保存整数值，也可以保存小数(浮点数）。

var age = 18; // 整数
var height = 165.52; // 小数 

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

// 1.八进制数字序列范围：0~7
 var num1 = 06; // 对应十进制的6
 var num2 = 017; // 对应十进制的15
 var num3 = 020; // 对应十进制的16

 // 2.十六进制数字序列范围：0~9以及A~F
 var num = 0xA;  // 对应十进制的10

目前我们只要知道，在JS中八进制--前面加0，十六进制--前面加 0x 即可。

3.2 字符串型 String

字符串型可以是引号中的任意文本，其语法为 双引号 "" 和 单引号'' 。

var str1 = "我爱你，中国！"; // 使用双引号表示字符串
var str2 = '1234'; // 使用单引号表示字符串，虽然引号里面是数字，但是有引号就是字符串

// 常见错误
var str3 = 我爱追剧; // 报错，没使用引号，会被认为是js代码，但js没有这些语法

因为 HTML 标签里面的属性使用的是双引号，JS 这里我们更推荐使用单引号。

（1）字符串引号嵌套

JS 可以用单引号嵌套双引号 ，或者用双引号嵌套单引号 (外双内单，外单内双) 

var str1 = '我是"小仙女"程序猿'; // 可以用''包含""
var str2 = "我是'小仙女'程序猿"; // 也可以用"" 包含'' 

// 常见错误
var wrong = 'What on earth?"; // 报错，不能 单双引号搭配

（2）字符串转义符 

类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符。

转义符都是 \ 开头的，常用的转义符及其说明如下： 

转义符	解释说明
\n	换行符，n 是 newline 的意思
\\	斜杠 \
\'	单引号 '
\"	shuangy "
\t	tab 缩进
\b	空格，b 是 blank 的意思

alert('生活不易，且行且珍惜。\n面对疫情，要勇往直前。');  // 使用了\n所以这两句话会分两行显示

（3）字符串长度

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

var str = "做一个元气满满的girl~！";
alert(str.length); // 显示 14   这说明中文按个数数，英文按字母数，符号也按个数数

（4）字符串拼接 

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

//1.字符串 "相加" 
alert('您好 + ',' + '中国！');   // 结果为：您好,中国！

//2. 数值字符串 "相加" 
alert('100' + '100');   // 结果为：100100

//3. 数值字符串 + 数值
alert('11' + 12);   // 结果为：1112

//4. 字符串 + 变量
var age = 18;
// console.log('小仙女age岁啦'); // 这是不对的，变量不能添加引号，因为加引号的变量会变成字符串
console.log('小仙女' + age + '岁啦'); // 小仙女18岁啦

总之，不管是什么类型，只要相加的有一方是字符串，那么最后输出的结果就是字符串型。

 3.3 布尔型 Boolean

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

console.log(true + 1);   // 2
console.log(false + 1);   // 1

3.4 Undefined 和 Null

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

var a;
console.log(a);   // 结果为：undefined
console.log('你好' + a); // 结果为：你好undefined
console.log(11 + a); // 结果为：NaN
console.log(true + a); // 结果为：NaN

NaN表示Not a number，代表一个非数值。

一个声明变量给 null 值，里面存的值为空（学习对象时，我们继续研究null) 

var b = null;
console.log('你好' + b); // 结果为：你好null
console.log(11 + b); // 结果为：11
console.log(true + b); // 结果为：1

数字型或布尔型与null型进行计算时，null相当于值为0；

4. 获取变量数据类型

4.1 检测变量的数据类型type of

typeof 可用来获取检测变量的数据类型，具体用法如下：

var num = 18;
console.log(typeof num) // 结果 number

var a=true;
console.log(typeof a) // 结果 boolean

4.2 字面量

字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。
①数字字面量：如8, 9, 10，一看到就知道属于数字型
②字符串字面量：如'JavaScript'，"大前端" ，带有引号，一眼可以识别为字符串型
③布尔字面量：true，false

5. 数据类型转换

所谓数据类型转换就是把一种数据类型的变量转换成另外一种数据类型。

我们通常会实现3种方式的转换：
① 转换为字符串类型
② 转换为数字型
③ 转换为布尔型

5.1 转换为字符串

方法	说明	例子
toString	转成字符串	var num=10; alert(num.toString());
String()强制转换	转成字符串	var num=10; alert(String(num));
加号拼接字符串	和字符串拼接的结果都是字符串	var num=10; alert(num+'我是字符串')

 注意：①toString() 和 String() 使用方式不一样。
            ②三种转换方式，我们更喜欢用第三种加号拼接字符串转换方式， 这一种方式也称之为隐式转换。

 5.2 转换为数字型（重点）

方法	说明	例子
parseInt(string)函数	将string类型转换为整数数值型	parseInt（'18'）
parseFloat(string)函数	将string类型转换为浮点数数值型	parseFloat('22.45')
Number()强制转换函数	将string类型转换为数值型	Number('55')
JS隐式转换（-  *  /）	利用算术运算隐式转换为数值型	'11' - 0

注意：① parseInt 和 parseFloat 单词的大小写，这2个是重点
            ②隐式转换是我们在进行算数运算的时候，JS 自动转换了数据类型

5.3 转换为布尔型

方法：使用Boolean()函数

var a = 'true';
console.log(typeof a);  // 结果为： string
var b = Boolean(a);
console.log(typeof b);  // 结果为： boolean

注意：①代表空、否定的值会被转换为 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(18));       // 结果为：true