
> 数组也是对象数据类型，`typeof []` === `'object'`

数组也有属性名，只不过属性名是数字，我们把数字属性名称称之为它的索引

数组是以数字作为索引，索引从零开始，有一个 length 属性代表数组的长度

![](https://cdn.junxio.cc/assets/image-20220125174415098.png)

**类数组**：类似于数组，但是不是数组

- 通过 `getElementsByTagName` 获取的元素集合是类数组
- 函数中的实参集合 `arguments` 也是类数组
- ...

## 循环数组中的每一项

- 用 `for` 或者 `for in` 循环
- `for` 循环只能遍历到数组私有的一些属性，而 `for in` 循环可以把一些自定义的公共属性也能遍历到

## 数组中的常用方法

> 数组中有很多常用的方法，使用这段代码 `console.dir(Array.prototype)` 查看具体方法

1. 方法的意义和作用
2. 方法的形参
3. 方法的返回值
4. 通过此方法，原来的数组是否发生了改变

- ### 实现数组的增加、修改、删除

  ```javascript
  var ary = [1, 2, 3]

  //增加
  //1、push：向数组的末尾追加一个新的内容
  ·参数：一到多个、任何数据类型都可以，想要给数组末尾追加什么，直接传递到push方法中即可，传递多个用逗号隔开
  ·返回值：新增后数组的长度
  ·原来数组改变了

  //2、unshift:向数组开头追加新内容
  ·参数：需要追加的内容（可以使多个任何数据类型的值）
  ·返回值：新增后数组长度
  ·原来数组改变了

  //3、把数组当做一个普通的对象，使用对象键值对的操作，给其设置新的属性（索引）
  ary[ary.length] = xxx 向数组的末尾追加了新的内容
  ```

  ```javascript
  //删除
  //1、pop：删除数组最后一项
  ·参数：无
  ·返回值：被删除的那一项内容
  ·原来数组改变了

  //2、shift：删除数组第一项
  ·参数：无
  ·返回值：被删除的那一项内容
  ·原来数组改变了
  ·使用shift删除第一项之后，后面每一项的索引都要向前进一位（导致后面项的索引发生改变）

  //3、把数组当做普通的对象操作
  ·delete：`delete ary[索引]`删除指定索引这一项（当前项被删除后，原有数组其他项的索引不会改变；当前数组的length也不会改变；）
  ·ary.length--:删除数组最后一项
  ```

  ```javascript
  //splice：数组中内置的方法，可以实现数组的增加、修改、删除
  splice实现删除:
  splice(n, m):从索引n开始删除m个（m不写是删除到数组的末尾）
  ·返回值：被删除的内容（以一个新数组保存）
  ·原来的数组改变了
  splice(0): 清空数组
  splice():一项都不删除，返回一个新的空数组
  splice(0, 1):删除数组开头一项
  splice(ary.length - 1, 1):删除数组末尾一项

  splice实现修改:
  splice(n, m, x):在原有删除的基础上，用x代替删除的内容

  splice实现增加
  splice(n, 0, x):在修改的基础上，我们一项都不删除，把x插入到索引n的前面
  splice(0, 0, x):向数组开头追加x
  splice(ary.length, 0, x):向数组末尾追加x
  ```

  ```javascript
  //slice:数组的查询
  ·参数：slice(n, m) 从索引n开始找到索引为m处（不包含m）
  ·返回值：把找到的部分以一个新数组返回
  原来的数组不变

  slice(n) 从索引n开始找到末尾
  slice(0) || slice() 数组克隆，克隆一份和原来数组一模一样的新数组
  slice支持负数索引，如果传递的索引为负数，浏览器解析的时候是按照 总长度+负数索引 来处理的
  ```

  ```javascript
  concat：将多个数组拼接在一起
  ·参数：要拼接的内容（内容放在原数组的后面），可以是一个数组，也可以是一些数据值
  ·返回：拼接后的新数组
  ·原来的数组不变

  concat() 什么都没有凭借，相当于把原有的数组克隆一份一模一样的新数组出来
  ```

- ### 把数组转换为字符串

  ```javascript
  1、toString：实现把数组转化为字符串（转换后的字符串以逗号分隔每一项）
  ·参数：无
  ·返回值：转换的字符串
  ·原有数组不变

  2、join：把数组按照指定的分隔符转换为字符串，和`字符串中的split方法`相反
  ·参数：指定的链接符
  ·返回值：链接后的字符串
  ·原有数组不变
  ```

  ```javascript
  //=>已知数组中的每一项都是数字，想实现数组求和，我们如何实现？
  //1、循环实现
  //2、利用join
  var total = eval(ary.join('+')); //->eval：把字符串变为JS表达式执行
  ```

- ### 实现数组中每一项的排序和排列

  ```javascript
  1. reverse：把数组中的每一项倒过来排列
  ·参数：无
  ·返回值：排序号的数组
  ·原来数组改变

  2. sort：
  ·参数:无或者回调函数
  ·返回值：排序后的数组
  ·原有数组的改变

  不传递参数的情况下：可以给10以内的数字进行排列，但是超过10的就无法处理了（多位数只识别第一位）

  ary.sort(function(a, b) {
      return a - b; //升序
      return b - a; //降序
  });
  ```

- ### 验证数组中是否包含某一项

  ```javascript
  indexOf/lastIndexOf：获取当前项在数组中第一次或者最好一次出现位置的索引
  · 数组中的这两个方法在IE6~8下不兼容
  · 字符串中的这两个方法兼容所有的浏览器

  · 如果当前数组中并没有这一项吗，返回的索引是-1，我们根据这一点可以验证数组中是否包含这一项

  if (ary.indexOf(12) > -1) {
      //->数组中包含12
  }
  ```

- ### 遍历数组中每一项的方法

  ```javascript
  //=> 以下方法在IE6~8下都不兼容

  · forEach：遍历数组中的每一项
  ary.forEach(function(value, index, ary) {
      //=> 数组中有多少项，当前回调函数执行多少次；每一次传递进来的value就是当前遍历数组对象的值，index就是遍历对象这一项的索引
  });

  · map：遍历数组中的每一项
  ary.map(function(value, index, ary) {
      //=> 数组中有多少项，当前回调函数执行多少次；每一次传递进来的value就是当前遍历数组对象的值，index就是遍历对象这一项的索引
      return xxx; //=>return后面返回的结果就是把当前遍历的这一项修改为xxx
  });

  · filter
  · find
  · reduce
  · every
  ```

- ### 数组去重

  ```javascript
  //双循环遍历
  var ary = [1, 1, 3, 2, 4, 2, 6, 3];
  for (var i = 0; i < ary.length; i++) {
    var item = ary[i];
    for (var j = i + 1; j < ary.length; j++) {
      if (item == ary[j]) {
        ary.splice(j, 1);
        j--;
      }
    }
  }
  ```

  ```javascript
  //indexOf处理
  var ary = [1, 1, 3, 2, 4, 2, 6, 3];
  for (var i = 0; i < ary.length; i++) {
    var cur = ary[i];
    var curNextAry = ary.slice(i + 1);

    if (curNextAry.indexOf(cur) > -1) {
      ary.splice(i, 1);
      i--;
    }
  }
  ```

  ```javascript
  //对象键值对处理
  Array.prototype.myUnique = function () {
    var obj = {};
    for (var i = 0; i < this.length; i++) {
      var cur = this[i];
      if (typeof obj[cur] === 'undefined') {
        obj[cur] = cur;
      } else {
        // ary.splice(i,1);
        // i--;  //ie6~8不兼容
        this[i] = this[this.length - 1];
        this.length--;
        i--;
        continue;
      }
    }
    obj = null;
    return this;
  };

  var ary = [1, 1, 3, 2, 4, 2, 6, 3];
  ary.myUnique().sort(function (a, b) {
    return a - b;
  });
  ```

  > 扩展思路：
  > 相邻比较法：首先给数组进行排序，然后相邻两项比较，相同的话，把最后一项在数组中去掉
  > ...

- ### 冒泡排序法

  ```javascript
  var ary = [12, 13, 23, 14, 21, 2];

  for (var i = 0; i < ary.length - 1; i++) {
    //外层控制的是比较的轮数
    for (var j = 0; j < ary.length - 1 - i; j++) {
      //里层控制的是每一轮的比较次数
      if (ary[j] > ary[j + 1]) {
        //若当前这一项比后一项大，让两者交换
        var item = ary[j];
        ary[j] = ary[j + 1];
        ary[j + 1] = item;
      }
    }
  }
  ```

- ### 递归

  ```js
  ...
  ```

- ### 快速排序

  ```javascript
  var ary = [1, 1, 5, 2, 3, 6, 8, 4];

  function quick(ary) {
    if (ary.length <= 1) return ary;
    //若数组长度为1时，返回原数组
    var centerIndex = Math.floor(ary.length / 2),
      //取基准数下标
      centerValue = ary.splice(centerIndex, 1)[0];
    //取基准数
    var leftAry = [],
      rightAry = [];
    for (var i = 0; i < ary.length; i++) {
      var cur = ary[i];
      if (cur < centerValue) leftAry.push(cur);
      else rightAry.push(cur);
    }

    return quick(leftAry).concat(centerValue, quick(rightAry));
    //返回排序后的新数组
  }

  console.log(quick(ary));
  ```

- ### 插入排序

  ```javascript
  var ary = [1, 13, 2, 5, 4, 12, 32, 3, 2];

  function insertSort(ary) {
    for (var i = 1; i <= ary.length - 1; i++) {
      //控制比较的轮数
      var inseValue = ary[i];
      //用来比较的数
      for (var j = 0; j < i; j++) {
        //将比较的数和前面每一项相比
        if (inseValue < ary[j]) {
          //若小于这一项，则插入这一项的前面
          ary.splice(i, 1);
          ary.splice(j, 0, inseValue);
          break; //跳出进入第一轮循环
        }
      }
    }
  }
  insertSort(ary);
  ```

- ### reduce
  1. 求和
  2. 多维数组变成一维数组
  3. 数组去重
  4. 计算数组中每个元素出现的次数


数组的基础结构


### 数据类型

> `ECMAScript(ES)`: 规定了 JS 的一些基础核心的知识（变量、数据类型、语法规范、操作语句等）3/5 == 6/7
>
> `DOM`: document object model (文档对象模型)
>
> `BOM`: browser object model （浏览器对象模型）

### 变量和常量

变量值是可以改变的，常量值是不可变的

```javascript
// js中定义变量的方式
// var 变量名 = 值；（ES6中定义变量使用let）
var num = 12;
var str = 'zhufeng';

const c = 12; //定义一个常量c 存储了12
c = 13; // 报错：常量存储的值不能修改
```

### JS 命名规范

1. 严格区分大小写

2. 遵循国际命名规则**驼峰命名法**

   ```javascript
   var studentInfo;
   ```

3. 命名的时候可以使用 $、\_、数字、字母，但是数字不能作为名字的第一位

   ```javascript
   var student_info;
   var $xxx; // 一般是应用 Jquery 获取到的值
   var _xxx; // 一般这样的情况代表变量是一个全局或公用的变量
   ```

4. JS 中很多的词都是有特殊含义的，我们这些词叫做**关键字**；
   现在没有特殊含义，以后可能会作为关键词的，我们叫做**保留字**；

### JS 中的数据类型

- **基本数据类型（值类型）**

  - `number`: 数字
  - `string`: 字符串
  - `boolean`: 布尔
  - `null`: 空对象指针
  - `undefined`: 未定义
  - `symbol`: 标识
  - `bigint`: 任意大的整数

- **引用数据类型**
  - `object` 对象数据类型
    - {} 普通对象
    - [] 数组
    - /^$/ 正则
    - ...
  - `function` 函数数据类型

这么多数据类型如何去检测呢？

- `typeof`：检测数据类型的运算
- `instanceof`：检测某个实例是否属于这个类
- `constructor`：获取当前实例的构造器
  ```javascript
  str.constructor === String; // true
  ```
- `Object.prototype.toString.call`：获取当前实例的所属类信息
  ```javascript
  Object.prototype.toString.call(str) === '[object String]'; // true
  ```

#### typeof

> 使用 typeof 检测，返回的结构是一个字符串，字符中中包含的内容证明了值是属于什么类型的

**[局限性]**

1. **typeof null** 不是 `'null'` 而是 `'object'` ：因为 `null` 虽然是单独的一个数据类型，但是它原本的意思是空对象指针，浏览器使用 `typeof` 检测的时候回把它按照**对象**来检测

2. 使用 **typeof** 无法具体细分出到底是数组还是正则，因为返回的结构都是 `object`

```javascript
typeof 12; // "number"

var num = 13;
typeof num; // "number"

typeof null; // "object"
typeof und; // "undefined"
```

#### 腾讯面试题：

```javascript
console.log(typeof typeof []); // string
```

### 布尔

**`Boolean()`**

> 把其他数据类型的值转换为布尔类型
>
> 只有`0、NaN、空字符串、null、undefined`这五个数据值转换为布尔类型的 false，其余的都会变成 true

- `!`

  - `!=`：不等于
  - 叹号在 JS 中还有一个作用：**取反**，先把值转为布尔类型，再进行取反

- `!!`
  - 在一个叹号取反的基础上再取反，取两次反相当于没有操作，但是却已经把其他类型值转换为布尔类型了
    和 `Boolean(Foo)` 是相同的的效果

### 字符串

> 在 JS 中 单引号 和双引号 包起来的都是字符串

```javascript
12; //number
('12'); //string
('[12, 23]'); //string
```

常用方法：

charAt charCodeAt

substr substring slice

toUpperCode toLowerCase

indexOf lastIndexOf

split

replace

match

...

### number 数字

> 0, 12, -12, -12.5
>
> **JS**中多增加了一个 `number` 类型的数据 `NaN`

```javascript
typeof NaN; // "number"
```

**NaN**

> Not A Number：不是一个数字，但是属于 `number` 类型
>
> NaN == NaN 结果为 `false`, `NaN` 和任何其他值都不相等

**isNaN()**

> 用来检测当前这个值是否是非有效数字
> 不是有效数字检测的结果是 `true`
> 反之有效数字则为 `false`

```javascript
isNaN(0) // false
isNaN(NaN) // true

// 当我们使用 `isNaN` 检测值的时候，检测的值不是 `number` 类型的
// 浏览器会默认的把值先转换为 `number` 类型，然后再去检测
isNaN('12') -> false
```

**Number()**

> 把其他数据类型值转化为 number 类型的值

```javascript
Number('12') -> 12
Number('12px') -> NaN

Number(null) -> 0
Number(undefined) -> NaN

Number([]) -> 把引用数据类型转换为number，首先需要把引用数据类型转为字符串（toString）,再把字符串转换为number即可 例如：
[]->'' ''->0
Number([12]) => [12]->'12' '12'->12
Number([12,23]) => [12,23] -> "12,23" "12,23"->NaN

Number({name:'zho'}) => NaN
Number({}) => NaN
Number([]) => 0
```

**parseInt()**

> 也是把其他数据类型值转换为 number，和 Number 方法在处理字符串的时候有所区别

```javascript
Number('12px') ->NaN
parseInt('12px') ->12
parseInt('12px13') ->12 提取规则：从左到右依次查找有效数字字符，直到遇见非有效数字字符为止（不管后面是否还有，都不找了），把找到的转换为数字
parseInt('px12') ->NaN


//第二个参数是将第一个参数当成几进制来转为十进制
parseInt("10");            //返回 10

parseInt("19",10);        //返回 19 (10+9)
//把19当做十进制转为十进制
parseInt("11",2);        //返回 3 (2+1)
//把11当做二进制转为十进制
parseInt("17",8);        //返回 15 (8+7)

parseInt("1f",16);        //返回 31 (16+15) f -> 1, 2, 3 ... 9, 10(a), 11(b), 12(c), 13(d), 14(e), 15(f)

parseInt("010");        //未定：返回 10 或 8
```

**parseFloat()**

> 在 parseInt 的基础上可以识别小数点

```javascript
parseInt('12.5px') ->12
parseFloat('12.5px') ->12.5
```

### null & undefined

> null：空，没有
> undefined： 未定义，没有
>
> ''：空字符串，没有
> 0：也可以理解为没有

**空字符串** 和 `null` 的区别

> 都是去种树
> 空字符串属于挖了个坑，但是没有种任何东西
> null 连坑都没挖
>
> 空字符串相对于 null 来说开辟了内存，消耗了那么一丢丢的性能

`null` 和 `undefined` 的区别

> null 一般都是暂时没有，预期中以后会有的（可能以后也没有到预期）：在 JS 中 null 一般都是手动赋值为 null，后期我们再给其赋具体值

> undefined：完全没有预料之内的
>
> 我是个帅气的男孩子
> 我的女朋友是 null
> 我的男朋友是 undefined

---

#### 基本包装类型（高程 3 拓展）

```javascript
var s1 = "some text";
var s2 = s1.substring(2);

// 当第二行访问s1时，访问的过程处于一种读取模式
// 也就是要从内存中读取这个字符串的值。而在读取模式中访问字符串时，后台都会自动完成以下处理。
1. 创建String类型的一个实例
2. 在这个实例上调用指定方法
3. 销毁这个实例

// 以上三个步骤可以想象成执行了下列ECMAScript代码：
1. var s = new String("some text");
2. var s2 = s.substring(2);
3. s = null;
```

> 所有基本包装类型的对象在转换为布尔类型值都为 true（所有对象在转换为布尔类型值都为 true）

#### Boolean 类型

`Boolean` 类型的实例重写了 `valueOf()` 方法，返回基本类型值 `true` 或 `false`，重写了 `toString()`，返回字符串 `"true" `或 ` "false"`

若是 `Object` 对象实例 `obj`，`obj.toString()` => `"[object Object]"`

`Boolean` 对象在 ECMAScript 中用处不大，经常造成误解，常见问题就是在布尔表达式中使用 `Boolean` 对象，例如：

```javascript
var falseObject = new Boolean(false);
var result = falseObject && '123';
console.log(result); // "123"
```

布尔表达式中 `false && "123"` => `false`，在第二行代码中是对 **falseObject 对象**

而不是对它的值（false）进行求值，**布尔表达式中的所有对象都会被转换为 `true`**

因此 `falseObject` 对象在布尔表达式中代表的是 `true`。

`true && "123"` => `"123"`

> \* 建议永远不要使用 `Boolean` 对象

#### Number 类型

重写了 valueOf()、toLocaleString()、toString()方法。

`valueOf` 返回 `Number` 实例对象表示的基本类型值

```javascript
var num = new Number(123);

console.log(num); // Number {123}
console.log(num.valueOf()); // 123
console.log(num.toString()); // "123"
console.log(Object.prototype.toString.call(num)); // "[object Number]"
console.log(Object.prototype.valueOf.call(num)); // Number {123}
```

**toString 返回 n 进制的字符串**

```javascript
var num = 123;
num.toString(2); // "1111011"
num.toString(4); // "1323"
num.toString(8); // "173"
num.toString(16); // "7b"
```


数据类型


> Date 是日期类，通过它可以对事件进行处理

## Usage

- `Date() === new Date().toString()`，`Date` 构造器简单使用
- `var time = new Date()`，获取当前客户端本机时间（当前获取的时间不能作为重要的参考依据）

  ```js
  // => 获取的结果是一个日期格式的对象：Thu May 10 2018 19:56:29 GMT+0800 (中国标准时间)
  typeof time === 'object'; // true

  time.getFullYear(); // 获取四位整数年 2020
  time.getMonth(); // 获取月 （0~11代表1~12月） 当前10月，输出：9 结果要+1
  time.getDate(); // 获取日 27
  time.getDay(); // 获取星期 2
  time.getHours(); // 获取小时 18 24小时制
  time.getMinutes(); // 获取分钟 50
  time.getSeconds(); // 获取秒
  time.getMilliseconds(); // 获取毫秒
  time.getTime(); // 获取当前日期距离 '1970-01-01 00:00:00' 的毫秒差
  ```

- `var time = new Date('2018-05-10')`，当 `new Date()` 中传递一个时间格式的字符串，
  相当于把这个字符串转换为标准的时间**对象**格式，
  转换完成后，就可以调取上面我们讲的那些方法了
  ```javascript
  // => 时间格式的字符串
  '2018-05-10'(IE下识别不了)
  '2018/05/10'
  '2018/05/10 20:18:14'
  '31293812'（如果传递的是距离1970年的那个毫秒差，也是可以识别转换的）
  ```

## 案例：抢购倒计时

```html
<div class="box">距离抢购：<span id="timeBox"></span></div>
```

```js
var timeBox = document.getElementById('timeBox');

function computed() {
  var nowTime = new Date(),
    targetTime = new Date('2018/5/10 22:00:00');

  var spanTime = targetTime - nowTime;
  if (spanTime <= 0) {
    // => 时间到
    window.clearInterval(timer);
    timeBox.innerHTML = '抢购！';
    return;
  }

  var hour = Math.floor(spanTime / (1000 * 60 * 60));
  spanTime -= hour * 60 * 60 * 1000;
  var minute = Math.floor(spanTime / (1000 * 60));
  spanTime -= minute * 60 * 1000;
  var second = Math.floor(spanTime / 1000);

  hour < 10 ? (hour = '0' + hour) : null;
  minute < 10 ? (minute = '0' + minute) : null;
  second < 10 ? (second = '0' + second) : null;

  timeBox.innerHTML = hour + ':' + minute + ':' + second;
}

var timer = window.setInterval(computed, 1000);
```

## 面试思考题：

- 如何用 `Date` 获取一个星期的第三天？


Date 日期操作基础讲解

ECMAScript6(ES6)


### 什么是正则？

> 正则就是一个规则，用来处理**字符串**的规则

1. 正则匹配

   编写一个规则，验证某个字符串是否符合这个规则，正则匹配使用的是 test 方法

2. 正则捕获

   编写一个规则，在一个字符串中把符合规则的内容都获取到，正则捕获使用的方法：正则的 exec 方法、字符串中的 split、replace、match 等都支持正则

   ```javascript
   var reg = /^$/; // 两个斜杠中间包含一些内容就是正则，两个斜杠之间包含的全部内容都是元字符
   ```

#### 正则的「元字符」和「修饰符」

> 任何一个正则都是由**元字符**和**修饰符**组成的

- **修饰符**

  `g(global)`：全局匹配

  `i(ignorecase)`：忽略大小写匹配

  `m(multiline)`：多行匹配

- **元字符**

  1. 量词元字符

     - `+`：让前面的元字符出现 1 到多次
     - `?`：出现 0 到 1 次
     - `*`：出现 0 到多次
     - `{n}`：出现 n 次
     - `{n,}`：出现 n 到多次
     - `{n,m}`：出现 n 到 m 次

  2. 特殊意义的元字符

     - `\`：转义字符（把一个普通字符转变为有特殊意义的字符，或者把一个有意义的字符转移为普通字符）

     - `.`：`除了\n` （换行符）以外的任意字符

     - `\d`：匹配一个`0~9`之间的数字

     - `\D`：匹配任意一个`非0~9`之间数字（大写字母和小写字母的组合正好是反向的）

     - `\w`：匹配一个 `0~9 或者 字母 或者 _ ` 之间的一个字符

     - `\s`：匹配一个任意空白字符（空格、制表符 Tab`\t`、换页符`\f`和换行符`\n`、回车符`\r`）

     - `\b`：匹配一个边界符

     - `x|y`：匹配 x 或者 y 中的一个

     - `[a-z]`：匹配 a-z 中的任意一个字符

     - `[^a-z]`：和上面的相反，匹配任意一个非 a-z 的字符

     - `[xyz]`：匹配 x 或者 y 或者 z 中的一个字符

     - `[^xyz]`：匹配除了 xyz 以外的任意字符

     - `()`：正则的小分组，匹配一个小分组（小分组可以理解为大正则中的一个小正则）

     - `^`：以某一个元字符**开始**

     - `$`：以某一个元字符**结束**

     - `?:` ：只匹配不捕获

     - `?=` ：正向预查

     - `?!` ：负向预查

     - `?<=` ：逆向匹配

     - `?<!` ：逆向不匹配

除了以上特殊元字符和量词元字符吗，其余的都叫做普通元字符：代表本身意义的元字符

- [正则文档](http://tool.oschina.net/uploads/apidocs/jquery/regexp.html)
- [例子 1](https://www.cnblogs.com/wjw-blog/p/7526994.html)
- [例子 2](https://www.cnblogs.com/dh-dh/p/5261044.html)
- [进阶：正反向预查](http://www.kkh86.com/it/regexp/guide-adv-pre-match.html)

#### 元字符详细解读

```javascript
var reg = /\d+/; // 包含某某即可，这里说明包含1个多个数字即可
var str = '钟俊雄520';
reg.test(str); // true

reg = /^\d+/;
reg.test(str); // false

reg = /^\d+$/; // 只能是某某某，这里说明只能是1到多个数字
reg.test('2017'); // true
reg.test('2018zjx123'); // false
reg.test('2'); // true ^或者$只是一个修饰或者声明，不会占据字符串的位置
```

`\`

```javascript
var reg = '^2.3$';
reg.test('2.3'); // true
reg.test('2+3'); // true 点在正则中的意思：匹配除了\n以外的任意字符，而不是单纯的小数点

reg = /^2\.3$/;
reg.test('2.3'); // true
reg.test('2+3'); // false 使用转义字符把点转换为本身小数点的意思

reg = /^\\d$/; 将第二个\变为普通字符\然后第一个也变为普通字符\
reg.test('\d'); // false
reg.test('\\d'); // true

reg = /^\\\d$/;
reg.test('\\9'); true
reg.test('\9'); false
```

`x | y`

```javascript
var reg = /^18|19$/; // 18 19 189 119 819 181 1819 ...很多 都符合这个规则

/*
 * 18或者19
 * 以1开头 以9结尾 中间8或者1
 * 以18开头或者以19结尾
 */

var reg = /^(18|19)$/; // 此时只有18或者19符合我们的规则了
```

> `()`:正则中的分组，也可以理解为一个大正则中的一个正则（包起来的部分是一个整体）；在正则中我们可以使用小括号`改变一些默认的优先级`；
>
> 小分组还有第二个作用：`分组引用`
> 小分组的第三个作用：`分组捕获`

```javascript
// 分组引用：\1 或者 \2 ...出现和第N个分组一模一样的内容
var reg = /^([a-z])([a-z])\2([a-z])$/; // 符合的字符串：
 foot 、 book、oppo、week、tool、attr
```

`[ ]`

> [xyz] [^xyz] [a-z] [^a-z]

```javascript
// \w：数字字母下划线的任意一个字符
var reg = /^[a-zA-Z0-9]$/; // 等价于\w

// 中括号中出现的元字符，一般都代表本身的含义
var reg = /^[.?+&]+$/; // 里面的四个元字符都是本身的含义，例如：点就是小数点了，不是所谓的任意字符 ...

// 需求：描述样式类名的规则（数字、字母、下划线、-），并且不能以-开头
//var reg = /^[\w-]+$/;
//var reg = /^[0-9a-zA-Z_-]+$/; // 没有处理以-开头的情况

var reg = /^\w[\w-]*$/;
```

```javascript
// 需求： 验证18~65之间的年龄
/^[18-65]$/; // 1或者8~6或者5中的任意一个字符，中括号中出现的18不是数字18，而是1或者8，当前正则非法，因为不能设置8~6这种降序范围

// 分三个阶段处理：18~19 20~59 60~65
var reg = /^((18|19)|([2-5]\d)|([6][0-5]))$/;
```

```javascript
var reg =  /^[\]$/; // 报错
```

### 常用的正则表达式编写

- 验证是否为有效数字

```javascript
/*
 * 可能是正数，可能是负数 12 -12
 * 整数或者小数 0 12 0.2 12.5 -12.3
 * 只要出现小数点，后面至少要跟一位数字
 * 小数点前面必须有数字
 */

var reg = /^-?(\d|([1-9]\d+))(\.\d+)?$/;
/*
 * -? 负号可有可无
 * (\d|([1-9]\d+)) 整数部分：多为数开头不能为0
 * (\.\d+)? 小数部分（可有可无）：小数点后必须有数字
 */

reg.test(-0.9); // true
reg.test('-.9'); // flase
```

- 手机号码

```javascript
/*
 * 11位数字
 * 1开头
 */
var reg = /^1\d{10}$/;
```

- 用户名：真实姓名

```javascript
// /^[\u4E00-\u9FA5]$/ 中文汉字的正则
var reg = /^[\u4E00-\u9FA5]{2,10}(·[\u4E00-\u9FA5]{2,10})?$/;

var reg = /^$/;
```

- 邮箱

```javascript
var reg = /^/^\w+((-\w)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
/*
 * 以数字字母下划线开头
 * @前面可以是 数字、字母、下划线、-、.这些符号
 * 不能把- 和. 连续出现，出现一次后面必须跟数字字母下划线
 * /
 [A-Za-z0-9]+
 ((\.|-)[A-Za-z0-9]+)*
 \.[A-Za-z0-9]+

 @163.com.cn
 @zhong-jun-xiong.com.cn
```

- 身份证号码

```javascript
/*
 *  18位
 *  前17位必须是数字
 *  最后一位可以是数字或者X（X代表10）
 *  441481199602253851
 *  前六位：省市县 441481
 *  接下来八位 出生年+月+日
 *  倒数第二位数字：奇数代表男 偶数代表女
 */

var reg = /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{2})\d(\d|X)$/;
// 这样写不仅可以匹配，而且以后再捕获的时候，不仅可以把大正则匹配的结果匹配到，里面每一个小分组（小正则）匹配的结果也可以单独的捕获到“分组捕获”

// 年 1950~2018
// 第一段 1950~1999
// 第二段 2000~2018
/^((19[5-9]\d) | (20((0\d)|(1[0-8]))))$/;
```

### 正则捕获

> 把当前字符串中符合正则的字符捕获到
> RegExp.prototype：`exec` 实现正则捕获的方法：

```javascript
var str = '钟俊雄20154140';
var reg = /\d+/;

reg.exec(str);

/*
 * 当正则捕获的时候：
 * 1、先去验证当前字符串和正则是否匹配，如果不匹配返回的结果是null(没有捕获到任何的内容)
 * 2、如果匹配，从字符串最左边开始，向右查找到匹配的内容，并且把匹配的内容返回
 * exec 捕获到的结果格式：
 * -> 获取的结果是一个数组
 * -> 数组中的第一项是当前本次大正则在字符串中匹配到的结果
 * -> index：记录了当前本次捕获到结果的起始索引
 * -> input:当前正则操作的原始字符串
 * —> 如果当前正则有分组，获取的分组中，从第二项开始都是每个小分组，本次匹配到的结果（通过exec可以把分组中的内容捕获到）
 *
 *  执行一次exec只能把符合正则规则条件中的一个内容捕获到，如果还有其他符合规则的，需要再次执行exec才有可能捕获到
 * /
```

- 正则捕获存在懒惰性

> 执行一次 exec 捕获到第一个符合规则的内容，第二次执行 exec，捕获到的依然是第一个匹配的内容，后面匹配的内容不管执行多少次 exec 都无法捕获到
>
> 解决正则捕获的懒惰性：
> 在正则的末尾加修饰符 g（全局匹配）

```javascript
// 正则为什么会存在懒惰性？
正则本身有一个属性： lastIndex（下一次正则在字符串中匹配查找的开始索引）
默认值：0，从字符串第一个字符开始查找匹配的内容
默认不管执行多少遍exec方法，正则的lastIndex值都不会变（也就是第二次以后查找的时候还是从第一个字符找，所以找到的结果永远都是第一个匹配的内容）

而且当我们手动把lastIndex进行修改的时候，不会起到任何的作用

// 为什么加修饰符g就解决了懒惰性？

加了修饰符g，每一次exec结束后，浏览器默认会把lastIndex值进行修改，下一次从上一次结束的位置开始查找，所以可以得到后面匹配的内容了

var reg = /\d+/g;

console.log(reg.exec('1a6'),reg.lastIndex);
VM693:1 ["1", index: 0, input: "1a6"] 1

console.log(reg.exec('1a6'),reg.lastIndex);
VM695:1 ["6", index: 2, input: "1a6"] 3

console.log(reg.exec('1a6'),reg.lastIndex);
VM697:1 null 0
```

exec 有自己的局限性：

执行一次 exec 只能捕获到一个和正则匹配的结果（即使加了修饰符 g）

如果需要都捕获的，我们需要执行 N 次 exec 方法才可以

```javascript
RegExp.prototype.myExec = function myExec() {
  // this: 当前要处理的正则
  // str: 当前要处理的字符串
  var str = arguments[0] || '',
    result = [];
  // 首先判断THIS是否加了全局修饰符G，如果没有加，防止下面出现
  // 死循环
  if (!this.global) {
    //若没有加G
    if (!this.exec(str)) return;
    else {
      result.push(this.exec(str)[0]);
      return result;
    }
  }

  var ary = this.exec(str);
  while (ary) {
    result.push(ary[0]);
    ary = this.exec(str);
  }
  return result;
};

var reg = /\d+/;
console.log(reg.myExec('a1x2c3v4'));
```

### 使用字符串方法 match 实现捕获

```javascript
var reg = /\d+/g;
var str = '123钟俊雄456';
str.match(reg);
```

> 使用字符串 match 捕获
> 1、如果正则加了修饰符 g，执行一次 match 会把所有正则匹配的内容捕获到
> 2、如果没有加修饰符 g，执行一次 match 只能把第一个匹配的结果捕获到
>
> 局限性：
> 在加了`修饰符g`的情况下，执行 match 方法只能把大正则匹配的内容捕获到，对于小分组捕获的内容方法给其自动忽略了

```javascript
var str = 'my name is {0},i am {1} years old~';
// 需求：把{n}整体捕获到，而且还要把括号中的数字也获取到
var reg = /\{(\d+)\}/g;

str.match(reg); // ["{0}","{1}"]

// 想要获取小分组中的内容，我们只能使用exec处理了
function fn(reg, str) {
  var ary = reg.exec(str),
    result = [];
  while (ary) {
    result.push(ary);
    ary = reg.exec(str);
  }
  return result;
}
```

### 使用 test 也可以实现正则的捕获

> 不管是正则的匹配还是正则的捕获，在处理时候的原理是没区别的：`从字符串的第一个字符向后查找，找到符合正则规则的字符`

> 如果正则设置了修饰符 g，不管使用 test 还是 exec 中的任何方法，都会修改 lastIndex 值（下一次查找是基于上一次匹配结果的末尾开始查找的）

```javascript
var reg = /\{(\d+)\}/g;
var str = 'my name is {0}~~';
if (reg.test(str)) {
  console.log(reg.lastIndex); // 14
  console.log(reg.exec(str)); // null
}

var reg = /\{(\d+)\}/;
var str = 'my name is {0}~~';
if (reg.test(str)) {
  console.log(reg.lastIndex); // 0
  console.log(reg.exec(str)); // [{0},0,...]
}
```

> 使用 test 不仅可以找打匹配的内容，也能像 exec 一样把找到的内容获取到
> test 返回结果是 true/fasle，所以靠返回结果肯定不行

```javascript
var reg = /\{(\d+)\}/g;
var str = 'my name is {0}~~,i am {1} years old';
reg.test(str); // true
console.log(RegExp.$1); // 0 获取本次匹配内容中的第一个小分组

reg.test(str); // true
console.log(RegExp.$1); // 1 TEST可以实现捕获，但是每一次只能获取到本次匹配结果中，第N个分组捕获的内容 $1 第一个分组 $2 第二个分组

var reg = /\{(\d+)\}/g;
var str = '{1}{23}{4}';

var result = [];
while (reg.test(str)) {
  result.push(RegExp.$1);
}

var result = [],
  ary = reg.exec(str);
while (ary) {
  result.push(ary[1]);
  ary = reg.exec(str);
}
```

- **`replace`**

> replace：字符串中原有字符的替换
> str.repalce(old,new);

```javascript
var str = '俊雄2018俊雄1996';
str = str.replace('俊雄', '俊雄挖哦');
str = str.replace('俊雄', '俊雄挖哦');
// 执行一次 '钟俊雄挖哦挖哦2018钟俊雄1996'

// 在不使用正则的情况下，执行一次replace只能替换一个原有字符，第二次执行replace，还是从字符串的开始位置开始，把最新找到的字符替换为新字符（类似于正则捕获时候的懒惰性：每一次执行都是从字符串最开始的位置查找）
```

> 真实项目中，replace 一般都是和正则搭配在一起使用的

```javascript
str = str.replace(/俊雄/g, 哇哦);
```

> replace 原理：
>
> 1. 当 replace 方法执行，第一项传递一个正则
>
> - 正则不加 g：把当前字符串中的第一个和正则匹配的结果捕获到，替换成新的字符
> - 正则加 g：把当前字符串中所有和正则匹配的内容都分别的捕获到，而且每一次捕获，都会当前捕获的内容替换成新字符
>
> 2. 当 replace 方法执行，第二个参数传递的是一个函数（回调函数）
>
> - 首先用正则到字符串中进行查找匹配，匹配到一个符合规则的，就把传递的函数执行一次
> - 不仅执行这个函数，而且还把正则本次捕获的结果（和执行 exec 捕获的结果一样：数组、大正则匹配、小分组匹配 都有）当做实参传递给这个函数（）

```javascript
var str = 'zjx123zjx';
str = str.replace(/zjx/g, function () {
  return '哇哦';
});
console.log(str);
```

### 所有支持正则的方法都可以实现正则的捕获（一般都是字符串方法）

> 字符串中常用的支持正则的方法：match / split / replace 等等

```javascript
var str = 'name=zjx&age=81&idt=student';
str.split(/&|=/); // ["name", "zjx", "age", "81", "idt", "student"]
str.split(/(&|=)/); // ["name", "=", "zjx", "&", "age", "=", "81", "&", "idt", "=", "student"]

// 在使用split进行字符串拆分的时候，如果正则中包含小分组，会把小分组中的内容都捕获到，放在最后的数组中

// 本案例中的小括号仅仅是为了实现 改变默认的优先级 问题，但是我们不想把分组中的内容捕获到 => "只想匹配不想捕获" 我们可以使用(?:)


// 只匹配不捕获：
// 在当前一个分组中加了 ？：，在正则检测匹配的时候，小分组可以起到自己应用的作用（例如：改变优先级），但是在捕获的时候，遇到带？：的小分组，浏览器不会把当前这个分组中匹配的内容，单独去捕获了
str.split(/(?:&|=)/);

var reg = /^(\d{6})(\d{4})(\d{2})(\d{2})
(\d{2})(\d)(\d|X)$/;
var str = '441481199602253851'
reg.exec(str);
// ["441481199602253851", "441481", "1996", "02", "25", "38", "5", "1", index: 0, input: "441481199602253851"]

var reg = /^(\d{6})(\d{4})(\d{2})(\d{2})
(?:\d{2})(\d)(\d|X)$/;
var str = '441481199602253851'
reg.exec(str);
// ["441481199602253851", "441481", "1996", "02", "25", "5", "1", index: 0, input: "441481199602253851"] => 未捕获"8"
```

### 面试题

单词首字母大写

```javascript
var str = 'my name is zhon-jun-xio,i am 20 years old,i am man!';
// var reg = /\b\w+\b/; // \b代表的是边界：单词作用两边是边界，-的左右两边也是边界，
// 所以这里会把'zhon-jun-xio'算作三个单词

// 1、先把混淆边界符的-替换成_
str = str.replace(/-/g, '_');

// 2、通过边界符匹配到每一个单词
str = str.replace(/\b(\w)(\w)*\b/, function () {
  return arguments[1].toUpperCase() + arguments[2];
});

// 3、在把之前替换的_重新替换为-
str = str.replace(/_/g, '-');
console.log(str);
```

```javascript
var str = 'my name is zhon-jun-xio,i am 20 years old,i am man!';
var reg = /\b([a-zA-Z-]+)\b/g;
str.replace(reg, function () {
  return arguments[0][0].toUpperCase() + arguments[0].slice(1);
});
// "My Name Is Zhon-jun-xio,I Am 20 Years Old,I Am Man!"
```

### 测试

[正则验证](https://regex101.com/)



正则的世界


> 函数执行，形成一个私有作用域，保护里面的私有变量不收外界干扰，这种保护机制叫做**闭包**

但是现在市面上，99%的 IT 开发者认为：函数执行，形成一个不销毁的私有作用域，除了保护私有变量以外，还可以存储一些内容，这样的模式才是闭包

```javascript
var utils = (function () {
  return {
    // code
  };
})();
```

### 闭包作用

1. **保护**

   团队协作开发，每个开发者把自己的代码存放在一个私有作用域里中，防止相互之间的冲突；把需要供别人使用的方法，通过 `return` 或者 `window.xx` 暴露在全局下即可；

   jQuery 源码中也是利用保护机制实现的

   ```javascript
   ~function(){
     var jQuery = function(){
       ...
     }
     ...
     window.$ = window.jQuery = jQuery;

   }();
   ```

2. **保存**

   选项卡闭包解决办法

   单例魔术（JS 高阶编程技巧：惰性思想/颗粒化函数思想...）

#### 延伸

- 执行上下文（execution context - EC）
  - 执行 `JavaScript` 代码的环境
  - 执行上下文的三种类型
    - 全局执行上下文（唯一）
    - 函数执行上下文
    - `Eval` 内部执行环境
  - 变量对象
- 词法环境（lexical environment - 作用域）
  > 词法环境 lexical environment 是 `JavaScript` 引擎内部用来跟踪标识符与特定变量之间的映射关系
  >
  > **注意**：词法环境是 `JavaScript` 作用域的内部实现机制，人们通常称之为**作用域**
- 无论何时调用函数

  - 都会创建一个新的执行环境，被推入执行上下栈
  - 都会创建一个与之相关的词法环境

    重要的部分：`JavaScript` 引擎将调用函数的内置[[Environment]]属性与创建函数时的环境进行关联


关于闭包


> 在 JS 中用单双引号包裹起来的都是字符串

```javascript
var str = 'good good study';
var str = "good good study";
//字符串就是由0到多个字符组成的
//第一个字符索引0
//第二个字符索引1
//...

str[0] -> "g"
//有一个叫做length的属性，存储的是当前字符串中字符的个数（字符串的长度）
str.length
```

真实项目中，我们经常操作字符串

此时我们需要掌握常用的一些字符串操作方法

控制台查看：`console.dir(String.prototype)`;

#### charAt && charCodeAt

- `str.charAt`(索引 index)：

  返回指定索引位置的字符，和 str[索引]的区别在于

  当指定的索引不存在的时候，中括号的方式获取的是**undefined**，而 `charAt` 获取的是**空字符串**

- `str.charCodeAt`(索引 index)：

  在 `str.charAt` 的基础上，把基础的字符变为 `unicode` 编码值（对应 ASCII 码表）

  > 48~57：0-9
  >
  > 65~90：A-Z
  >
  > 97~122：a-z

- `String.fromCharCode`(十进制的 `unicode` 值)：

  把 unicode 值按照 ASCII 码表中的信息，转换为原有的字符，和 charCodeAt 正好对应

  ```javascript
  String.fromCharCode(65); // => "A"
  ```

#### substr & substring & slice

> 实现字符串截取的三个办法

- `str.substr`(n, m)：从索引 n 开始，截取 m 个字符

- `str.substring`(n, m)：从索引 n 开始，截取到索引到 m 处（不包含 m），把找到的部分截取

- `str.slice`(n, m)：和 substring 语法一样，区别在于 slice 支持以**负数**做索引
  当索引是负数的时候，浏览器在处理的时候，是用字符串的总长度加上那个负数索引，然后按照正数处理。

  ```javascript
  var str = 'abc';
  str.substr(0, 1); // => 'a'
  str.substring(0, 2); // => 'ab'
  str.slice(0, -1); // => 'ab' 支持负数索引
  ```

> **细节**：
>
> 1. 如果只传递 n，相当于从索引 n 开始一直截取到字符串的末尾
>
> 2. 如果传递的索引超出最大限制，也是把能截取的部分截取掉即可
>
> 3. 如果一个参数都不传递：相当于把整个字符串都截取到（字符串的克隆）
>
> 4. ...

#### toUpperCase & toLowerCase

- `str.toUpperCase`：把字母全部大写
- `str.toLowerCase`：把字母全部小写

#### indexOf & lastIndexOf

- `str.indexOf`：获取当前字符在字符串中第一次出现的位置的索引
- `str.lastIndexOf`：获取的是最后一次字符串出现的位置的索引

  > 如果当前字符在字符串中没有出现过，结果是-1；
  >
  > 我们根据这个规律可以验证一下当前字符串中是否包含某个字符

  ```javascript
  if (str.indexOf('?') === -1) {
    // => 如果str中 没有出现过'?' 则为true
  }
  if (str.indexOf('?') >= 0) {
    // => 如果str中 出现过'?' 则为true
  }
  ```

#### split

`str.split`：按照某一个字符把字符串拆分成数组中的某一项，和数组中的 `join` 方法是对应的

#### replace

- `str.replace`：实现字符的替换

  > 执行一次 `replace` 只能替换一次，如果有好几个都需要替换，在不适用正则的情况下我们需要执行很多次

- `str.replace`(/o/g,'O');

  > 有些需求即使执行很多次 `replace` 也实现不了，此时需要使用正则处理，真实项目中 `replace` 一般都是和正则搭配使用的

#### trim && trimLeft &&trimRight

- `str.trimLeft`：去除字符串开始的空格
- `str.trimRight`：去除字符串结尾的空额
- `str.trim`：去除字符串首尾空格

#### 案例：queryURLParameter

> 获取地址栏中 URL 地址问号传递的参数值

- 普通：

  ```javascript
  var str =
    'https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=baidu&wd=js&oq=js%2520replace&rsv_pq=ba5dac70000075e30f8%2FmP%2Fb3G4X2ZyQay7Fc8gzN%24&rsv_t=F4TxABN5BramXucaCILodOczu';

  function queryURLParameter(url) {
    var index = url.indexOf('?');
    if (index == -1) {
      return {};
    } else {
      var ary = url.slice(index + 1).split('&');
      var obj = {};
      for (var i = 0; i < ary.length; i++) {
        var curAry = ary[i].split('=');
        obj[curAry[0]] = curAry[1];
      }

      return obj;
    }
  }

  console.log(queryURLParameter(str));
  ```

- 正则：

  ```javascript
  String.prototype.myQueryURLParameter = function myQueryURLParameter() {
    var obj = {},
      reg = /([^=?&]+)=([^=?&+]+)/g;
    this.replace(reg, function () {
      var arg = arguments;
      obj[arg[1]] = arg[2];
    });
    return obj;
  };

  console.log(str.myQueryURLParameter());
  ```


字符串中的常用方法


> this：函数执行的主体，谁把函数执行的，谁就是执行的主题（和函数在哪执行的，以及在哪定义的没有直接的关系）

#### 非严格模式

1. 给元素的某一个事件绑定方法，当事件触发，方法执行的时候，绑定的这个方法中的 `this` 一般是当前操作做的这个 `DOM` 元素

   ```javascript
   oBox.onclick = function () {
     //=>当绑定的方法执行，方法中的this：Box
     //=>如何让绑定的方法执行
     //1、手动点击oBox，经浏览器触发点击事件
     //2、oBox.onclick();
     //...
   };

   //=>在IE6~8下，如果我们使用的是DOM2事件绑定，方法执行的时候，里面的this不是当前元素而是window

   oBox.attachEvent('onclick', function () {
     //=>this:window
   });
   ```

2. 自执行函数执行，方法中的 `this` 一般都是 `window`

   ```javascript
   var obj = {
     fn: (function () {
       //=>this:window
       return function () {};
     })(),
   };

   ~function () {
     //=>this:window
   };
   ```

3. 方法执行的时候，看方法名前是否有`.`，有电话，`.`前面是谁 `this` 就是谁，没有的话，`this` 是 `window`

   ```javascript
   function fn() {
     console.log(this);
   }
   var obj = { fn: fn };
   fn(); //=>this:window
   obj.fn(); //=>this:obj

   //============
   //=>数组通过原型查找机制，把Array.prototype上的slice方法找到，并且让方法执行，执行过程中实现数组的按索引查找操作
   [].slice(); //this:[]
   [].__proto__.slice(); //this:[].__proto__
   Array.prototype.slice();
   //this:Array.prototype
   ```

4. 在构造函数执行的时候，函数体中的 `this` 都是当前类的实例

   ```javascript
   function Fn() {
     //=>this:当前Fn的实例（当前案例中指的是f）；而this.xxx = xxx 都是给当前实例设置的私有属性；
     this.xxx = xxx;
   }
   var f = new Fn();
   ```

5. 使用 `Function.prototype` 上提供的 `call`、`apply`、`bind` 实现 `this` 的改变

   ```javascript
   var obj = {name:'钟俊雄'};
   function fn(num1,num2){
     this.total=num1+num2;
   }
   //=>call基础语法的应用
   //fn(10,20); //=>this:window
   //obj.fn(10,20); //=>obj中并没有fn这个属性，属性值是undefined，它不能作为函数执行，所以会报错：TypeError（undefined is not a function...）

   fn.call(obj,10,20);//=>首先让fn中的this指向传递的第一个参数值obj，然后执行fn这个函数：此时fn中的this->obj  num1->10 num2->20

   fn.call(10,20); //fn中的this：10 num1=20
   num2=undefined

   fn.call(); //=>fn中的this：window
   num1=num2=undefined  <=> fn()

   fn.call(null);
   fn.call(undefined); //第一个参数不管写的是null还是undefined都代表没有指向的this，所有函数中的this：window


   //=>apply的语法和作用 跟call基本上完全相似，
   只有一个区别
   fn.call(obj,10,20);
   //<=>
   fn.apply(obj,[10,20]); //=>apply方法调用的时候
   ，第一个参数是this指向，第二个参数是一个数组，数组中包含了所有需要给函数传递的实参（语法要求是写成一个数组，但是和call一样）
   ```

   ```javascript
   //=>当之前总结的所有this情况遇到call/apply的时候，都以call/appy指向的this为主
   ~function () {
     //this:obj
   }.call(obj);

   Array.prototype.slice.call(arguments); //=>slice中的this：arguments
   ```

   ```javascript
   var obj = { name: '钟俊雄' };
   function fn(num1, num2) {
     this.total = num1 + num2;
   }
   //=> bind的语法
   fn.call(obj, 10, 20); //=>改变fn中的this，而且把fn立即执行了

   fn.bind(obj, 10, 20); //=>虽然改变了fn中的this，但是并没有把fn执行，它属于预先处理this和实参，不会立即执行，只有达到某个特点条件，才会被触发执行的（IE6~8不兼容）

   //====================
   //=> 真实项目中使用bind的意义
   var obj = { name: '钟俊雄' };
   function fn(num1, num2) {
     this.total = num1 + num2;
   }
   //=> 需求：一秒后执行fn（定时器驱动），执行fn的时候，让fn中的 this->obj，并且给fn传递两个实参10,20

   setTimeout(fn, 1000); //=> 1s后确实执行了fn，但是此时fn中的this是window不是obj，而且没有传递10,20

   setTimeout(fn.call(obj, 10, 20), 1000); //=>虽然实现了this的改变和参数的传递，但是它是设置定时器的时候就把fn执行了，而不是等到1000ms后，1000ms后执行的是fn执行返回的结果

   setTimeout(function () {
     //=> 1000ms后执行的是匿名函数：我们可以在匿名函数里面把fn执行，并且实现需求
     fn.call(obj, 10, 20);
   }, 1000);

   setTimeout(fn.bind(obj, 10, 30), 1000); //=>或者使用bind预处理（不兼容）
   ```

6. 在 `ES6` 中，新增加了箭头函数，箭头函数中没有执行主体，箭头的函数中的 `this` 会继承它宿主环境中的 `this`

   ```javascript
   var obj={
     fn:function(){
       //this:obj
       setTimeout(function{
         //=>this:window
       },1000);

       setTimeout(function{
         //=>this:obj
       }.bind(this),1000); //不兼容

       var _this = this;
       setTimeout(function{
         //=>_this:obj
       },1000);

       setTimeout(()=>{
         //=>this.obj 箭头函数中的this继承宿主环境中的this，箭头函数中本无this
       },1000);
     }
   };

   obj.fn();
   ```

#### 严格模式下

> ```javascript
> 'use strict'; //=> 代码第一行就上这句话，就开启了JS中的严格模式
> ```

非严格模式下不明确执行主体，浏览器认为执行主体默认是 `window`（`this` 一般都是 `window`）；但是在严格模式下，执行主体不明确，`this`是`undefined`

#### 延伸思考

```javascript
var value = 1;
var foo = {
  value: 2,
  bar: function () {
    return this.value;
  },
};

foo.bar()(foo.bar)()((foo.bar = foo.bar))()(false || foo.bar)()(
  foo.bar,
  foo.bar
)();
```

#### 确定 this 指向的过程

[链接](https://github.com/mqyqingfeng/Blog/issues/7)


this 的使用


ES6 Proxy 不能被 Polyfill 的主要原因是它涉及到了 JavaScript 引擎的底层行为，这是无法通过纯 JavaScript 代码模拟的。

1. 底层操作：Proxy 允许你拦截并自定义对象的底层操作，如属性查找、赋值、函数调用等。这些操作是在 JavaScript 引擎级别执行的，而不是在 JavaScript 代码层面。

2. 性能考虑：即使可以在某种程度上模拟 Proxy 的行为，这种模拟也会带来巨大的性能开销，使得它在实际应用中不可行。

3. 完整性：Proxy 可以拦截几乎所有的对象操作，包括一些难以或无法在纯 JavaScript 中检测到的操作（如 in 操作符、delete 操作等）。

4. 透明性：Proxy 的一个关键特性是它对使用者来说是完全透明的。使用 Proxy 包装的对象看起来和行为上都应该与原始对象一模一样，这一点很难通过 Polyfill 实现。

5. 元编程能力：Proxy 提供了强大的元编程能力，允许你改变语言的基本行为。这种能力超出了普通 JavaScript 代码所能达到的范围。

举个简单的例子来说明为什么无法完全模拟 Proxy：

```javascript
let target = {};
let handler = {
  get: function(target, prop, receiver) {
    console.log(`Getting ${prop}`);
    return target[prop];
  }
};

let proxy = new Proxy(target, handler);

console.log(proxy.nonexistent); // 输出: Getting nonexistent, undefined
```

在这个例子中，即使 `nonexistent` 属性不存在，Proxy 也能拦截到对它的访问。如果我们尝试用纯 JavaScript 来模拟这个行为，我们就会发现无法拦截对不存在属性的访问。

因此，由于 Proxy 涉及到了 JavaScript 引擎的核心行为，它不能被简单地 Polyfill。在不支持 Proxy 的环境中，开发者通常需要寻找替代方案或使用其他设计模式来实现类似的功能。

## 参考

Claude 3.5 Sonnet


为什么 ES6 Proxy 不能被 Polyfilled?


## 好处

写代码过程可能会有更多的思考在怎么把代码写好

思考代码是否可拆分，可复用

提高代码的组织性

- 高复用性，代码复用
- 灵活，函数组合
- 代码结构清晰，利于理解阅读
- 利于测试和调试，控制输入输出
- 状态分离，利于状态中心化，更好的操控数据


函数式编程


## http 历程

- 1990 年，**HTTP/0.9** 诞生
  1. 只支持 GET 请求
  2. 没有请求头
  3. 服务器响应完，马上关闭 TCP 连接
- 1996 年，**HTTP/1.0** 作为正式标准
  1. 完善了请求方式，POST PUT DELETE HEADER 等
  2. 增加请求头和响应头，以及元信息的补充（状态码、权限、缓存、内容编码）
  3. 完善了传输内容格式
- 1997 年，**HTTP/1.1** 是主流的 HTTP 协议版本
  1. 长连接，Connection 字段 keep-alive
  2. 管道化，可以不等上一个请求响应同时发出下一个请求
  3. 缓存，新增属性 Cache-Control
  4. 断点传输
- 2015 年，**HTTP/2** 正式发表， 大幅度提高 HTTP 的性能
  1. http2 将传输的信息分割成更小的消息和帧，并采取二进制编码，提高传输效率，基于二进制分帧层，而 http 传输的是文本
  2. 多路复用，基于二进制分帧，http 消息分解独立的帧，服务器根据标识符和首部连接
  3. 头部压缩，维护了头部字典，差量更新头信息（复用）
  4. 服务器推送，向服务器获取 a 资源，服务器可以预判你要获取的 b 资源，并发送给浏览器端

## http 和 https 区别

不同点，优缺点比较，[阅读](https://vue3js.cn/interview/http/HTTP_HTTPS.html#%E4%B8%80%E3%80%81http)

1. **传输内容**：http 是**明文**，https 做了一层[加密](https://www.bilibili.com/video/BV1M44y1175D?spm_id_from=333.880.my_history.page.click)，传输的**密文**（混合加密，[非对称+对称加密](https://www.bilibili.com/video/BV1M44y1175D?spm_id_from=333.880.my_history.page.click)）
2. **连接方式**：https 需要先建立**SSL 连接**
3. **端口**：http **80**端口，https **443**端口
4. **证书**：http 需要在 ca 申请**ca 证书**，需要钱
5. **性能**：https 性能不如 http，https 多了**ssl 连接**，消耗一些时间和性能
6. **SEO**：https 的网站更可靠

- https 加密怎么做的？
  1. 混合加密，对称和非对称加密
  2. ca 颁布 ca 证书，https 证书
- http 和 https 传输性能比较？


HTTP


> 拒绝语言暴力
> 拒绝语言暴力
> 拒绝语言暴力

### 包括不限于

1. “呗” “吧”“ 不就好了” “不就是了” “难道…？” 等词语使用

2. “不” 等否定词的使用

3. “又” “总是” “老是” 等情绪词的使用

4. 任何让对方只有一个选项的回答
    - 例如：“那我xxx不就好了” / “不xxx不就好了呗” / “不可以xxx吗” 之类

5. 任何含有抱怨、质疑的话语
    - 例如：“我是真搞不明白了” / “我明明都没有xxx你为什么xxx”

### 学习使用：陈述句，正常疑问句，肯定词

“那我不可以xxx吗？”❌

“我可以xxx吗？”✅

---

“我明明没有xxx，你为什么不开心啊我真搞不明白”❌

“我没有xxx，你为什么不开心呢？可以跟我说说吗？”✅

---

“你怎么又不开心了？”❌

“我不太知道发生什么了，你为什么不开心呢？”✅

---

“我就是xxx你干嘛这样”❌

“我只是xxx，没有别的意思，你别不开心”✅

---

### 说话原则：

1. 坦诚地说出内心的想法和话语，不要用否定词、质疑的语句询问出自己想要的答案。
    - 例如：使用 “我只是想开玩笑，并不想让你不开心。” 的陈述句
代替 “不可以开玩笑吗” 的反问句。

2. 态度诚恳，谦和。

    “那我道歉”❌

    “我道歉”✅

3. 优先调解情绪，再讲道理。

    对方展示出不开心的表情，先调节情绪，不要反弹，不要据理力争：

    - 步骤1：解释自己没有其他意思

    - 步骤2：展现出愿意倾听的姿态，询问为什么会有情绪

    坚信自己没有别的意思就是没有，可以解释和说明，相信通过沟通和说明对方就会明白，只要本意没错，就没有问题！需要的只是表达清楚！

    先让对方排解情绪，等待对方冷静再讲道理！

4. 主动出击，询问感受、给出解决方案。

    - 步骤1：询问感受：你现在还不开心吗？你好点了吗？

    - 步骤2：给出解决方案：我们去做xxx事情，开心一下好不好？

    重要的是尝试解决问题！一个两个方案不行就尝试多个！解决问题跟修BUG一样要有耐心！慢慢调试！

如何“沟通”


[微信读书链接](https://weread.qq.com/web/reader/6a732ce07201202c6a7b30a?)

> 无论科技多么发达，有一样东西却始终无法直接传递，那就是心智。
> 所谓心智，通俗地说，就是我们看待人和事的态度，以及由此做出的判断与选择。
> 从混沌到警醒，从迷茫到清晰，我慢慢解开了“愿望觉醒”和“方法觉醒”的秘密，知道了如何激发和保持自我提升的内在动力，如何变苦涩的毅力支撑为科学的认知驱动。

你多少听过读过《认知觉醒》这本书，在朋友推荐下，我把它加入到电子书书架中，在某天看完第一章后，脑子就有一种强烈地、把它认真读完的想法，因为里头许多观点都触动到了自己。

在我追求目标过程中，焦虑虽常在左右，但耐心和专注力才是我不可或缺的伙伴。前期焦虑的存在提醒我其中的重要性和挑战，耐心则帮助我不断地克服困难，而专注力是我行动的助推器。

## 谈焦虑
书中讲到焦虑的根源，是自身的欲望和能力相差甚远。作为一名开发，我深感当面对复杂需求或技术挑战时，焦虑或多或少会产生。结合作者观点，我能联想到的解决方法，就是降低欲望并提升自我。环境焦虑，当复杂需求任务来临，我会将任务拆解为一个个的小任务，并逐个进行实现，是为了保证自己能平和高效地完成。完成焦虑，代指 deadline 日期不充裕，任务繁多且进度不理想，此时就很难从容应对，但这种情况会激发自己更加专注和努力地完成目标。

## 耐心
趋难避易是人类的天性，人遭遇难题难事，往往会感到不安和不舒服，选择逃避通常是最容易的路径，俗称“遇事不决睡大觉”。当我在工作中遇到棘手的错误（bug），有时为了排查和定位问题，不仅需要耐心地调试代码，甚是尝试不同的方案，才能最后找到有效的解决手段。

## 提高专注力
分心走神的本质是逃避，在对某种事物产生了依赖或上瘾的时候，我很难再集中注意力在手头的事情上。工程师需要专注力来排除外来干扰，来更好的理解需求，设计出高质量的代码。我认为每个人都需要保持专注，日常生活和工作中，无论是与他人进行有效交谈，亦或是开会上接收信息。

在成为一个的合格的“攻城狮”旅程中，从容地应对焦虑、耐心地待人待事和不断刻意地提高专注力，才能拥有平和的心态和高效解决事情的能力。


读《认知觉醒》


不好意思，这其实是我的「读《认知觉醒》Part2」。

> 查理·芒格就说过：“**我这辈子遇到的聪明人没有不每天阅读的，一个都没有。**”反观我们自身，思考密度其实是很低的：待人接物、安排日程、组织活动、开汽车、用手机……绝大多数时候只是调用原有的记忆模块，顺着习惯做出反应而已，真正的思考其实并不多。

阅读的好处特别特别多，对某些人来说，可以避开喧嚣，简单地充实一个下午；可以是获取和拓展自己的知识视野，提升自我的一种方式途径。「阅读」和「运动」都可以让我释放“快乐激素”多巴胺，让我可以感到身心愉悦，阅读一本书对我而言，内心的焦躁可以被抚平，不安的情绪可以被舒缓（其实害有挺多，一时忘了）。

## 阅读是一门技术活。

> 虽然每个人都能拿起书就读，但不意味着读书这件事门槛低。事实正好相反，读书是个技术活，如果技术不佳，就会陷入低效的努力，所以，要想让自己真正爱上阅读，最好擦亮眼睛避免走进以下几个误区。

1. 读书要先学会选书。

对于非专业性的书籍，每个人选择的类别大致相同，可能是通过从朋友和作者推荐，可能是豆瓣好评榜，也可能是通过小红书搜索而来（不好意思我用小红书），这一类的书籍大多都已经经过了一层筛选，随便选一本都大概不会“踩坑”。拿自己来说，我大学修的是计算机专业，所以需要学特别多相关联的门科，对于某些课程，如果一昧的选择学校所发的教材，那么对于一些知识概念的理解有可能会比较困难，这时候通过选择”额外的“对应的书籍，可以达到事半功倍的效果，如何选择呢？一句话就是，善用“搜索引擎”，可以是问身边的师兄师姐，亦或是在网络上搜寻答案。

2. 阅读的核心是为了改变（阅读量<思考量<行动量<改变量）。

这是一张书中的「成长对比图」，它展示了“阅读”“思考”“行动”“改变”在学习成长过程中的关系。

![成长对比图](https://cdn.junxio.cc/blogs/%E6%88%90%E9%95%BF%E5%AF%B9%E6%AF%94%E5%9B%BE.png)

你可能观察到了，改变量虽然是最小的，但是效果却是最多的。改变是多么的重要！长期以来，我的睡眠质量都很好（即使晚上喝了美式），几乎就是粘床就睡，但是无论怎么早起或者晚起，大概率都是一个很困的状态，通过使用作者提到的「脑科学理论」和朋友强烈推荐的「睡眠周期」，我只是简单的改变了我的睡眠时长，效果就立竿见影，这让我惊叹它是多么的有用（醒来之后效果明显不困了）。[点我了解睡眠周期的秘密](https://www.philips.com.cn/c-w/apps/kol-index/kol-article-18.html)

除了让我起床后能够快速保持清醒的状态，这种改变也给我的生活带来了“副作用”，周末由于遵循这种作息规律，原本早上用来补觉的时间，现在也会花在阅读和学习上，可以支配的时间不觉然地变多了，专注力也在随之提升（无刻意练习，一切都是那么的自然，这大概是“本能脑”和“情绪脑”的功劳）。

再次感慨一下：啊，「改变」是多么重要！

3. 高阶读书法则。

随时注意和记录阅读时产生的想法和其他知识的关联，以此加固知识网络；重新组织语言阐述书中所读所感，并传授他人，可以进一步巩固头脑里的知识。第三点，也正是费曼技巧，相信大家或多或少都已经了解并尝试过了。拿我日常的开发工作举例，有一种有效的排错找 bug 方法叫做[“小黄鸭调试法”](https://zh.wikipedia.org/wiki/%E5%B0%8F%E9%BB%84%E9%B8%AD%E8%B0%83%E8%AF%95%E6%B3%95)，当我陷入 debug 的困境，我会找一个人坐在我的身旁，在通过对他描述问题和我的代码是如何写的过程中，有时我就会焕然大悟，“哦豁，是这里出了问题，谢谢你”，对方此时的表情也是一脸懵，因为他只是坐着并没有干别的事情。这里头的意思就是当你一时没有计策，想从头理清代码的逻辑思路，你可以摆放一只小黄鸭在你面前，通过对它描述问题并将代码以简单的方式表达出来，从而帮助自己发现和解决问题，这其中的关键并不在于对方反馈，而是这一过程中自己的思考和分析。

「小黄鸭调试法」和「费曼技巧」的共同点在于，它们都强调利用解释和表达来加深对问题和知识的理解，通过用简单的方式对问题和知识表达出来，对问题和知识进行更加深入的思考和分析，从而更好地理解和解决它们。因此，「小黄鸭调试法」和「费曼技巧」都是非常有用的学习知识和解决问题的工具。

## 阅读和思考

阅读和思考是是相辅相成的，通过阅读，我可以和作者“聊天”，摄取作者的思考，激发我的思考。而通过思考，我进一步理解所阅读的内容，有了这种“闭环”，我的生活正在发生明显的变化...

[《认知觉醒》微信读书链接](https://weread.qq.com/web/reader/6a732ce07201202c6a7b30a?)


阅读“理解”


今天尝试对自己 nextjs 博客进行了一些样式和交互上的调整。

配合 vercel 的自动部署，从代码的修改到线上的更新整个流程体验非常丝滑。

具体的更新：
  - 网站的 favicon.ico 图标。
  - 网站的标题。
  - 首页鼠标 hover 文章列表标题展示标签及描述变更为悬浮展示。





随笔

> 字体从 css 中读取，css 文件里由一个个切割好的 woff2 文件组成，为什么页面加载完部分所需的 woff2 就不会继续加载剩余的 @font-face ？

1. CSS 中的字体声明

首先，让我们回顾一下 CSS 中的 @font-face 声明是如何工作的：

```css
@font-face {
  font-family: 'MyFont';
  src: url('myfont-light.woff2') format('woff2'),
       url('myfont-light.woff') format('woff');
  font-weight: 300;
}

@font-face {
  font-family: 'MyFont';
  src: url('myfont-regular.woff2') format('woff2'),
       url('myfont-regular.woff') format('woff');
  font-weight: 400;
}

/* 更多字重和样式... */
```

2. 浏览器的加载策略

浏览器在处理这些 @font-face 声明时，会采取以下策略：

a) 解析阶段：浏览器会解析所有的 @font-face 规则，但不会立即下载所有字体文件。

b) 使用分析：浏览器会分析页面中实际使用的字体（包括字体家族、字重、样式等）。

c) 按需加载：只有当页面中实际使用到特定的字体变体时，浏览器才会开始下载相应的 .woff2 文件。

d) 停止加载：一旦页面所需的字体变体都已加载完成，浏览器通常会停止加载其他未使用的字体文件。

3. 为什么会出现这种行为？

这种行为主要是出于以下考虑：

- 性能优化：减少不必要的网络请求和数据传输。
- 资源节约：避免下载可能永远不会使用的字体文件。
- 更快的页面渲染：尽快加载必要的资源，以便更快地渲染页面。

4. 如何影响全字体加载

如果希望加载所有声明的字体文件，即使它们在当前页面中没有立即使用，可以考虑以下方法：

a) 使用 JavaScript 预加载：

```javascript
const fontFaces = document.styleSheets[0].cssRules;
for (let rule of fontFaces) {
  if (rule.type === CSSRule.FONT_FACE_RULE) {
    const fontUrl = rule.style.getPropertyValue('src').match(/url$['"]?(.+?)['"]?$/)[1];
    const font = new FontFace(rule.style.getPropertyValue('font-family'), `url(${fontUrl})`);
    font.load().then(loadedFace => {
      document.fonts.add(loadedFace);
    });
  }
}
```

b) 使用 CSS 中的 unicode-range：
通过指定一个广泛的 unicode-range，可以鼓励浏览器加载更多的字体变体：

```css
@font-face {
  font-family: 'MyFont';
  src: url('myfont-regular.woff2') format('woff2');
  unicode-range: U+0000-FFFF;
}
```

c) 在页面中创建隐藏元素：
创建包含所有字重和样式的隐藏元素，强制浏览器加载所有字体变体：

```html
<div style="opacity: 0; position: absolute; pointer-events: none;">
  <span style="font-family: 'MyFont'; font-weight: 300;">Light</span>
  <span style="font-family: 'MyFont'; font-weight: 400;">Regular</span>
  
</div>
```

需要注意的是，强制加载所有字体文件可能会影响页面加载性能，特别是在网络条件不佳的情况下。

所以，在实施这些策略时，还是需要权衡性能和功能需求。

字体风格加载策略


> 通过 React 项目正常调试代码，往往定位到是打包后的 x.development.js 文件，为了方便找到特定源码的位置，熟悉相关底层原理，使用 VSCode 进行调试会轻松许多

第一步：初始化一个调试项目
```shell
npx create-react-app react-debug
```

项目下创建一个 launch.json 文件用于启动调试，也可通过导航栏输入 `> Debug: Add Configuration` 后回车再选择 `Web App(Chrome)`

![20240710114539](https://cdn.junxio.cc/static/images/blog/20240710114539.png)

```json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3001",
      "webRoot": "${workspaceFolder}"
    }
  ]
}
```

第二步：克隆 react 项目并切换到特定版本
```shell
git clone https://github.com/facebook/react.git

