前端之JS篇(二)——数据类型基础概念

前言：经过这节的学习，我们知道了变量是用来存储数据的容器，数据又有很多类型

1.数据类型

1.1 为什么需要数据类型

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

简单来说，数据类型就是数据的类型型号。比较姓名"张三",年龄18，这些数据的类型是不一样的。

1.2 变量的数据类型

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

新建.html文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>// int num = 10; 在java里面，声明时会定义数据类型，这样里面存放的数据一定是定义好的数据类型var num;  // 在JS里面，此时num不知道属于什么数据类型，给它赋值之后，它才会确认var num = 10;  // 此时num属于数字型；var num = '张三';  // 此时num数据字符串型//JS 的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定的var str;  // 此时str并不知道属于什么数据类型var str= 'str1'; //此时才知道str属于字符串型// JS是动态语言，变量的数据类型是可以变化的var x = 10;  // x是数字型x = 'today'; // x是字符串型</script>
</head>
<body></body>
</html>

1.3 数据类型的分类

JS把数据类型分为两类：

简单数据类型(Number,String,Boolean,Undefind,Null)

复杂数据类型(object)

1.3.1 数字型 Number

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

var age = 21;     //  不管是不是整型，都是数字型
var Age = 21.2323;   // 不管是不是浮点型，都是数字型

1.3.1.1 数字型进制

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

1.3.1.2 数字型范围

1.3.1.3 数字型三个特殊值

新建.html文件，执行如下代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var num = 10;   // num 数字型var PI = 3.14  // pI 数字型// 1.八进制 范围：0~7  程序里面数字前面加0,表示八进制var num1 = 010;console.log('010转化成十进制是:',num1);   // 8var num2 = 020;// 快捷键 输入log,选中底边有很多点的那个符号，回车  自动生成console.log()console.log('020转化成十进制是:',num2);// 2.十六进制  范围 0~9 a~f     比如：#ffffff 表示白色   数字前面加 0x 表示十六进制var num3 = 0x9;console.log('0x9转化成十进制是:',num3);var num4 = 0xa;console.log('0xa转化成十进制是:',num4);// 3. 数字型的最大值console.log('数字型的最大值是:',Number.MAX_VALUE);// 4. 数字型的最小值console.log('数字型的最小值是:',Number.MIN_VALUE);// 5.无穷大console.log('数字型的无穷大是:',Number.MAX_VALUE * 2);    // Infinity// 6.无穷小console.log('数字型的无穷小是:',-Number.MAX_VALUE * 2); // -Infinity// 7. 非数字console.log('字符串减去数字的值为:','张三' - 100);      //  NaN</script>
</head>
<body></body>
</html>

效果如下：

1.3.1.4 isNaN()

新建.html文件，执行如下代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>// isNaN()  这个方法用来判断非数字   并且返回一个值  如果是数字返回的是false  如果不是数字返回的是true// 自动换行快捷键  alt + zconsole.log('判断12是不是数字:',isNaN(12));  // false  表示不为空，是数字console.log('判断张三是不是数字:',isNaN('张三'));  // true  表示为空，是数字</script>
</head>
<body></body>
</html>

效果如下：

1.3.2 字符串型String

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

1.3.2.1 字符串引号嵌套

对于嵌套字符串，引号是用法是：外双内单，外单内双。

1.3.2.2 字符串的转义符

新建.html文件，执行如下代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>// 对于嵌套字符串，外双内单，外单内双。var str1 = '大家下午好，我是"张三"';var str2 ="大家晚上好，我是'李四'";// 快捷键 输入log,选中底边有很多点的那个符号，回车  自动生成console.log()console.log('str1:',str1);console.log('str2:',str2);var str3 = '今天天气晴朗，是吧"张三",你说的\n都对!'console.log('str3:',str3);var str4 = '今天天气晴朗，是吧"张三",你说的\n都对!,晴晴晴\\晴晴\'晴晴晴\"晴晴晴\t晴晴晴晴\b晴晴晴晴晴'console.log('str4:',str4);var str5 = '\b今天今天今天'console.log('str5:',str5);</script>
</head>
<body></body>
</html>

效果如下：

1.3.2.3 弹出网页警示框

警示框内容：（考察换行效果）

新建.html文件，执行如下代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>//查看里面，可以设置，自动换行alert('今天天气很热，快接近四十度了，不敢出门。\n没有地方乘凉，火辣辣的，地面都可以煮鸡蛋了。\n这一刻，我仰天大喊一声:"好热啊~"')</script>
</head>
<body></body>
</html>

1.3.2.4 字符串长度

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

1.3.2.5 字符串的拼接

新建.html文件，执行代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>// 1.检测获取字符串的长度 lengthvar str = 'my name is "张三"';console.log(str);console.log(str.length);   // 15// 2.字符串的拼接 +      只要有字符串和其他类型相拼接  最终的结果是字符串类型console.log("沙漠"+"骆驼");   // 沙漠骆驼   字符串型console.log('张三'+ 25);      // 张三25// JS里面字符串更推荐使用单引号console.log('张三' + true);   // 张三trueconsole.log(12 + 12);         // 24console.log('12' + 12);       //  1212</script>
</head>
<body></body>
</html>

