JavaScript-20220802

复习第一天的内容

1、浏览器端JS的组成
    ES:语法规定
    BOM：浏览器所提供的功能(API)
    DOM:浏览器所提供的功能用于控制文档（页面）
2、JS代码书写方式
    1、行内 直接在标签上使用js代码 on开头的属性配合  此方式使用频率很低
    2、内嵌 在script标签中 编写js代码
    3、外联 通过script标签指定src属性
4、js中输出语句
    console.log() 在控制台中输出内容 内容 可以是具体的数据 也可以是变量，如果涉及多个输出 可以使用逗号分割
5、注释
    //单行注释
    /*多行注释*/
6、变量
    变量：是数据的一种容器
    1、创建变量     var  变量名称;
    2、变量赋值     变量名 = 值
    3、变量创建并且初始化  var 变量名称  = 值;
7、数据类型
    1、划分
        基本类型
            数字
            字符串
            布尔
            undefined
            null
        引用类型
            数组
            对象
            函数
    2、数字类型
        所有可以表示的数字 都是数字类型
        NaN:还是数字类型，但是无法表示
    3、字符串类型
        只要使用引号将内容包裹就是字符串，注意引号嵌套问题
        字符串拼接 js中使用+符号进行拼接的。+符号只有都是数字时才会进行加法运算 否则一律做拼接
    4、布尔
        表示事物两面，只有true与false两种值
    5、undefined
        一个变量创建了 但是没有赋值 系统默认为设置为undefined类型
    6、null
        表示空
8、运算符
    数学运算符
        +
        -
        * 
        /
        %：求余数 可以通过求余数的操作 判断数字的是否是指定的一些倍数
    比较运算符:得到的结果永远是布尔类型
        >
        <
        >=
        <=
        ==:判断变量的值是否相等
        !=:判断变量的值不相等
        ===：判断变量的数据类型与值都相等
        !==不全等

 

   第二天语法学习

---
typora-root-url: img
---

# 运算符

## 赋值运算符

| 示例  | 备注                                                         |
| ----- | ------------------------------------------------------------ |
| a = b | 将变量b的结果赋值给a变量                                     |
| a+=b  | 等价于 a = a + b ，与+运算符作用一样 。如果都是数字加法运算否则字符串拼接 |
| a-=b  | 等价于a = a -b                                               |
| a*=b  | 等价于a = a * b                                              |
| a/=b  | 等价于a = a/b                                                |
| a%=b  | 等价于a = a%b                                                |

```javascript
var n1 = 10;
var n2 = 20;
// n1 = n1+n2;
n1 += n2;
console.log(n1);
var name = '张三';
var age = 18;
var str = '<table>';
// 因为后期tr的个数与td的个数可能不确定 需要使用循环语句，字符串必须要断开来拼接
str += '<tr>'; // str = str+'<tr>'
str += '<td>'
str += name;
str += '</td>';
str += '<td>'+age+'</td>';// str = str + '<td>'+age+'</td>'
str += '</tr>';
str += '</table>'
document.write(str);
```

## 逻辑运算符

**逻辑运算符是用于对多个表达式进行组合，最终结果也是布尔值**

| 符号 | 备注                                                         |
| ---- | ------------------------------------------------------------ |
| &&   | 表示并且,例如 "表达式1&&表达式2" 不论表达式怎么写，最终都会使用布尔值进行组合，并且要求两边表达式都为真最终结果为真 |
| \|\| | 表示或者 例如 "表达式1\|\|表达式2" 要求表达式中只要有一个为真最终结果为真 |
| !    | 表示取反 例如 !表达式 表达式为真 结果为假                    |

1、&& 

```javascript
 // 1、&&  所有的表达式都为真最终结果为真 否则就是假
var n1 = 20;
var n2 = 30;
// 一定要最后看等号 将n1>10 && n2>20 结果赋值给res变量
var res = n1 > 10 && n2 > 20; // res= true&&true
console.log(res);
var res1 = n1 > 10 && n2 > 50; // res1 = true && false
console.log(res1);
console.log(n1 > 30 && n2 > 50);
// 有时候会使用单个变量进行判断 单个变量 如果不是布尔值会自动转换为布尔值
console.log(true && n2 > 50); //false
```

2、||

```javascript
// 2、||
var n3 = 40,
    n4 = 50;
console.log(n3 > 30 || n4 > 100); //true || false => true
console.log(n3 > 100 || n4 > 100);//false || false =>false
```

3、！

```javascript
var flag = true;
console.log(!flag);//false
console.log(!10>20);//true
```

## 自增自减运算符

1、运算符符号

| 符号 | 作用     |
| ---- | -------- |
| ++   | 将自身+1 |
| --   | 将自身-1 |

2、基本使用

```javascript
 var n = 10;
        n+=1;//11
        // 1、基本使用 ++ --运算符号是只针对单个变量使用(一元运算符)
        n++;//n=12
        n--;//n=11
        console.log(n);
```

3、前置与后置

```javascript
 // 2、前置与后置
    /*
        ++ 、--符号都可以放到变量前或者变量后，但是两种存在区别
        number++
        ++number
        上面的写法 不论哪一种最后number变量的值绝对会+1
        区别点在于赋值或者输出时+1的执行时机问题
    */
    var number = 10;
    number++; //11
    ++number; //12
    console.log(number)

    var num = 10;
    // 当遇到++ --运算符 需要判断位置，
    //  前置 如果符号在变量的前面 先进行自增或者自减操作 然后在赋值  
    // 后置 先进行赋值操作，然后再进行自增或者自减操作
    var a = num++; //等价于 var a = num; num+=1;

    console.log('a = ', a);

    var n = 10;
    var b = ++n;
    console.log('b = ',b);
```