# clone done
git checkout 16.8.6
```

第三步：找到 rollup/build.js，配置 sourcemap

找到 `getPlugins` 函数，注释以下代码，这些插件不支持 sourcemap

```js
# rollup/build.js
...
// shouldExtractErrors && {
//   transform(source) {
//     findAndRecordErrorCodes(source);
//     return source;
//   },
// },

// {
//   transform(source) {
//     return source.replace(/['"]use strict['"']/g, '');
//   },
// },

// isProduction &&
//   closure(
//     Object.assign({}, closureOptions, {
//       // Don't let it create global variables in the browser.
//       // https://github.com/facebook/react/issues/10909
//       assume_function_wrapper: !isUMDBundle,
//       // Works because `google-closure-compiler-js` is forked in Yarn lockfile.
//       // We can remove this if GCC merges my PR:
//       // https://github.com/google/closure-compiler/pull/2707
//       // and then the compiled version is released via `google-closure-compiler-js`.
//       renaming: !shouldStayReadable,
//     })
//   ),

// isProduction && stripUnusedImports(pureExternalModules),

// shouldStayReadable && prettier({parser: 'babylon'}),

// {
//   transformBundle(source) {
//     return Wrappers.wrapBundle(
//       source,
//       bundleType,
//       globalName,
//       filename,
//       moduleType
//     );
//   },
// },
```

找到 `buildEverything` 函数，注释以下代码
```js
# rollup/build.js
...
// await createBundle(bundle, UMD_PROD);
// await createBundle(bundle, UMD_PROFILING);
// await createBundle(bundle, NODE_DEV);
// await createBundle(bundle, NODE_PROD);
// await createBundle(bundle, NODE_PROFILING);
// await createBundle(bundle, FB_WWW_DEV);
// await createBundle(bundle, FB_WWW_PROD);
// await createBundle(bundle, FB_WWW_PROFILING);
// await createBundle(bundle, RN_OSS_DEV);
// await createBundle(bundle, RN_OSS_PROD);
// await createBundle(bundle, RN_OSS_PROFILING);
// await createBundle(bundle, RN_FB_DEV);
// await createBundle(bundle, RN_FB_PROD);
// await createBundle(bundle, RN_FB_PROFILING);
```

找到 `getRollupOutputOptions` 函数，将 `sourcemap: false` 改成 `true`，

至此可以调试我们的源码了，`yarn build` 打包结束后，得到所需要的 .map 文件，

![20240710161439](https://cdn.junxio.cc/static/images/blog/20240710161439.png)

第四步：回到 react-debug 项目，修改 webpack 配置，将 react & react-dom 链接到编译源码

`yarn eject` 后，找到 webpack.config.js 文件，修改 `alias` 配置项
```js
# webpack.config.js
...
alias: {
  ...
  'react$': path.resolve(path.resolve(__dirname, '../react/build/node_modules/react/umd/react.development.js')),
  'react-dom$': path.resolve(path.resolve(__dirname, '../react/build/node_modules/react-dom/umd/react-dom.development.js')),
}
```

注释 `plugins` 插件中以下代码
```js
# webpack.config.js
...
// new ModuleScopePlugin(paths.appSrc, [
//   paths.appPackageJson,
//   reactRefreshRuntimeEntry,
//   reactRefreshWebpackPluginRuntimeEntry,
//   babelRuntimeEntry,
//   babelRuntimeEntryHelpers,
//   babelRuntimeRegenerator,
// ]),
```

启动 react-debug 项目并打开 VSCode 调试，代码中打上断点，在断点调用堆栈中，已经可以看到每一步所对应的方法及源码文件位置

![20240710120954](https://cdn.junxio.cc/static/images/blog/20240710120954.png)


使用 VSCode 调试 React16 源码


```json
// tsconfig.json
{
	"compilerOptions: {
		...
		"module": "amd" // require()
	}
}
```

使用 tsc 指令打包模块代码后，通过 require.js 库引入相关模块

```jsx
require(['page'], function (page) {
  new page.default();
});
```


import 模块代码


```tsx
interface Person {
	name: string;
	age: string;
	gender: string;
}