效果如下：

1.3.2.6 字符串拼接加强

经常会将字符串和变量来拼接，因为变量可以很方便地修改里面的值。

变量是不能添加引号的，因为加引号的变量会变成字符串

如果变量两侧都有字符串拼接，口诀"引引加加"，删掉数字，变量写加中间

新建.html文件，执行代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>// 常规写法console.log('张三' + 18);   // 张三18console.log('张三' + 18 + '岁');  // 张三18岁// 字符串的加强写法var age = 18;// 我们变量不要写到字符串里面，是通过 和字符串相连的方式实现的// 变量和字符串相连的口诀： 引引加加console.log('张三' + age + '岁');  // 张三18岁</script>
</head>
<body></body>
</html>

效果如下：

1.3.2.7 案例：显示年龄

弹出一个输入框，需要用户输入年龄，之后弹出一个警示框显示"您今年xx岁啦" (xx表示刚才输入的年龄)

案例分析：这是利用JS编写的一个非常简单的交互效果程序

新建.html文件，执行代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var age = prompt('请输入您的年龄')var str = '您今年已经'+ age + '岁了';alert(str)</script>
</head>
<body></body>
</html>

效果如下：

1.3.3 布尔型 Boolean

布尔类型有两个值: true 和false,其中 true 表示真(对)，而false表示假(错)。

布尔型和数字型相加的时候，true的值为1，false的值为0

1.3.4 Undefined 和 Null

新建.html文件，执行代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var flag = true;   // flag 布尔型var flag1 = false;  // flag1 布尔型console.log(flag + 1); // true参与加法运算当1看，结果是2console.log(flag1 + 1); // false 参与加法运算当0来看，结果是1// 如果一个变量声明未赋值  就是undefined未定义数据类型var str;console.log(str);  // undefinedvar variable = undefined;  // 此时varable就是undefined类型console.log(variable + '张三');   // undefined张三console.log(variable + 1);  // NaN   undefined 和数字相加，最后结果是NaN// null 空值var space = null;console.log(space + '张三');  // null张三console.log(space + 1);    // 1</script>
</head>
<body></body>
</html>

【注意】undefined类型和字符串相加拼起来，和数值相加结果都是NaN

效果如下：

1.4 获取变量数据类型

1.4.1 获取检测变量的数据类型

1.4.1.1 方法一(typeof)

typeof——获取检测变量的数据类型

新建.html文件，执行代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var num = 10;console.log(typeof num);    // numbervar str = '张三';console.log(typeof str);   // stringvar flag = true;console.log(typeof flag);   // booleanvar vari = undefined;console.log(typeof vari);  // undefinedvar timer = null;console.log(typeof timer);  // object// prompt 取过来的值是  字符型的var age = prompt('请输入您的年龄')console.log(age);             console.log(typeof age);     // string</script>
</head>
<body></body>
</html>

效果如下：

1.4.1.2 方法二（通过在控制台表现的颜色)

新建.html文件，执行代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>console.log(18);console.log('18');console.log(true);console.log(undefined);console.log(null);</script>
</head>
<body></body>
</html>

效果如下：

由图可以看出来，黑色的是字符串类型；蓝色的要么是数字要么是布尔。

1.4.2 字面量

字面量是在源代码中一个固定值的表示发，通俗来说，就是字面量表示如何表达这个值。(就是一看就知道什么类型) ，比如

数字字面量	8，9，10
字符串字面量	‘张三’ ， ‘李四’
布尔字面量	true， false

1.5 数据类型转换

1.5.1 什么是数据类型转换

使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另外一种数据类型。

比如：

'18' + 18 的结果是  '1810'

我们通常会实现3种方式的转换：

转换为字符串类型

转换为数字型

转换为布尔型

1.5.2 转换为字符串(三种方法)

方法中，加号拼接字符串方法最常用。

新建.html文件，执行代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>// 1.把数字型转换为字符串型   变量.toString()var num = 10;console.log(typeof num);var str = num.toString();console.log(str);console.log('转成字符串型方法一',typeof str);// 2.我们利用String(变量)var age = 18console.log(typeof age);   // numberconsole.log(String(age));  //  18 console.log(typeof age);   // numberconsole.log('转成字符串型方法二',typeof String(age));  // string//  3.利用  + 拼接字符串的方法实现转换效果  这种也称为隐式转换// 任何数据类型和字符串进行拼接操作，都会转换成字符串console.log(num);console.log(typeof num);// 输入log,选择左上右实线，下虚线的，回车操作，就可以得到console.log()console.log('转成字符串型方法三',num + '');var c = num + '';console.log(typeof c);   // string </script>
</head>
<body></body>
</html>

效果如下：

1.5.3 转换为数字型(重点)

