Day02_JavaScript课堂笔记

Day02 JavaScript 笔记

1 回顾

① JS 在 HTML 中的使用

1. 行内式
2. 内嵌式
3. 外链式

② JS 的基本语法

1. 语法特点：
   严格区分大小写
   每条语句后面有指令结束符：分号或者换行
   
2. 注释
   //
   /* */
   
3. 输出内容
   alert()
   document.write()
   console.log()

③ 变量

1. 数据、直接量、变量
2. 变量的必要性： 数据重复使用、前后数据一致
3. 变量的语法：
   var 关键字，声明变量（创建变量）
   变量的值可以修改，给变量赋值
   逗号，同时声明多个变量
4. 变量名命名规范   

④ 数据类型

1. number
   ① 整型： 十进制表示法、八进制表示法、十六进制表示法
   ② 浮点型 
   ③ 科学计数法
   ③ NaN   isNaN()
   ⑤ 数字有效范围  Infinity -Infinity    isFinite()


2. string
	① 表示字符串： 单引号 双引号
	② 转义字符： \n   \'  \"  \\  \uXXXX


3. boolean
    true
    false

4. null
   typeof() 返回 object

5. undefined
	变量没有赋值，默认是 undefined

2 数据类型转换

2.1 数据类型转换的规则

① 其他类型转为 number 类型

1. string -> number
   ① 纯数字字符串转为对应的有效数字（注意：十六进制形式、科学计数法虽然包含字母，但是仍然是纯数字）
   ② 空字符串转为 0
   ③ 其他转为 NaN
   ④ 注意： 字符串会自动去掉两边的空格，再进行 number 转换（只去掉两端的空格！）

2. boolean -> number
   true 转为 1
   false 转为 0
   
3. null -> number
   转为 0
   
4. undefined -> number
   转为 NaN

② 其他类型转为 string 类型

数据什么样转为字符串就什么样！

③ 其他类型转为 boolean 类型

1. number -> boolean
   ① 0 转为 false， NaN 转为 false
   ② 其他都转为 true
   
2. string -> boolean
   ① 空字符转为 false
   ② 其他都转为 true
   
3. null -> boolean
   转为 false
   
4. undefined -> boolean
   转为 false

0、NaN、空字符串、null、undefined 转为 false；其他数据全转为 true！

2.2 强制类型转换（显示转换）

① 强制把其他类型转为 number 类型的函数

Number()
parseInt()
parseFloat()

parseInt()、parseFloat() 与 Number() 的区别：

1. parseInt() 和 parseFloat() 用于从字符串中提取数字， 纯数字字符串和以数字开头的字符串可以转为有效数字，不会把十六进制当做纯数字，其他所有的字符串都转为NaN，布尔值、null、undefined 全转为 NaN
2. Number() 是标准的数据转换规则。

parseFloat() 和 parseInt 的区别：

1. parseFloat() 可以提取到小数
2. parseInt() 值提取整数

② 强制把其他类型转为 string 类型的函数

String()

③ 强制把其他类型转为 boolean 类型的函数

Boolean()

2.3 自动类型转换（隐式转换）

1. 如果数据类型不符合运算的要求，就会自动转为运算所要求的数据类型
2. 运算需要什么数据类型由运算符决定
3. 自动类型转换的规则与强制类型转换一致，Number()、String()、Boolean()

3 运算符

3.1 运算符和表达式

① 运算符

1. 进行运算的符号就是运算符，如 +、-、*、/、% 等
2. 与运算符一起运算的数据，称为运算符的操作数。 操作数可以是直接量、变量或表达式。

② 表达式

1. 表达式是由运算符、数据（变量或直接量）组成的公式，表达式一定会有个计算结果，称为表达式的值，表达式一定是有值的。
2. 最简单的表达式称为“原始表达式”，如一个变量、一个直接量。
3. 多个简单的表达式可以组成一个复杂的表达式。
4. 有些表达式具有副作用，副作用由运算符决定，副作用指的是不但能够得到表达式的值，还会改变参与运算的操作数（变量形式）的值。

3.2 运算符的分类

① 按照运算符需要的操作数的个数

一元运算符
二元运算符
三元运算符

② 按照运算符的功能

1. 算术运算符
2. 比较运算符（关系运算符）
3. 逻辑运算符
4. 赋值运算符
5. 位运算符
6. 其他运算符

3.3 运算符讲解（按照功能）

① 算术运算符

运算符	含义	操作数个数	操作数的类型要求	组成的表达式的值的类型	有无副作用
+	加	2	number	number	无
-	减	2	number	number	无
*	乘	2	number	number	无
/	除	2	number	number	无
%	取余（取模）	2	number	number	无
+	正号	1	number	number	无
-	负号	1	number	number	无
++	累加	1	number	number	有
–	累减	1	number	number	有

+ 什么时候是正号？什么时候是加号？

如果操作数个数只有一个，+ 就是正号
如果操作数个数有两个，+ 就是加号