class Teacher {
	constructor (private info: Person) {}
	getInfo(key: string) {
		return this.info[key] // <- 警告: key 可能是其他值
	}
}

const teacher = new Teacher({
	name: 'dellzhong',
	age: 26,
	gender: 'male'
})

// 使用 keyof
class Teacher {
	constructor (private info: Person) {}
	getInfo<T extends keyof Person>(key: T): Person[T] {
		return this.info[key] // <- 警告: key 可能是其他值
	}
}

keyof Person === 'name' | 'age' | 'gender'
T extends 'name' === type T = 'name'
```

## 类和接口

```tsx
// 类
class Person {
	name: 'dellzhong'
}

type result = keyof Person // <- 'name'

// 接口
interface Person {
	name: string
}

keyof Person // <- 'name'
```

## 比较 K extends keyof T 和使用 keyof T

- [stackoverflow](https://www.notion.so/keyof-2a8bfab08d2e44999b6f32189e405d82)
- [yayu](https://ts.yayujs.com/handbook/KeyofTypeOperator.html#%E7%B1%BB%E5%92%8C%E6%8E%A5%E5%8F%A3)

## 实战

```tsx
function getProperty<Type, Key extends keyof Type>(obj: Type, key: Key) {
  return obj[key];
}

let x = { a: 1, b: 2, c: 3, d: 4 };