4、使用示例

```javascript
// 测试题目
var j = 10;
/*
    等价于var res = j++ + ++j; console.log(res)
    var res = j++ + ++j 等价于 var a = j++  ;var b = ++j; var res = a+b
    当执行 var a = j++  ++在后 所以 先赋值 在加1 a = 10 ;j = 11 
    当执行 var b = ++j  ++在前 所以 先运算再赋值 j = 12 ;b = 12
*/ 
console.log(j++ + ++j);//22
console.log(j);//12
```

# 数据类型转换

当涉及一些计算 如果是不同数据类型，算出来的结果可能存在问题

## 强制转换

强制转换，就是在代码中手动对数据的值进行改变

### 转换数字类型

1、Number方式转换

```javascript
// 1、Number 如果Number转换字符串 如果字符串全部是数字就得到对应的数字 否则NaN
var str = '10';//字符串10
var res = Number(str);
console.log(res,typeof res);
console.log(Number('100元'));//NaN 
console.log(Number(true));//1
console.log(Number(false));//0
console.log(Number(undefined));//NaN
console.log(Number(null));//0
```

2、parseInt

```javascript
// 2、parseInt 主要是针对字符串提取出整数 
// 从字符串中第一个字符开始提取，如果是数字就保留 直到匹配到非数字就结束，如果结束还没有匹配到数字 最终结果就是NaN
console.log(parseInt('100'));//100
console.log(parseInt('100元'));//100
console.log(parseInt('￥100'));//NaN
```

3、parseFloat

```javascript
// 3、parseFloat 主要是针对字符串 提取出可用的小数
// parseFloat 规则与parseInt 是一致 但是可以识别小数点(只能识别一个小数点)
console.log(parseInt('100.94'));//parseInt只要整数，小数点全部丢弃
console.log(parseFloat('100.95'));
console.log(parseFloat('100.95元'))
console.log(parseFloat('100.9.5'))
```

4、判读数字

```javascript
 // 为了避免 使用非数字运算 导致得到的结果的是错误的
var n = prompt('输入一个数字');
// 如果给定值为 NaN则返回值为true；否则为false。
var res = isNaN(n);
console.log(res);
```

### 转换字符串

```javascript
// 1、调用toString方法完成
var n = 10;
var res = n.toString();
console.log(typeof res,res);
console.log(true.toString());//字符串的true
// console.log(undefined.toString());//报错  一旦报错 后面的代码无法执行
// console.log(123)
// console.log(null.toString());
// 2、使用String函数完成 将其他类型转换成为字符串 结果是对内容直接使用了引号
console.log(String(100));//字符串 100
console.log(String(true));
console.log(String(false),typeof String(false));
console.log(String(undefined),typeof String(undefined))
console.log(String(null),typeof String(null))
```

### 转换布尔

```javascript
/*
    转换布尔
    在js中只有五种可以转换为布尔值的false 其他的全部转换的为true
    空字符串 ''
    数字0    0
    undefined
    null
    NaN
*/ 
console.log(Boolean(''));
console.log(Boolean(0));
console.log(Boolean(undefined));
console.log(Boolean(null));
console.log(Boolean(NaN));

console.log(Boolean('10'))
```

## 隐式转换

在使用js代码过程中，js会自动根据所需要进行的操作自动区转换。根据运算符来决定转换方式的

数学运算符：将非数字自动转换为数字 然后进行计算(+号排除)

流程控制条件：不论写的是不是布尔值(表达式可以得到一个布尔值)，最后一定会转换为布尔值

# 流程控制

## 代码的执行顺序

代码是从上向下顺序执行（赋值语句 从右到左，表达式 从左到右）。代码从上向下就不能跳跃式的执行。所以需

要使用到流程控制，来控制代码的执行顺序

## if语句

### 语法格式

```javascript
if(表达式1){
    //表达式中 需要得到一个布尔值，只有表达式布尔值为真 才会执行{}所包裹的代码
    //如果表达式中得到的不是布尔值会触发隐式转换功能
}else if(表达式2){
    //前面的 表达式1 如果不存在 并且表达式2成立 就执行表达式2对应的括号语句
}...
else{
    //前面的所有表达式都为假 最后执行的代码
}
```

#### 单分支

```javascript
// 单分支
var day = 2;
// day == 2 是比较运算符 可以得到布尔值
if(day == 2){
    console.log('摸鱼');
}
```

#### 双分支

```javascript
// 双分支
if(day == 2){
    console.log('摸鱼');
}else{
    console.log('加班写代码');
}
```

#### 多分支

```javascript
// 多分支
// 先跟条件day == 1 比较不成立，在跟条件 day ==2比较 成立 一旦成立 就会执行对应的括号中语句，执行完语句之后 整个if 语句执行完毕
if (day == 1) {
    console.log('开需求会');
} else if (day == 2) {
    console.log('找开发文档 顺带摸鱼');
} else if (day == 3) {
    console.log('假装写代码');
}else if(day == 4){
    console.log('写代码 提交测试');
}else if(day == 5){
    console.log('代码发布上线');
}else{
    console.log('双休');
}
```