新建.html文件，执行代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var age = prompt('请输入您的年龄')console.log(age);   // 18console.log(typeof age);  // string// 1.parseInt(变量) 可以把字符型的转换为数字型  得到是整数console.log(typeof parseInt(age));  // numbervar age1 = '18.2'console.log(typeof age1);  //stringconsole.log(parseInt(age1));  // 18 取整console.log(typeof parseInt(age1)); //numbervar age2 = '18.99'console.log(parseInt(age2));  // 18  取整console.log(parseInt('3.94'));  // 3  取整console.log(parseInt('120px'));  // 120  会去掉px这个单位console.log(parseInt('rem120px')); // NaNconsole.log('--------------------------------');// 2.parseFloat(变量)  可以把字符型的转换为数字型  得到是小数  浮点数console.log(typeof '3.14');  // stringconsole.log('3.14');  // 3.14  黑色 字符串型console.log(typeof parseFloat('3.14')); // number console.log(parseFloat('120px'));  // 120console.log(parseFloat('rem120px'));  // NaNconsole.log('-----------------------');// 3.利用 Number(变量)var age3 = '123';console.log(typeof age3);  //  黑色  stringconsole.log(Number(age3));          // 123console.log(typeof Number(age3)); // numberconsole.log(Number('12'));         // 12console.log(typeof Number('12'));  // numberconsole.log('------------------------------------');// 4.利用了算数运算  - * / 隐式转换console.log('12');  // 12  黑色console.log(typeof '12');  //stringvar c = '12' - 0;  console.log(c);  // 12   蓝色  number型console.log(typeof c);  // numberconsole.log('123' - '120'); // 3// 拓展：console.log('123'+ '120');   //123120console.log(typeof '123');  //stringvar d = '123' *1console.log('123'*1);  //  123 蓝色 numberconsole.log(typeof d); // numberconsole.log('5');  // 5  黑色  字符串型console.log('5' / 1);  // 5 蓝色  number型</script>
</head>
<body></body>
</html>

效果如下：

1.5.3.1 案例1：计算年龄

此案例要求在页面弹出一个输入框，我们输入出生年份后，能计算出我们的年龄。

案例分析

新建.html文件，执行代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>// 弹出一个输入框(prompt),让用户输入出生年份(用户输入)// 把用户输入的值用变量保存起来，然后用今年的年份减去变量值；结果就是现在的年龄// 弹出警示框(alert),把计算的结果输出(输出结果)var year = prompt('请输入您的出生年份')var age = 2022 - year;   // year 取过来的是字符串型，但是这里用的减法，有隐式转换alert('您今年已经'+ age + '岁了');</script></head>
<body></body>
</html>

效果如下：

1.5.3.2 案例2：简单加法器

问题：计算两个数的值，用户输入第一个值后，继续弹出第二个输入框并输入第二个值，最后通过弹出窗口显示出两次输入值相加的结果

案例分析：

新建.html文件，执行代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var num1 = prompt('请您输入第一个值：');var num2 = prompt('请您输入第二个值：');// var result = num1 + num2;  此时不能这样直接加，因为字符型加字符型是拼接效果var result = parseFloat(num1)+ parseFloat(num2);alert('您的结果是：'+ result);</script>
</head>
<body></body>
</html>

效果如下：

1.5.4 转换为布尔型

新建.html文件，执行代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>console.log(Boolean(''));  // falseconsole.log(Boolean(0));   // falseconsole.log(Boolean(NaN));    // falseconsole.log(Boolean(null));    // falseconsole.log(Boolean(undefined));    // falseconsole.log('******************************');console.log(Boolean('1'));   // tureconsole.log(Boolean('张三'));   // tureconsole.log(Boolean('null'));    // ture   因为此时里面是字符串，非空值console.log(Boolean('NaN'));    // ture     因为此时里面是字符串，非空值console.log(Boolean('undefined'));    // ture     因为此时里面是字符串，非空值</script>
</head>
<body></body>
</html>

效果如下：

2. 基础概念梳理

2.1 解释型语言和编译型语言

1.概述

计算机不能直接理解任何除机器语言以外的语言，所以必须要把程序员所写的程序语言翻译成机器语言才能执行程序。程序语言翻译成机器语言的工具，被称为翻译器。

2.2 标识符、关键字、保留字

2.2.1 标识符

标识(zhi)符：就是指开发人员为变量、属性、函数、参数取的名字。

标识符不能是关键字或保留字。

2.2.2 关键字

关键字：是指JS本身已经使用了的字，不能再用它们充当变量名、方法名。

"""
break   case         catch     continue   default  delete
do      else         finally   for        function  if
in      instanceof   new       return     switch    this
throw    try         typeof    var         void     while
with 等
""""

2.2.3 保留字

保留字：实际上就是预留的"关键字"，意思是现在虽然还不是关键字，但是未来可能会成为关键字，同样不能使用它们当变量名或方法名。

"""
包括： boolean      byte     char      class     const     debugger        doubleenum        export  extends    fimal      float     goto            implementsimport      int     interface  long       mative    package         private protected   public   short     static     super     synchronized    throwstransient   volatile等
"""