getProperty(x, 'a');
getProperty(x, 'm'); // <- error

// Key === '"a" | "b" | "c" | "d"'
```


keyof 语法


## `Enum` 结构

Enum 结构既是「类型」又是「值」，其他 TS 类型编译后会去除，而 Enum 结构编译后成为 JavaScript 对象，留在代码中。

## `.d.ts` 文件

三斜杠引用类型声明文件

## `extends` 条件运算符

常见用法： `T extends U ? X : Y`

```ts
type TypeValues<T> = T extends Function ? ReturnType<T> : T

function getComponent(val: T): TypeValues<T> {
  return typeof val === 'function' ? val() : val
}
```

## `infer` 关键字

用来定义从泛型参数里面推断出来的类型

```ts
type Flatten<T> = T extends Array<infer Item> ? Item : T    

// string
type Str = Flatten<string[]>

// number
type Num = Flatten<number>
```

## `is` 关键词

当函数返回布尔值，`is` 可以限定函数 **返回值** 和 **参数** 的关系

```ts
function isFn (val: any): val is Function {
  return typeof val === 'function'
}

// 类型保护
if (isFn(a)) {
  a()
}
```

## `satisfies` 关键词

对变量实行类型约束，但不改变它的类型。

希望变量符合某个类型匹配，但依然保留其具体的类型推断。

开发中 ts 常见的问题：

![img](https://cdn.junxio.cc/blogs/ts4.9_satisfies_demo0.png)

`obj.name` 无法使用 String 对象实例的方法，因为其被推导出 `string | number` 两种类型。

__使用 `satisfies` 后__

![img](https://cdn.junxio.cc/blogs/ts4.9_satisfies_demo2.png)

`obj.name` 被推导出是一个 `string` 类型

同时也能检测出 `obj.gendar` 单词拼写错误

---

### 参考

- [TypeScript 教程](https://wangdoc.com/typescript)
- [TS 类型挑战](https://github.com/type-challenges/type-challenges)


TypeScript Deep Dive


## 全局类型

例如 jQuery 类库的引入

```tsx
$(function () {
  $('body').html('');
  new $.fn.init();
});

