Web前端_JavaScript的Day2_基本数据类型、数组、循环及条件表达式

前言

这部分内容主要介绍了JavaScript中基本数据类型、数组的基础知识、循环的常规应用以及表达式。

变量

1.什么是变量？

变量是用来存储数据的，是存放具体数值的容器。

2.变量的命名规范

变量名可以由字母、数字、下划线及美元符号组成，但是不能以数字开头。

3.变量的使用

• 先声明变量后初始化变量。
• 可以声明变量同时并初始化变量。

注意：变量名是区分大小写的。

操作符

1.什么是变量？

变量是用来存储数据的，是存放具体数值的容器。

2.基本的算术运算符

变量是用来存储数据的，是存放具体数值的容器。

操作符	相关操作	代码示例
+	加法操作	1 + 2
-	减法操作	2 - 1
*	乘法操作	1 * 2
/	除法操作	2 / 1
%	取模操作	2 % 2
++	自增1运算	前置++操作先自增加1再返回加过后的值var a = 1;var b = ++a;b = 2a = 2后置++操作先返回原来的值再自增加1var a = 1;var b = a++;b = 1 a = 2
–	自减1运算	前置–操作先自减减1再返回加过后的值var a = 2;var b = –a;b = 1a = 1后置–操作先返回原来的值再自减减1var a = 2;var b = a–;b = 2a = 1

3.复合操作运算符

操作符	代码示例	代码变形
+=	var a = 1;a += 1;console.log(a); a = 2	var a = 1;a = a + 1;console.log(a);a = 2
-=	var a = 1;a -= 1;console.log(a);a = 0	var a = 1;a = a - 1;console.log(a);a = 0
*=	var a = 1;a *= 2;console.log(a);a = 2	var a = 1;a = a * 2;console.log(a);a = 2
/=	var a = 2;a /= 2;console.log(a);a = 1	var a = 2;a = a / 2;console.log(a);a = 1
%=	var a = 2;a %= 2;console.log(a);a = 0	var a = 2;a = a % 2;console.log(a);a = 0

操作符

JavaScript中包含以下几大基本数据类型：

数字型——包括整数和浮点数，例如：1、1.1、3.14。
字符串型——包括由任意字符组成的序列，例如：“a”、“one 2 two”。
布尔型——只有两种形式，true和false。
undefined——没有值的变量，当我们去访问这种并不存在的变量时，会得到这个特殊值undefined。
null——表示没有值或空值。在JavaScript中，null的数据类型是对象。

1.typeof操作符

使用typeof我们能够知道返回某个变量或值的类型是什么，该操作符的返回结果可能是：

1 console.log(typeof null);           //Object
2 console.log(typeof 10);             //number
3 console.log(typeof "a");            //string
4 console.log(typeof '10');           //string
5 console.log(typeof true);           //boolean
6 console.log(typeof function(){});   //function
7 console.log(typeof a);              //undefined
8 console.log(typeof undefined);      //undefined

所以在JavaScript中使用typeof操作符返回的结果是：

• “number”;
• “string”;
• “boolean”;
• “undefined”;
• “object”;
• “function”

注意：

当八进制和十六进制的数字使用typeof操作符时返回的结果是number类型。

1 console.log(typeof 0377);   //八进制返回"number"
2 console.log(typeof 0xff);   //十六进制返回"number"

当使用指数去表示的时候返回的是number类型

1 //2e1和2e+1是指数的两种表示方法
2 console.log(typeof 2e1);    //number
3 console.log(typeof 2e+1);    //number

使用typeof操作符返回Infinity和-Infinity的结果也是number

1 console.log(typeof Infinity);    //number
2 console.log(typeof -Infinity);    //number

使用typeof操作符返回NaN的结果也是number

1 console.log(typeof NaN);

2.数字型

1.Infinity

在JavaScript中，超出处理范围的数值用Infinity这个特殊值来表示。例如当我们向控制台输出1e308时，返回结果正常，而向控制台再输出1e309的时候就超出范围了，所以会返回Infinity，其中如果超出最大值就是返回Infinity，如果超出最小值就返回-infinity。

1 console.log(1e308);        //1e+308
2 console.log(1e309);        //Infinity
3 console.log(-1e309);    //-Infinity

Infinity和-Infinity相加得到的不是0而是NaN，Infinity-Infinity得到的也是NaN而并非0,实际上二者都一样。

1 console.log(-Infinity + Infinity);    //NaN
2 console.log(Infinity - Infinity);    //NaN

Infinity和数字执行除了取模以外的运算得到的结果都是Infinity，取模运算得到的是NaN。

