运算符
一 概念
#### 1、算数运算符
前提：n = 5
<table>
<tr>
<th>运算符</th>
<th>描述</th>
<th>例子</th>
<th>x结果</th>
<th>n结果</th>
</tr>
<tr>
<td>+</td>
<td>加法</td>
<td>x=n+2</td>
<td>7</td>
<td>5</td>
</tr>
<tr>
<td>-</td>
<td>减法</td>
<td>x=n-2</td>
<td>3</td>
<td>5</td>
</tr>
<tr>
<td>*</td>
<td>乘法</td>
<td>x=n*2</td>
<td>10</td>
<td>5</td>
</tr>
<tr>
<td>/</td>
<td>除法</td>
<td>x=n/2</td>
<td>2.5</td>
<td>5</td>
</tr>
<tr>
<td>%</td>
<td>取模(余数)</td>
<td>x=n/2</td>
<td>1</td>
<td>5</td>
</tr>
<tr>
<td rowspan="2">++</td>
<td rowspan="2">自增</td>
<td>x=++n</td>
<td>6</td>
<td>6</td>
</tr>
<tr>
<td>x=n++</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td rowspan="2">--</td>
<td rowspan="2">自减</td>
<td>x=--n</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td>x=n--</td>
<td>5</td>
<td>4</td>
</tr>
</table>
#### 2、赋值运算符
前提：x=5，y=5
| 运算符 | 例子 | 等同于 | 运算结果 |
| :----- | :--- | ------ | -------- |
| = | x=y | | 5 |
| += | x+=y | x=x+y | 10 |
| -= | x-=y | x=x-y | 0 |
| *= | x*=y | x=x*y | 25 |
| /= | x/=y | x=x/y | 1 |
| %= | x%=y | x=x%y | 0 |
#### 3、比较运算符
前提：x=5
| 运算符 | 描述 | 比较 | 结果 |
| ------ | ---------- | ------- | ----- |
| == | 等于 | x=="5" | true |
| === | 绝对等于 | x==="5" | false |
| != | 不等于 | x!="5" | fales |
| !== | 不绝对等于 | x!=="5" | true |
| > | 大于 | x>5 | false |
| < | 小于 | x<5 | false |
| >= | 大于等于 | x>=5 | true |
| <= | 小于等于 | x<=5 | true |
#### 4、逻辑运算符
前提：n=5
| 运算符 | 描述 | 例子 | 结果 |
| ------ | ---- | ------------- | ------------------- |
| && | 与 | x=n>10&&++n | x=false,n=5（短路） |
| \|\| | 或 | x=n<10\|\|n-- | x=true,n=5（短路） |
| ! | 非 | x=!n | x=false,x=5 |
#### 5、三目运算符
```js
// 结果 = 条件表达式 ? 结果1 : 结果2;
// eg:
var tq = prompt("天气(晴|雨)")
var res = tq == '晴' ? "今天天气挺好" : "请假回家收衣服";
console.log(res);
```
#### 6、ES6语法解构赋值
- 数组的解构赋值
```js
let [a, b, c] = [1, 2, 3]
// a=1,b=2,c=3
let [a, ...b] = [1, 2, 3]
// a=1,b=[2,3]
```
- 对象的解构赋值
```js
let {key: a} = {key: 10}
// a=10
```
- 字符串解构赋值
```js
let [a,b,c] = 'xyz'
// a='x',b='y',c='z'
```
二 代码示范
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>运算符</title>
</head>
<body>
运算符
</body>
<script type="text/javascript">
// 一.算数运算符
var a = 5;
var res = a / 2;
// 只存在number类型运算
console.log(res); // 2.5
var res = a % 2;
console.log(res); // 商为2余1 1
// 自增自减
// 总结:
// 1.++/--在前在后,自身值一定改变, a++/++a => a = a + 1
// 2.++/--在前先自运算,再他运算
// 1.++/--在后先他运算,再自运算
// a=5
var res = a++;
console.log("res:" + res + ", a:" + a); // 5, 6
// a=6
var res = ++a;
console.log("res:" + res + ", a:" + a); // 7, 7
// 二.赋值运算符
// 三.比较运算符
console.log('5' == 5); // true, 值相等即可
console.log('5' === 5); // false, 值与类型均要相等
console.log('5' != 5); // fasle
console.log('5' !== 5); // true
// 四.逻辑运算符
// 运算结果为true|false
var a = 10;
var b = 20;
var c = 30;
var res = a < b && c == 30;
console.log(res);
// 真,真 => 真
// 真,假 => 假
// 假,真 => 假 短路
// 假,假 => 假 短路
// &&运算,有假即假,所有前面为假,后面没必要被执行,所以被短路
// 短路
var res = a > b && ++c;
console.log(res, c); // c=30
// ||运算,有真即真,所有前面为真,后面没必要被执行,所以被短路
// 真,真 => 真 短路
// 真,假 => 真 短路
// 假,真 => 真
// 假,假 => 假
// !运算,真则假,假则真,负负得正
console.log(!1, !!1);
// 三目运算符(三元运算符)
// 结果 = 条件表达式 ? 结果1 : 结果2;
// 结果不一样要与表达式有关系,但表达式为真则结果为结果1,反之为结果2,
var tq = prompt("天气(晴|雨)")
var res = tq == '晴' ? "今天天气挺好" : "请假回家收衣服";
console.log(res);
</script>
</html>