// $ 变量报错
```

定义 jQuery 的声明文件，定义全局变量 / 函数

```tsx
// jquery.d.ts

interface JqueryInstance {
  html: (html: string) => {};
}

// 函数重载
declare function $(fn: () => void): void;
declare function $(selector: string): JqueryInstance;

// 全局对象
declare namespace $ {
  namespace fn {
    class init {}
  }
}
```

```tsx
// jquery.d.ts
// interface 写法

interface jQuery {
  (readyFn: () => void): void; // 函数定义
  (selector: string): JqueryInstance;
}
```

## 模块化代码

```bash
$ npm i jquery
```

```tsx
import $ from 'jquery';

$(function () {}); // $ 报错
```

```tsx
// jquery.d.ts

// ES6 Module
declare module 'jquery' {
  interface JqueryInstance {
    html: (html: string) => {};
  }

  // 混合类型
  function $(fn: () => void): void;
  function $(selector: string): JqueryInstance;
  namespace $ {
    namespace fn {
      class init {}
    }
  }
  export = $;
}
```

### read:

- [https://drylint.com/TypeScript/TS 声明文件 d.ts.html#模块-局部-声明文件](https://drylint.com/TypeScript/TS%E5%A3%B0%E6%98%8E%E6%96%87%E4%BB%B6d.ts.html#%E6%A8%A1%E5%9D%97-%E5%B1%80%E9%83%A8-%E5%A3%B0%E6%98%8E%E6%96%87%E4%BB%B6)


描述文件


> webpack 是现代 JavaScript 应用的模块打包器

- Loader
- Plugins

## 背景

### 为什么需要 JavaScript 模块

- 防止变量名冲突
- 简化开发
- 保证代码之间的依赖关系

代码量增加，依赖管理变得复杂

常用的解决方案，采用**IIFE**(Immediately Invoked Functions Expressions)形式的**揭示模块模式**（revealing module pattern）

立即执行函数执行形成一个不销毁的函数作用域，用来保存私有变量和函数

好处：

- 任何地方都可以实现
- 一个文件定义多个模块

坏处：

- 不能通过编程方式导入模块
- 不支持异步加载模块
- 循环依赖问题
- 静态代码不易解析

**CommonJS**定义了一些规范去帮助服务端 JavaScript 应用。

其中解决的问题之一就是模块问题。

Node.js 的模块实现受到它很大的影响。

在 Node.js 中通过`require`和`exports`两个元素和模块系统交互。

require 的是 node_modules 中的模块名或者路径。

Node 和 CommonJS 有一个区别就是，`module.exports`是 Node 中实际可导出的特殊对象，而在 CommonJS 则没有，`exports`只不过是被绑定了`module.exports`的变量。

意味着，不经过`module.exports`就无法导出一个预先构造好的对象。

CommonJS 的设计考虑到了服务端的开发，模块在源文件中是**同步立即**加载的。

优点：

- 易用，不需要看文档
- 依赖管理集成，模块依赖按顺序同步加载
- 以编程的方式在任何地方调用
- 支持循环依赖

缺点：

- 由于同步加载特性，不适用于客户端[post](https://www.cnblogs.com/wbxjiayou/p/6197678.html)
- 浏览器使用它需要 loader 转换器
- 一个文件一个模块
- 静态代码分析器分析困难

在客户端，两个流行的方案：`webpack`和`browserify`

Browserify 明确用来解析类似 Node 的模块定义。

Webpack 是为了处理创建的复杂的源代码转换，包括将 CommonJS 模块捆绑在一块。

**AMD**，Asynchronous Module Definition 异步模块定义

AMD 的诞生是一群对 CommonJS 不满意的开发者。

主要的区别在于 AMD 对**异步模块加载**的支持。

通过`define`函数传入依赖数组和工厂函数或者直接是一个工厂函数

通过**闭包**存储依赖的异步模块，模块加载完成时调用返回的函数。

```js
define(['dep1', 'dep2'], function (dep1, dep2) {
  return function () {
    // code
  };
});