1 console.log(Infinity + 10);        //Infinity
2 console.log(Infinity - 10);        //Infinity
3 console.log(Infinity * 10);        //Infinity
4 console.log(Infinity / 10);        //Infinity
5 console.log(Infinity % 10);        //NaN

2.NaN

虽然NaN代表的是不是数字，但是正如我们在上面typeof中使用typeof操作符的时候一样，返回的值的类型也是数字类型，所以NaN是一种特殊的数字。

注意：

• 如果我们计算1 + “a”得到的结果是1a这个拼接后的字符串，但是如果我们使用的是其它的几个算术运算符的话返回的结果是NaN，因为这是错误的运算方式，返回的结果不会是一个数字。
• 如果我们在算术运算中将NaN算进去的话，整个运算得到的结果也是NaN。

1 console.log(1 + "a");            //1a
2 console.log(1 - "a");            //NaN
3 console.log(1 * "a");            //NaN
4 console.log(1 / "a");            //NaN
5 console.log(1 % "a");            //NaN
6 console.log(1 + 2 + NaN + 3);    //NaN

3.字符串型

字符串通常表示的是某段表示文本的字符序列。和某些语言不同的是，JavaScript语言中一对单引号或双引号之间的任何值都是一个字符串，有些编程语言单引号只能是表示字符，双引号表示字符串。所以在JavaScript中，’1’和”1”表示的都是字符串。字符串使用typeof操作符会返回string这个结果。

1.字符串的表示

• 在JavaScript中字符串可以用单引号表示也可以用双引号表示。
• 字符串可以是引号中的零个或多个字符。
• 字符串可以是带单引号或双引号的任何值。
• 字符串之间可以使用加号运算符进行拼接，拼接后得到的新的字符串依然是字符串类型。

2.字符串类型和其它类型之间的相互转换

布尔型转字符串型
通过a布尔类型与字符串使用加号运算符拼接将a由布尔类型转换为字符串类型。

1 var a = true;
2 var b = "";
3 var c = a + b;
4 console.log(c);            //true
5 console.log(typeof c);    //string

字符串型转数字型
通过字符串类型和数字类型使用乘号运算符拼接得到的是数字类型。

1 var a = "";
2 var b = 1;
3 var c = a * b;
4 console.log(c);            //1
5 console.log(typeof c);    //number

通过Number()方法返回数字，将字符串类型值转换为数字类型值。

1 var a = Number("2021") + 1;
2 console.log(a);            //2022
3 console.log(typeof a);    //number

通过parseInt()方法解析一段字符串并返回数值。

1 var a = parseInt("5a7b6");
2 console.log(a);            //5
3 console.log(typeof a);    //number

注意：parseInt()方法允许空格且只返回首个数字，上面的示例开头数字是5，所以最后返回的数值结果就是5。

1 var a = parseInt("1024");
2 console.log(a);            //1024
3 console.log(typeof a);    //number

所以说如果parseInt()方法中解析的字符串首字母不是数字的话返回的值就是NaN。

1 var a = parseInt("3.14");
2 console.log(a);            //3
3 console.log(typeof a);    //number

通过parseFloat()方法解析一段字符串并返回数值。

1 var a = parseFloat("3.14a");
2 console.log(a);            //3.14
3 console.log(typeof a);    //number

注意：parseFloat()方法允许空格且只返回首个数字，上面的示例开头数字是3.14，所以最后返回的数值结果就是3.14。

1 var a = parseFloat("3.14");
2 console.log(a);            //3.14
3 console.log(typeof a);    //number

所以说如果parseFloat()方法中解析的字符串首字母不是数字的话返回的值就是NaN。

1 var a = parseFloat("ab12c");
2 console.log(a);            //NaN
3 console.log(typeof a);    //number

数字型转字符串型
通过字符串类型和数字类型进行拼接将数字类型的值转换为字符串类型值。

1 var a = '';
2 var b = 1;
3 var c = a + b;
4 console.log(c);            //1
5 console.log(typeof c);    //string

3.字符串拼接

字符串与字符串拼接得到的结果还是字符串类型。

1 var a = 'java';
2 var b = "script";
3 var c = a + b;
4 console.log(c);                //javascript
5 console.log(typeof c);        //string

4.常用特殊字符串

