js基础一

Posted 2020-08-14

## js三种引入方式（内嵌（用得少）、内联、外联）
1、内联：（写在head标签里）
```
<script type="text/javascript">
console.log("hello world");
</script>
```
2、外联：（写在body内容的最后面，便于优化用户体验，减少加载时间，先加载出网页的结构和样
式，最后加载行为部分）
```
<script type="text/javascript" src="js文件路径（相对路径）"></script>
```
## 声明变量
var a;（声明变量a）
a=10; (a赋值为10）
简写为var a=10;
## 数据类型 （共5种）
分别为数值类型（number）、字符串类型（string）、布尔值类型（boolean）、null（空)和undefined（未定义），前三种有含义，后两种无含义。
### 数值类型
```var a;
a=20;```
### 字串符类型
```var a;
a=‘hello‘```

注：字符串外面用‘’和""都可以，但是‘‘更专业。
a=‘what\‘s\” this‘
\为转译，即把原本的意思转换掉；\n为换行符
### 布尔值类型
true或false
## 变量名起名规则
- 第一个字符可以是任意Unicode大小写字母，以及美元符号($)和下划线(_)。
- 第二个字符及后面的字符，还可以用数字。
- 不能使用保留字作为变量名也不能用符号

##### *JavaScript保留字*
`abstract`
`boolean` `break` `byte`
`case` `catch` `char` `class` `const` `continue`
`debugger` `default` `delete` `do` `double`
`else` `enum` `export` `extends`
`false` `final` `finally` `float` `for` `function`
`goto`
`if` `implements` `import` `in` `instanceof` `int` `interface`
`long`
`native` `new` `null`
`package` `private` `protected` `public`
`return`
`short` `static` `super` `switch` `synchronized`
`this` `throw` `throws` `transient` `true` `try` `typeof`
`var` `void` `volatile`
`while` `with`
# 操作符
## 一元操作符（只有一个操作数）
### 递增操作符（++）递减操作符（--）
a++和++a都是递增，但是意义不同
- 自增操作符放在操作数的前面（++a），会把操作数加1之后的值作为返回值。
- 自增操作符放在操作数的后面（a++），会把操作数加一之前的值作为返回值。

```
var a=10;
var b=(a++)+(++a);
console.log(a,b); 12 22
```

### 一元减操作符（-）
取操作数的相反数，也可将其他类型的数据转换为数字类型。
### 一元加操作符（+）
取操作数本身，也可将其他类型的数据转换为数字类型。
### typeof操作符
返回值是操作数的类型的名称的字符串。
## 二元操作符
### 算术操作符
`+` `-` `*` `/` `%`

注：算术操作符对操作数的类型无限制，都会转换为数字类型，除了+。

```
console.log(10+20); 30 算术加法操作符
console.log(10+‘20‘) 1020 字符串拼接操作符
```
判断规则：
只要2个操作数中有一个或2个都为字符串，那么+为拼接操作符。
## 逻辑运算符
### 逻辑非运算符（一元） （！操作数）
用法：
- 先求操作数的布尔值
- 返回值为布尔值相反的情况

注：返回值为布尔值
任意类型都可转为布尔值
- 如果为对象-true
- 空字符串-false
- 非空字符串-true
- 数值0-false
- 任意非0数值（包括infinity）-true
- null-false
- undefined-false
- NaN-false
###逻辑与操作符 （&&）

用法：对第一个操作数取布尔值，若布尔值为true,返回值为第2个操作数，若布尔值为false，返回值为第1个操作数。
- 注：返回值可为任意类型数据。

### 逻辑或操作符 （||)
用法：对第一个操作数取布尔值，若布尔值为true,返回值为第1个操作数，若布尔值为false，返回值为第2个操作数。
- 注：返回值可为任意类型数据。

### 短路操作
在与操作符和或操作符中，如果第一个操作数就已经能确定最终返回的结果，那么就不会去计算第二个操作数了。
```
var a=10;
var b=true&&（a++）
console.log(a,b); 11 10
```
```
var a=10;
var b=false &&（a++）
console.log(a,b); 10 false
```

## 关系操作符
小于(`<`)、大于(`>`)、小于等于(`<=`)、大于等于(`>=`)这几个关系操作符用于对两个值进行比较，比较的规则与我们在上数学课上所学的一样。这几个操作符都会返回一个布尔值
## 相等操作符 （返回值为布尔值）
相等操作符(`==`)、不相等操作符(`!=`)、全等操作符(`===`)、不全等操作符(`!==`)
#### 相等和不相等 => 先转换为相同类型再比较
#### 全等和不全等 => 仅比较而不转换类型（优先使用）
## 赋值操作符
简单的赋值操作符由等于号(`=`)表示，起作用就是把右侧的值赋给左侧的变量。

## 条件操作符(三目运算符)
`boolean_expression ? true_value : false_value`

用法：第一个操作数为true，返回值为第二个操作数
第一个操作数为false，返回值为第三个操作数

# 运算符的优先级

| 运算符 | 描述 |
| ---------------------------------------- | -------------------------- |
| `++` `--` `-` `+` `~` `!` `delete` `new` `typeof` `void` | 一元运算符、返回数据类型、对象创建、未定义值 |
| `*` `/` `%` | 乘法、除法、取模 |
| `+` `-` `+` | 加法、减法、字符串连接 |
| `<<` `>>` `>>>` | 移位 |
| `<` `<=` `>` `>=` `instanceof` | 小于、小于等于、大于、大于等于、instanceof |
| `==` `!=` `===` `!==` | 等于、不等于、严格相等、非严格相等 |
| `&&` | 逻辑与 |
|\\\\| 逻辑或 |
| `?:` | 条件 |
| `=` | 赋值、 |
运算赋值

下表按从最高到最低的优先级列出JavaScript运算符。具有相同优先级的运算符按从左至右的顺序求值。
# 条件语句
JavaScript提供`if`结构和`switch`结构，完成条件判断。
## `if` 结构
语法:
```javascript
if(表达式1){
表达式2;
}
表达式3;
```
**说明**: 若表达式1成立，才会执行表达式2,不成立执行表达式3
## if...else... 语句
语法:
```javascript
if(表达式1) {
表达式2;
} else {
表达式3;
}
表达式4;
```
**说明**: 程序判断表达式1,成立执行表达式2,不成立执行表达式3,再执行表达式4
## if...else if...
```javascript
if(表达式1) {
表达式2;
} else if(表达式3) {
表达式4;
} else if(表达式5) {
表达式6;
} else {
表达式7;
}
表达式8;
```

## switch结构
```javascript
var a = 1;
switch(a) {
case 1 :
console.log(1);
break;
case 2 :
console.log(2);
break;
case 3 :
console.log(3);
break;
default :
console.log("default");
}