define(function (require) {
  var dep1 = require('dep1'),
    dep2 = require('dep2');
  return function () {
    // code
  };
});
```

依赖关系是显式的。

优点：

- 异步加载，应用更好的启动时间
- 支持循环依赖
- 模块可以分成多个文件
- 兼容 require 和 exports 语法
- 并行加载模块

缺点：

- 语法稍微复杂
- 静态分析器难以分析

常见的实现有 require.js 和 Dojo

**ESModule**是由 JavaScript 标准化的 ECMA 团队 解决 JavaScript 模块问题的实现，兼容同步和异步的写法。

通过 import 指令引入模块，不同于 CommonJS 和 AMD 它不是动态的，不能在任何位置调用它，export 指令显式导出模块。

**JavaScript 静态分析引擎**在不执行代码的条件下可以构建出完整的模块依赖关系树。

**ES2020**引入`import()`函数，支持动态加载模块。

好处：

- 语法简单
- 支持同步和异步加载（**模块按需加载**）
- 支持循环依赖
- 原生语法，性能好

缺点：

- 还没有普及

浏览器加载 ES6 模块，可以使用 script 标签，需要将 type 属性设置为 module，此时是异步加载，相当于添加了**defer**属性。

**defer**和**async**，都是异步加载，**async**尽可能在加载完成那一刻就把加载的代码执行，会打断页面渲染。

自动开启**严格模式**。

和 CommonJS 的区别：

- CommonJS 导出值的拷贝，ESModule 是值的引用。
- CommonJS 运行时加载，ESModule 是编译时加载。
- CommonJS 的 require 是同步加载，ESModule 的 import 是异步加载，有一个独立的模块依赖解析阶段。

Node.js 从 v13.2 版本开始支持 ES6 模块语法。

要求使用 ES6 模块的文件使用.mjs 的后缀。

不改也可以，可以把 package.json 中的 type 设置为 module。

.mjs 总是以 ES6 模块加载，.cjs 总是以 CommonJS 模块加载，.js 加载取决于 package.json 中 type 字段的值。

SystemJS 是通用模块加载器，

---


什么是 webpack？


控制台输出打包内容

\- \- \-

**Hash**: 	 	打包文件的哈希值

**Version**: 	版本号

**Time**: 	 	打包花费时间

**Built at**: 	打包完成时间点

\- \- \-

- 设置环境变量，mode

  mode默认是 ·production（development）

- chunk是什么，和module的关系是？



## Loaders

模块源代码转换器，允许在导入前或者是加载文件的时候进行预处理。



- **file-loader**

  返回文件名，并把资源转移到某个文件夹下

- **url-loader**

  将文件转换成base64 URLs的形式，可以根据limit限制，大于则和file-loader一样

- **css-loader**

  解析css样式文件之间的依赖@import，通过import / requrie 拿到样式内容

​		css文件中如果引入了sass文件，需要增加一个配置项

```js
[
  {
    loader: "css-loader",
    options: {
      importLoaders: 2,
      // 0 => no loaders (default);
      // 1 => postcss-loader;
      // 2 => postcss-loader, sass-loader
    },
  },
  'postcss-loader',
  'sass-loader'
]
```

- **style-loader**

  将css-loader生成的样式内容插入到html-head头部中

- **sass-loader**

  编译 sass/scss 文件为css文件

- **postcss-loader**

  将css编译为postcss，添加厂商前缀



如何处理iconfont等字体文件？

- 使用file-loader识别资源后缀，然后移动资源



### css module

样式冲突问题

**optionss.modules = true**

```js
{
  loader: "css-loader",
  options: {
    importLoaders: 2,
    modules: true // <= 开启css module 模块化
  },
},
  