字符串	含义	示例
\ ' '‘	\是转义字符，当我们 想要在字符串中去使用 引号的时候需要用到 这个字符，使用这个字 符对引号进行转义最终 输出的结果才是正常的结 果，否则JavaScript 可能会将相同的引号匹 配错误从而造成值的截断。 当然，我们在字符串中 使用\本身的时候也需要使用另一个\将\本 身进行转义，否则JavaScript 会认为\本体是一个转义字符。	var a = ‘I don’t konw’;以上的做法是错误的，因为JavaScript会将”I don’t”视为字符串，而其余部分则是无效代码，从而截断了后面的部分，我们应该是这样去做： var a = ‘I don't know’;var a = “I don’t know”;var a = ‘“Hello”,World’;var a = “"Hello",World”;
\n	换行符	var a = ‘\n1\n2\n3\n’;console.log(a);123
\r	回车符	var a = ‘1\r\n2’;console.log(a);”12”
\t	制表符	var a = “1\t2”;console.log(a);”12”
\u	\u后面的字符会被视为Unicode码	下面是作者的名字在保加利亚语中用西里尔字母的拼写：”\u0421\u0442\u043E\u044F\u043D”; “”Стoян””

4.布尔型

布尔类型只有true和false两种值，一般作为判断语句去使用。

布尔类型在使用typeof操作符的时候返回的值类型是boolean类型。

在JavaScript中有三种布尔运算的运算符，分别是：

• !——逻辑非（取反）；
• &&——逻辑与；
• ||——逻辑或；

其中，逻辑非代表事物不是真的状态，逻辑与是代表当前事物和操作中所有的一切都是真最终结果才为真，只要有一个不满足就为假，即使是另外的条件满足。逻辑或则是多个条件中其中一个条件满足就为真，只有都为假的时候才能为假。

以下表列出相应情况

操作	结果
true && true	true
true && false	false
false && true	false
false && false	false
true || true	true
true || false	true
false || true	true
false || false	false

注意：在或、与、非三个布尔运算符之中优先级为!（非）>&&（或）>||（与）。
当然，在JavaScript中，还有另一组以布尔值为返回值类型的操作符，我们称之为比较运算符。

操作符	操作说明	代码示例
==	相等运算符，即当两个 操作数相等时返回true， 比较的时候运算符两边 的数值会被自动转换为相同的类型。	console.log(1 == 1);trueconsole.log(1 == 2);falseconsole.log(1 == ‘1’);true
===	严格相等运算符，当两边 的操作数的值和类型都 相同的时候才返回true， 可以说是全等于这类型的。这是一种比较全面可靠的 比较，因为这样的比较 不会出现可能发生的某个操作数 类型转换再比较。	console.log(1 === 1);trueconsole.log(1 === ‘1’);false
!=	不相等运算符，当两边 的操作数不相等的时候 返回true，这种比较是会进行类型转换为 相同类型进行比较。	console.log(1 != 1);falseconsole.log(1 != ‘1’);falseconsole.log(1 != ‘2’);true
!==	严格不相等运算符，当两边 的操作数的值和类型都不相同 的时候才返回true， 可以说是全不等于这类型的。这是一种比较全面可靠的比较， 因为这样的比较不会出现可能发生的某个操作数 类型转换再比较。	console.log(1 !== 1);falseconsole.log(1 !== ‘1’);true
>	当符号左边的数大于右边的数的时候返回true。	1 > 1;false2 > 1;true
>=	当符号左边的数大于等于右边的数的时候返回true。	1 >= 1;true1>= 2;false
<	当符号左边的数小于右边的数的时候返回true。	1 < 1;false1 < 2;true
<=	当符号左边的数小于等于右边的数的时候返回true。	1 <= 1;true2 <= 1;false

注意：NaN不等于任何东西，哪怕是自己，例如NaN == NaN;返回值也为false。

数组

1.什么是数组？

数组是一个用于存储数据的列表，这个列表可以存放任意数量的元素值。
示例：

1 var a = [1,2,3];
2 console.log(a);        //[1,2,3]

记住，元素在数组中的索引位置下标是从0开始的，所以数组元素的首个索引值是0，第二个元素索引值是1，以此类推。

1 var a = [1,2,3];
2 console.log(a[0]);        //1
3 console.log(a[1]);        //2
4 console.log(a[2]);        //3

2.数组的特点

• 数组是一种数据存储形式。
• 数组是可以被索引的。
• 数组中的元素索引值是从0开始，按照每个元素的位置去依次递增。
• 数组能存储任何类型的数据，包括另一个数组。
• 我们可以对数组进行增删改查。
• 我们可以通过数组访问的方式去获取字符串中特定位置上的字符。

3.关于数组元素的增加和更新

我们可以通过索引去直接增加或者更新数组中的元素，例如：