累加累减： 运算符在前和在后的区别：

1. 累加累减运算符不论在前在后，对操作数的副作用没有区别
2. 累加累减运算符在前和在后组成的表达式的值是不同的：
   ① 操作数在前，累加或累减运算符在后： 操作数没有运算符之前的值作为表达式的值。
   ② 累加或累减运算符在前，操作数在后： 操作数先累加或累减，把运算之后的值作为表达式的值。

② 关系运算符（比较运算符）

运算符	含义	操作数个数	操作数的类型要求	组成的表达式的值的类型	有无副作用
>	大于	2	number 如果两个操作数都是 string，按照字符串比较规则	boolean	无
>=	大于等于	2	number 如果两个操作数都是 string，按照字符串比较规则	boolean	无
<	小于	2	number 如果两个操作数都是 string，按照字符串比较规则	boolean	无
<=	小于等于	2	number 如果两个操作数都是 string，按照字符串比较规则	boolean	无
==	相等	2	两个操作数类型一致：直接看值是否一样。 两个操作数类型不一致：转为 number 进行比较	boolean	无
!=	不相等	2	两个操作数类型一致：直接看值是否一样。 两个操作数类型不一致：转为 number 进行比较	boolean	无
===	全等	2	不会发生数据类型自动转换 类型不一致直接不全等	boolean	无
!==	不全等	2	不会发生数据类型自动转换 类型不一致直接不全等	boolean	无

字符串比较大小的规则：

1. > >= < <= 比较大小，如果两个操作数都是字符串，按照字符串的规则比较大小。
2. 比较的是字符对应的 unicode 编码
3. 按位一个字符一个字符的比较，字符如果大，整个字符串都大

null 与其他数据判断相等和不相等（特殊）：

null == 0;			// false
null == '';			// false
null == false;		// false
null == undefined;  // true

全等判断和相等判断的区别：

相等判断（== 和 !=）,类型不一致，转为 number 进行比较
全等判断（=== 和 !==）,类型不一致，直接不全等，不会发生自动类型转换

推荐使用全等判断！

③ 逻辑运算符

运算符	含义	操作数个数	操作数的类型要求	组成的表达式的值的类型	有无副作用
&&	逻辑与	2	boolean	其中一个操作位作为表达式的值	无
||	逻辑或	2	boolean	其中一个操作位作为表达式的值	无
!	逻辑非	1	boolean	boolean	无

逻辑与运算符组成的表达式的值：

1. 如果第一个操作数成立，以第二个操作数作为表达式的值。
2. 如果第一个操作数不成立，以第一个操作数作为表达式的值，第二个操作不会被执行到。

逻辑或运算符组成的表达式的值：

1. 如果第一个操作数成立，以第一个操作数作为表达式的值，第二个操作数不会被执行到。
2. 如果第一个操作数不成立，以第二个操作数作为表达式的值。

④ 赋值运算符

运算符	含义	操作数个数	操作数的类型要求	组成的表达式的值的类型	有无副作用
=	赋值	2	没有要求，左边操作数必须是变量形式。	左边操作数新赋值之后的值 number	有
+=	赋值相加	2	number	左边操作数新赋值之后的值 number	有
-=	赋值相减	2	number	左边操作数新赋值之后的值 number	有
*=	赋值相乘	2	number	左边操作数新赋值之后的值 number	有
/=	赋值相除	2	number	左边操作数新赋值之后的值 number	有
%=	赋值取余	2	number	左边操作数新赋值之后的值 number	有
+=	字符串连接赋值	2	string	左边操作数新赋值之后的值 string	有

⑤ 其他运算符

运算符	含义	操作数个数	操作数的类型要求	组成的表达式的值的类型	有无副作用
+	字符串连接符	2	string	string	无
typeof	判断操作数的类型	1	没有	string	无
,	逗号运算符	2	没有	把第二个操作数作为表达式的值	无
?:	条件运算符	3	第一个操作数：boolean	第二个和第三个选一个	无

+ 什么时候是 加号、字符串连接符或者正号？

1. 如果 + 只有一个操作数，+ 就是正号
2. 如果 + 有两个操作数，且其中一个是string，+ 是字符串连接符
3. 如果 + 有两个操作数，操作数中没有 string，+ 就是 加号

条件运算符组成的表达式的取值规则：

操作数1 ? 操作数2 ： 操作数3

1. 如果操作数1是成立，以操作数2作为表达式的值
2. 如果操作数1是不成立，以操作数3作为表达式的值

简单练习

1. 写出输出结果

var n = 100;
console.log(n ++ && n --);
console.log(n);
console.log(-- n || n ++);
console.log(n);  

2. 字符串拼接练习：

定义变量 姓名、性别、家乡、爱好、期望薪资
使用变量拼接如下字符串：
我的名字叫XXX,性别XXX,我来自XXX,我的业余爱好是XXX,我学习后的期望薪资是XXX K;