import style from 'x.css'
ele.classList.add(style.container)
```



- 阅读sass-loader / css-loader / style-loader / post-loader

- [read asset management](https://v4.webpack.js.org/guides/asset-management/#loading-data)
  - 处理csv xml，csv-loader，xml-loader



## Plugins

插件丰富了webpack的功能，可以在生命周期里执行各种各样的任务，比如包的优化，资源管理，环境变量注入。

plugin可以在webpack运行到某个时刻，帮你做一些事情



**webpack-html-plugin**

简化了html的创建，便于webpack打包，对含哈希值的文件特别有用。

```js
{
	plugins: [
		new WebpackHtmlPlugin({
      template: './src/index.html' // <= 选择一个模板作为生成的html
    }),
  ]
}
```

**clean-webpack-plugin**

清理打包文件夹

**output.filename**

例如：[name].[hash].js

name为entry的键值

hash对应哈希值

**output.publicPath**

## sourceMap

> 将目标代码和源代码做映射，方便调试用

**devtool**


| value | work |
| ----- | ---- |
| source-map | 生成.map文件 |
| **inline**-source-map | 将map信息插入到js文件底部，不生产.map文件 |
| inline-**cheap**-source-map | 只显示行信息，只精确到行，只负责业务代码错误，不管loader里的报错 |
| inline-cheap-**module**-source-map | 包含loader的错误 |
| **eval**-source-map（最快） | 业务代码和source-map代码用eval执行，提高打包速度 |
| **cheap-module-eval**-source-map（开发dev环境推荐） | -- |


> 了解sourceMap原理

## webpack --watch / watch: true

监听文件变动，重新打包，但不会启动一个服务器，不方便做ajax的调试（例如代理）。



## WebpackDevServer

```js
{
  // 本地启动一个服务，用来启动打包后的文件
  devServer: {
    contentBase: './dist', // 打包的文件夹
    open: true, // 打开默认浏览器
  }
}
```

```shell
npm i webpack-dev-server -D
```

```json
// package.json
{
	scripts: {
		"dev": "webpack-dev-server --mode development"
	}
}
```



### 手写服务器

>  在node中使用webpack，也是一种方式

基于express, webpack-dev-middleware搭建自己的devServer

[gist: code](https://gist.github.com/jxzho/ff1076368692de9938ee2340ae78df7f#file-server-js-L11-L14)

[文档：webpack 命令行模式](https://v4.webpack.js.org/api/cli/)

[阅读：guides development](https://v4.webpack.js.org/guides/development/)



## HMR HotModuleReplacement 热更新

> 当文件变动时候，页面不用全部重新加载，从而提高开发效率，利于调试

```js
{
	devServer: {
    hot: true,
    hotOnly: true,
  }
}
```

hot 开启webpack 热模块更新功能

完全开启还需要使用 webpack.HotMoudleReplacementPlugin

hotOnly 如果webpack编译出错，页面不需要重新刷新（保留错误状态，利于调试）



### 热更新的原理

[webpack如何实现热更新](https://www.infoq.cn/article/dioufdrtt3rocojvlrcl)

第一步是建立浏览器和服务器端之间的通信，浏览器接受服务器推送的消息

若需要热更新，浏览器就发送http请求向服务器获取打包好的资源，解析后局部更新



## Babel处理ES6语法

```shell
npm i @babel/core babel-loader @babel/preset-env -D
```

**@babel/preset-env**

借助@babel/preset-env将ES6语法转换成ES5代码



**@babel/polyfill**

polyfill：填充物

额外使用 polyfill 处理一些低版本浏览器没有的特性

```js
{
	options: {
		presets: ['@babel/preset-env', {
			useBuiltIns: 'usage' // 不全局引入polyfill内容，按需引入
		}]
	}
}
```



**@babel/plugin-transform-runtime**

polyfill有时会污染全局环境，**@babel/plugin-transform-runtime**可以以闭包形式注入对应内容，不存在全局污染

```js
{
	plugins: [[
    "@babel/plugin-transform-runtime",
    {
      "coresjs": 2,
      "helpers": true,
      "regenerator": true,
      "useESModules": false,
    }
  ]]
}
```



**@babel/preset-react**

解析React中JSX语法



## Tree Shaking

“摇树”，目的是清除无用代码，只支持**ES Module**，静态分析代码

- 生产环境，默认开启

- 开发环境，手动开启 **optimization.usedExports = true**，确定导出的使用变量

  ```js
  {
    optimization: {
      usedExports: true,
    }
  }
  ```

  

**package.json**

```json
{
  "sideEffects": false
}
```

设置sideEffects为false值，声明当前的包是无“副作用的”。

值为数组形式，显式声明副作用

```json
{
	"sideEffects": [
    '*.css',
    './1.side-effects.js',
  ]
}
```



声明副作用

- 语句级，/\*#\_\_PURE\_\_\*/ 注释语法
- 模块级，"sideEffects": property

根据这些声明，bundler可以跳过副作用的评估。



**[Guides-Tree-Shaking](https://webpack.js.org/guides/tree-shaking/)**

[**你的Tree-Shaking并没什么卵用**](https://zhuanlan.zhihu.com/p/32831172)



webpack 打包输出内容


> webpack 有自己的默认配置

- 如果不写配置文件，会使用内部默认配置

- webpack.config.js，自定义配置文件

## 打包方式

1. 全局安装

   ```shell
   webpack index.js
   ```

2. 局部安装

   ```shell
   npx webpack index.js
   ```

   ```shell
   # npm scripts -> 使用 webpack 指令
   npm run build
   ```

```js
// webpack.config.js
module.exports = {
  entry: './src/index.js', // 源代码入口，一般放在src文件夹
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'), // 默认path
  },
};
```

```json
// npm scripts
{
  "scripts": {
    "build": "webpack"
  }
}
```

```shell
npm run build
```

## webpack-cli

​ 作用：让我们可以使用 webpack 指令


Posts