1 var a = [1,2,3];
2 a[1] = "two";        //修改元素索引值为1的数
3 a[3] = "four";        //增加元素索引值为3的地方
4 a[5] = "six";        //增加元素索引值为6的地方，索引值为5的地方在控制台上输出的时候是空值
5 console.log(a);        //[1, "two", 3, "four", empty, "six"]

4.关于数组元素的删除

删除数组中特定的元素我们需要使用delete操作符去实现操作。

1 var a = [1,2,3];
2 delete a[1];
3 console.log(a);        // [1, empty, 3]

5.利用数组访问字符串

我们可以通过数组访问的方式去获取字符串中特定位置上的字符。

1 var a = 'abc';
2 console.log(a[0]);        //a
3 console.log(a[1]);        //b
4 console.log(a[2]);        //c

条件与循环

条件与循环是实际开发过程中重要的一部分，通过使用条件我们可以控制一段代码的执行走向，通过循环我们可以重复去执行某段代码。

1.if条件表达式

if条件表达式主要由if语句、语句条件、执行的代码块以及代码块内部的执行语句组成。其中语句条件是指逻辑类或者是比较类并返回布尔值类型的操作语句组成。

2.else语句

else语句是if语句的可选项，运用于if语句表达式条件返回值为false的时候去执行该部分所包含的语句。

举个栗子：

1 var a = 2;
2 if(a > 2) {
3     console.log("a是一个大于2的数字");
4 } else {
5     console.log("a不是大于2的数字");
6 }

此外我们还有else if语句，也是if语句的可选项，是分支判断语句，例如：

1 var a = 2;
2 if(a == 1) {
3     console.log("a = 1");
4 } else if(a == 2) {
5     console.log("a = 2");
6 } else {
7     console.log("a不满足上述条件");
8 }

3.switch语句

当if语句中出现过多的else if语句的时候，最好使用switch语句进行条件的判断。

 1 var a = 1;
 2 var result = '';
 3 switch(a) {
 4     case 1:
 5         result = 'Number 1';
 6         break;
 7     case 2:
 8         result = 'Number 2';
 9         break;
10     default:
11         result = 'Number X';
12         break;
13 }
14 console.log(result);
15 //输出结果：Number 1

switch语句的组成部分及其作用

• switch子句。
• 括号表达式。表达式通常是一个变量，有时候也可以是其它能够提供返回值的东西。
• 包含在switch语句大括号中的case序列块。
• 每个case语句下的表达式，如果表达式结果与switch语句表达式对比结果为true则case语句冒号之后的代码会被执行。
• break语句是可选的，当代码执行到break语句时，就跳出当前循环结束整个过程的执行。
• default关键字是默认条件代码块，当case条件的语句都不为true的时候，就执行default条件里的语句。

4.循环

通过循环语句我们可以使某段代码可以反复执行，便于操作。

在JavaScript中，循环分为四种类型：

• while循环；
• do-while循环；
• for循环；
• for-in循环。

1.while循环

while循环语句分为小括号中的条件和大括号中的代码块,当小括号中的条件为true的时候会执行。

1 var a = 0;
2 while(a < 10) {
3     a++;
4 }
5 console.log(a);

2.do-while循环

do-while循环和while循环没有多大的区别，只不过是do-while循环里的代码块会至少执行一次，先执行，后判断。

1 var a = 0;
2 do {
3     a++;
4 } while(a < 10);
5 console.log(a);

3.for循环

for循环主要包括以下内容：

• 初始化部分定义一个循环变量，例如var i = 0;
• 条件部分将i与循环边界值进行对比。例如i < 10;
• 自增部分将循环变量i自增1，例如i++。

举个栗子：

1 var a = '';
2 for(var i = 0;i < 10;i++) {
3     a = 'Hello World';
4 }
5 console.log("输出" + a);

可以这样去表示：

1 for(var i = 0,a = '';i < 10;i++) {
2     a = 'Hello World';
3 }
4 console.log("输出" + a);

不过这样写的话可读性会变得很差，所以并不建议这样写。
for循环彼此之间可以进行嵌套。

1 for(var i = 0;i < 10;i++) {
2     for(var j = 0;j < 10;j++) {
3         
4     }
5 }

4.for-in循环

for-in循环往往被用来遍历某个数组中的元素。

示例：

1 var a = ['a','b','c','d','e'];
2 var result = '\n';
3 for(var i in a) {
4     result = 'index:' + i +',value:' + a[i] + '\n';
5     console.log(result);
6 }

总结

这部分内容主要介绍了JavaScript中的基本数据类型、数组、循环以及条件表达式的常规应用，尤其在数组方面并没有介绍全面，在后面的学习中再学到更多的应用时再做补充。