Web Frontend Development (6) - JavaScript 02

Week Six: Web Frontend Development(6)—JavaScript 02

6. 运算符

运算符也叫操作符，可以对一个或多个值进行运算，并获取运算结果。

比如typeof就是运算符，可以获得一个值得类型
它会将该值得类型以字符串形式返回

6.1 算数运算符

对非Number类型的值进行运算时，会转换成Number
任何值与NaN运算都得NaN
+
- 两个字符串相加得一个新的字符串
- 任何值和字符串做加法运算，都会先转换为字符串，再进行拼接。
- 可以进行类型转换为string
-
- 任何值和字符串做除加法运算，都会先转换为数值，进行运算。
- 可以进行类型转换为number
*
/
%取模运算，取余数。

6.2 一元运算符

只需要一个操作数

+ 正号
- 负号
- 对与非Number值，先转换为Number
- 可以对其他数据类型使用+，来转换为Number
```
a = 1 + '2' + 3
"123"
a = 1 + +'2' + 3
6
```

6.3 自增和自减

自增++

自增可以使变量自身基础上加1
对于一个变量自增以后，原变量的值会立即自增1
自增分为两种，后++（a++） 和 前++（++a）
- 无论a++还是++a，都会使原变量值增加1
- a++的值等于原变量的值（自增前的值）
- ++a的值等于新值（自增后的值）

var a = 1
undefined
a++
1
a
2
++a
3
a
3

var c = 10
c++ /*第一次c++，是在10的基础上自增*/
10
console.log(c++) /*第二次c++,是在11的基础上自增*/
11
c/*c自增两次，变为12*/
12

var d = 20
var result = d++ + ++d + d /*20 + 22 + 22*/
result
64

自减--

自身基础上减1
同上自增

var num = 10
num--
10
num
9
<!---->
var num = 10
--num
9
num
9

6.4 自增练习

var n1 = 10 , n2 = 20;
var n = n1++;/*n=n1++=10, n1=10*/
console.log('n=' + n);/*10*/
console.log('n1=' + n1);/*11*/
n = ++n1;
console.log('n=' +n);/*12*/
console.log('n1='+n1);/*12*/
n = n2--;
console.log('n=' +n);/*20*/
console.log('n2='+n2);/*19*/
n = --n2;
console.log('n=' +n);/*18*/
console.log('n2='+n2);/*18*/
<!---->
n=10
n1=11
n=12
n1=12
n=20
n2=19
n=18
n2=18

6.5 逻辑运算符

! not
- !可以对一个值进行非运算：true变false；false变true
- 如果对一个值进行两次取反，它不会变化。
- 如果对非布尔值进行运算，则会将其转换为布尔值，再取反。
  - 可以利用该特点，对任何一个其他数据类型转换为布尔值
  - 可以对任意一个数据类型两次取反，转换为布尔值，原理和Boolean()函数一样。
```
! true
false
var a = 10 /*转换为布尔值true*/
!a
false
a = 0
!a
true
!!a
false
```

&& and (像爱情必须是双向的)

可以对符号两侧的值进行与运算。
JS中与属于短路的与,如果第一个值为false&&，则不会看后面的值

true && true
true
true && false
false
false && false
false
false && "Hello World"/*第一个值为false,不检查后面的*/
false
true && "hello world"/*第一个值为true,检查后面的元素*/
"hello world"

|| or (像亲情是一方付出的多)
- 对符号两侧的值进行或运算
- 只要有一个true就返回true
- JS中或与属于短路的或,如果第一个值为true||，则不会看后面的值。
- 第一个值为false||，会检查之后的值。
```
false || false
false
true || false
true
false|| true
true
true||"hello worlde"
true
```

6.6 非布尔值的或|| 与&&运算

对于非布尔值进行与或运算，会先将其转换为布尔值，然后再运算。
&&
- 如果第一个值为true，则必然返回第二个值
- 如果第一个值为false，则直接返回第一个值

`||`

如果第一个值为true，则直接返回第一个值
如果第一个值为false，则返回第二个值

0 && false
0
true && ""
""
NaN && 0
NaN
0 && NaN
0
1 && NaN
NaN
<--!!-->
1 || 2
1
"" || 0
0
0 || NaN
NaN
2 || NaN
2

6.7 赋值运算符

=可以将符号右侧的值赋值给左侧变量
+=: a += 5 等价于 a = a + 5
-= : a -= 5 等价于 a = a - 5
*=: a *= 5 等价于 a = a * 5
/=: a /= 5 等价于 a = a / 5
%=: a %= 5 等价于 a = a % 5

6.8 关系运算符

>,>=,<,<=

任何值和NaN比较都是false
比较两个字符串时，比较的是字符串的字符编码
比较字符编码时是一位一位进行比较
如果两位一样，则比较下一位，所以借用它来对英文进行排序。
比较中文时没有意义
如果比较两个字符串型的数字，可能会得到不可预期的结果。
比较两个字符串的数字时，一定一定要转型。+、-号转型

6.9 Unicode编码表

使用字符串中使用转义字符\u输入Unicode编码
```
console.log("\u2620")
☠
  
```

在网页中使用Unicode编码 &#;，需转换为10进制

<body>
       <h1 style = "font-size: 300px"> &#9760;</h1>
</body>

6.10 相等运算符

==

当==用来比较两个值时，如果值的类型不同，则会自动进行类型转换，转换为相同类型，然后再比较。

console.log("1" == 1)
true
  
true == "1"
true
  
null == 0
false
  
undefined == null
true
  
NaN == NaN
false

NaN不和任何值相等，包括它本身。
- 可以通过isNaN()函数判断是否为NaN

!=

不相等也会对变量进行自动的类型转换，转换后相等，它也会返回false。

===

判断两值是否全等，类型不一样直接返回false。

!==

判断两值是否不全等，类型不一样直接返回true。
```
1 === "1"
false
  
1 !== "1"
true
```

6.11 条件运算符

也叫三元运算符。
语法：条件表达式？语句1：语句2；

执行流程：

如果条件为true，则执行语句1；

如果条件为false，则执行语句2；

a = 30
30
b = 20
20
a> b? a:b
30
<--!-->
b = 40
40
a > b? a:b
40
c = 50
50
<--!-->
max = b
40
max = max > c ? max : c /*判断多个数值大小*/
50
<--!-->
"Hello"? a:b /*"Hello" = true*/
30

如果表达式求值是一个非布尔值，会自动转换为布尔值，然后再计算。

6.12 运算符优先级

表中越靠上，优先级越高。

运算符	描述
. [] ()	字段访问、数组下标、函数调用以及表达式分组
++ – - ~ ! delete new typeof void	一元运算符、返回数据类型、对象创建、未定义值
* / %	乘法、除法、取模
+ - +	加法、减法、字符串连接
« » »>	移位
< <= > >= instanceof	小于、小于等于、大于、大于等于、instanceof
== != === !==	等于、不等于、严格相等、非严格相等
&	按位与
^	按位异或
\|	按位或
&&	逻辑与
\|\|	逻辑或
?:	条件
= oP=	赋值、运算赋值
,	多重求值

可以用()改变优先级

PREVIOUSIntroduction to Computational Thinking and Data Science(3)

NEXTWeb Frontend Development (5) - JavaScript 01