推荐几篇文章是我个人在面试前都会看一遍的文章： [2万字 | 前端基础拾遗90问](https://juejin.cn/post/6844904116552990727) [1.5万字概括ES6全部特性(已更新ES2020)](https://juejin.cn/post/6844903959283367950) 然后这篇文章记录的就是平时看的一些知识点，不光是面试，在平时敲代码的过程中可能对你也会有所帮助，如果喜欢这篇文章，建议收藏，我会长期更新这篇文章的知识点，感谢支持。然后，推荐一个学习与巩固JS知识的[网站](https://zh.javascript.info/)，本篇文章很多知识点都是从这里面提取的，写的非常好，推荐没事多看看。最后，因为这篇文章是长期更新的，所以很多知识点标题给出了但还没有写，以后都会补上。进阶版面试题跳转这里：[自从用了ChatGPT，一切问题都变得简单起来了，看看AI怎么解答各种疑难面试题！](https://juejin.cn/post/7199886957669351461) # JS基础 ## JS中的变量类型基本类型：`null、undefined、boolean、number、bigint、string、symbol` 复杂类型：`object` 引用类型：`Array、Object、Function、Date、RegExp` 基本包装类型：`Boolean、Number、String` 单体内置对象：`Global、Math` `undefined`：没有定义的变量，var声明没有初始化的变量 `symbol`：一种无法被重建的基本类型，可以作为对象的属性名，可以保证属性名不重复，但不能通过`for in`遍历 ## [原始类型的方法](https://zh.javascript.info/primitives-methods) 上面说了JS有7种基本类型即原始类型。JavaScript 允许我们像使用对象一样使用原始类型（字符串，数字等）。JavaScript 还提供了这样的调用方法。但是，这些特性（feature）都是有成本的！对象比原始类型“更重”。它们需要额外的资源来支持运作。以下是 JavaScript 创建者面临的悖论： - 人们可能想对诸如字符串或数字之类的原始类型执行很多操作。最好将它们作为方法来访问。 - 原始类型必须尽可能的简单轻量。而解决方案看起来多少有点尴尬，如下： 1. 原始类型仍然是原始的。与预期相同，提供单个值 2. JavaScript 允许访问字符串，数字，布尔值和 symbol 的方法和属性。 3. 为了使它们起作用，创建了提供额外功能的特殊“对象包装器”，使用后即被销毁。 “对象包装器”对于每种原始类型都是不同的，它们被称为 `String`、`Number`、`Boolean` 和 `Symbol`。因此，它们提供了不同的方法。例如，字符串方法 [str.toUpperCase()](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase) 返回一个大写化处理的字符串。用法演示如下： ```javascript let str = "Hello"; alert( str.toUpperCase() ); // HELLO ``` 很简单，对吧？以下是 `str.toUpperCase()` 中实际发生的情况： 1. 字符串 `str` 是一个原始值。因此，在访问其属性时，会创建一个包含字符串字面值的特殊对象，并且具有有用的方法，例如 `toUpperCase()`。 2. 该方法运行并返回一个新的字符串（由 `alert` 显示）。 3. 特殊对象被销毁，只留下原始值 `str`。所以原始类型可以提供方法，但它们依然是轻量级的。 JavaScript 引擎高度优化了这个过程。它甚至可能跳过创建额外的对象。但是它仍然必须遵守规范，并且表现得好像它创建了一样。 **总结** - 除 `null` 和 `undefined` 以外的原始类型都提供了许多有用的方法。 - 从形式上讲，这些方法通过临时对象工作，但 JavaScript 引擎可以很好地调整，以在内部对其进行优化，因此调用它们并不需要太高的成本。 ## [Symbol](https://zh.javascript.info/symbol) 这里是Symbol的总结，详情请点击标题链接。 `Symbol` 是唯一标识符的基本类型 Symbol 是使用带有可选描述（name）的 `Symbol()` 调用创建的。 Symbol 总是不同的值，即使它们有相同的名字。如果我们希望同名的 Symbol 相等，那么我们应该使用全局注册表：`Symbol.for(key)` 返回（如果需要的话则创建）一个以 `key` 作为名字的全局 Symbol。使用 `Symbol.for` 多次调用 `key` 相同的 Symbol 时，返回的就是同一个 Symbol。 Symbol 有两个主要的使用场景： 1. “隐藏” 对象属性。如果我们想要向“属于”另一个脚本或者库的对象添加一个属性，我们可以创建一个 Symbol 并使用它作为属性的键。Symbol 属性不会出现在 `for..in` 中，因此它不会意外地被与其他属性一起处理。并且，它不会被直接访问，因为另一个脚本没有我们的 symbol。因此，该属性将受到保护，防止被意外使用或重写。因此我们可以使用 Symbol 属性“秘密地”将一些东西隐藏到我们需要的对象中，但其他地方看不到它。 2. JavaScript 使用了许多系统 Symbol，这些 Symbol 可以作为 `Symbol.*` 访问。我们可以使用它们来改变一些内置行为。例如，在本教程的后面部分，我们将使用 `Symbol.iterator` 来进行 [迭代](https://zh.javascript.info/iterable) 操作，使用 `Symbol.toPrimitive` 来设置 [对象原始值的转换](https://zh.javascript.info/object-toprimitive) 等等。从技术上说，Symbol 不是 100% 隐藏的。有一个内置方法 [Object.getOwnPropertySymbols(obj)](https://developer.mozilla.org/zh/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols) 允许我们获取所有的 Symbol。还有一个名为 [Reflect.ownKeys(obj)](https://developer.mozilla.org/zh/docs/Web/JavaScript/Reference/Global_Objects/Reflect/ownKeys) 的方法可以返回一个对象的 **所有** 键，包括 Symbol。所以它们并不是真正的隐藏。但是大多数库、内置方法和语法结构都没有使用这些方法。 ## 类型转换 **显式类型转换（强制类型转换）** `parseInt()`：字符串转数字，`parseFloat()`同理 ```js parseInt('abc'); // NaN parseInt(3.14); // 3 ``` **隐式类型转换** 双等`==`：先转换类型，再进行比较（值相等即可）三等`===`：不转换类型，直接比较（值和类型相等）减法可以做隐式的类型转换，加法不行 ```js '12'+'5' // '125' '12'-'5' // 7 ``` ## [数组](https://zh.javascript.info/array) JavaScript 中的数组既可以用作队列，也可以用作栈。它们允许你从首端/末端来添加/删除元素。这在计算机科学中，允许这样的操作的数据结构被称为 [双端队列（deque）](https://en.wikipedia.org/wiki/Double-ended_queue)。四个核心方法`pop、push、shift、unshift`这里不展开说明。要注意的是，`push/pop` 方法运行的比较快，而 `shift/unshift` 比较慢。原因也很简单，`push/pop` 方法操作的是数组末尾，操作不会影响其他数组元素，而`shift/unshift` 操作的是数组开头，一旦改动，会影响所有元素的索引。比如`shift`方法： ```javascript fruits.shift(); // 从首端取出一个元素 ``` 只获取并移除数字 `0` 对应的元素是不够的。其它元素也需要被重新编号。 `shift` 操作必须做三件事: 1. 移除索引为 `0` 的元素。 2. 把所有的元素向左移动，把索引 `1` 改成 `0`，`2` 改成 `1` 以此类推，对其重新编号。 3. 更新 `length` 属性。 **内部** 数组是一种特殊的对象。使用方括号来访问属性 `arr[0]` 实际上是来自于对象的语法。它其实与 `obj[key]` 相同，其中 `arr` 是对象，而数字用作键（key）。它们扩展了对象，提供了特殊的方法来处理有序的数据集合以及 `length` 属性。但从本质上讲，它仍然是一个对象。但是数组真正特殊的是它们的内部实现。JavaScript 引擎尝试把这些元素一个接一个地存储在连续的内存区域，就像本章的插图显示的一样，而且还有一些其它的优化，以使数组运行得非常快。但是，如果我们不像“有序集合”那样使用数组，而是像常规对象那样使用数组，这些就都不生效了。例如，从技术上讲，我们可以这样做: ```javascript let fruits = []; // 创建一个数组 fruits[99999] = 5; // 分配索引远大于数组长度的属性 fruits.age = 25; // 创建一个具有任意名称的属性 ``` 这是可以的，因为数组是基于对象的。我们可以给它们添加任何属性。但是 Javascript 引擎会发现，我们在像使用常规对象一样使用数组，那么针对数组的优化就不再适用了，然后对应的优化就会被关闭，这些优化所带来的优势也就荡然无存了。数组误用的几种方式: - 添加一个非数字的属性，比如 `arr.test = 5`。 - 制造空洞，比如：添加 `arr[0]`，然后添加 `arr[1000]` (它们中间什么都没有)。 - 以倒序填充数组，比如 `arr[1000]`，`arr[999]` 等等。请将数组视为作用于 **有序数据** 的特殊结构。它们为此提供了特殊的方法。数组在 JavaScript 引擎内部是经过特殊调整的，使得更好地作用于连续的有序数据，所以请以正确的方式使用数组。如果你需要任意键值，那很有可能实际上你需要的是常规对象 `{}`。 [**关于 “length”**](https://zh.javascript.info/array#guan-yu-length) 当我们修改数组的时候，`length` 属性会自动更新。准确来说，它实际上不是数组里元素的个数，而是最大的数字索引值加一。例如，一个数组只有一个元素，但是这个元素的索引值很大，那么这个数组的 `length` 也会很大： ```javascript let fruits = []; fruits[123] = "Apple"; alert( fruits.length ); // 124 ``` 要知道的是我们通常不会这样使用数组。 `length` 属性的另一个有意思的点是它是可写的。如果我们手动增加它，则不会发生任何有趣的事儿。但是如果我们减少它，数组就会被截断。该过程是不可逆的，下面是例子： ```javascript let arr = [1, 2, 3, 4, 5]; arr.length = 2; // 截断到只剩 2 个元素 alert( arr ); // [1, 2] arr.length = 5; // 又把 length 加回来 alert( arr[3] ); // undefined：被截断的那些数值并没有回来 ``` 所以，清空数组最简单的方法就是：`arr.length = 0;`。 ## JSON和数组的区别 - 数组用`[]`，下标是数字，有length，循环用`length` - JSON用`{}`，下标是字符串，无length，循环用`for in` ## 函数传参 `arguments` `[]` （可变参数）（不定参数）：参数个数可变，是一个数组。例：结合ES6解构赋值，说一下下面的区别： ```js ({a:1,b:1})=>{} ({a,b}={a:1,b:1})=>{} ``` ## [函数表达式 vs 函数声明](https://zh.javascript.info/function-expressions#han-shu-biao-da-shi-vs-han-shu-sheng-ming) 总结一下函数声明和函数表达式之间的主要区别。首先是语法：如何通过代码对它们进行区分。 - **函数声明**：在主代码流中声明为单独的语句的函数。 ```javascript // 函数声明 function sum(a, b) { return a + b; } ``` - **函数表达式**：在一个表达式中或另一个语法结构中创建的函数。下面这个函数是在赋值表达式 `=` 右侧创建的： ```javascript // 函数表达式 let sum = function(a, b) { return a + b; }; ``` 更细微的差别是，JavaScript 引擎会在 **什么时候** 创建函数。 **函数表达式是在代码执行到达时被创建，并且仅从那一刻起可用。** 一旦代码执行到赋值表达式 `let sum = function…` 的右侧，此时就会开始创建该函数，并且可以从现在开始使用（分配，调用等）。函数声明则不同。 **在函数声明被定义之前，它就可以被调用。** 例如，一个全局函数声明对整个脚本来说都是可见的，无论它被写在这个脚本的哪个位置。这是内部算法的原故。当 JavaScript **准备** 运行脚本时，首先会在脚本中寻找全局函数声明，并创建这些函数。我们可以将其视为“初始化阶段”。在处理完所有函数声明后，代码才被执行。所以运行时能够使用这些函数。函数声明的另外一个特殊的功能是它们的块级作用域。 **严格模式下，当一个函数声明在一个代码块内时，它在该代码块内的任何位置都是可见的。但在代码块外不可见。** 例如，想象一下我们需要依赖于在代码运行过程中获得的变量 `age` 声明一个函数 `welcome()`。并且我们计划在之后的某个时间使用它。如果我们使用函数声明，则以下代码无法像预期那样工作： ```javascript let age = prompt("What is your age?", 18); // 有条件地声明一个函数 if (age < 18) { function welcome() { alert("Hello!"); } } else { function welcome() { alert("Greetings!"); } } // ……稍后使用 welcome(); // Error: welcome is not defined ``` 这是因为函数声明只在它所在的代码块中可见。 **[总结](https://zh.javascript.info/function-expressions#zong-jie)** - 函数是值。它们可以在代码的任何地方被分配，复制或声明。 - 如果函数在主代码流中被声明为单独的语句，则称为“函数声明”。 - 如果该函数是作为表达式的一部分创建的，则称其“函数表达式”。 - 在执行代码块之前，内部算法会先处理函数声明。所以函数声明在其被声明的代码块内的任何位置都是可见的。 - 函数表达式在执行流程到达时创建。在大多数情况下，当我们需要声明一个函数时，最好使用函数声明，因为函数在被声明之前也是可见的。这使我们在代码组织方面更具灵活性，通常也会使得代码可读性更高。 ## [克隆与合并，Object.assign](https://zh.javascript.info/object-copy#ke-long-yu-he-bing-objectassign) 拷贝一个对象变量会又创建一个对相同对象的引用。但是，如果我们想要复制一个对象，那该怎么做呢？创建一个独立的拷贝，克隆？这也是可行的，但稍微有点困难，因为 JavaScript 没有提供对此操作的内建的方法。实际上，也很少需要这样做。通过引用进行拷贝在大多数情况下已经很好了。但是，如果我们真的想要这样做，那么就需要创建一个新对象，并通过遍历现有属性的结构，在原始类型值的层面，将其复制到新对象，以复制已有对象的结构。就像这样： ```javascript let user = { name: "John", age: 30 }; let clone = {}; // 新的空对象 // 将 user 中所有的属性拷贝到其中 for (let key in user) { clone[key] = user[key]; } // 现在 clone 是带有相同内容的完全独立的对象 clone.name = "Pete"; // 改变了其中的数据 alert( user.name ); // 原来的对象中的 name 属性依然是 John ``` 我们也可以使用 [Object.assign](https://developer.mozilla.org/zh/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) 方法来达成同样的效果。语法是： ```javascript Object.assign(dest, [src1, src2, src3...]) ``` - 第一个参数 `dest` 是指目标对象。 - 更后面的参数 `src1, ..., srcN`（可按需传递多个参数）是源对象。 - 该方法将所有源对象的属性拷贝到目标对象 `dest` 中。换句话说，从第二个开始的所有参数的属性都被拷贝到第一个参数的对象中。 - 调用结果返回 `dest`。例如，我们可以用它来合并多个对象： ```javascript let user = { name: "John" }; let permissions1 = { canView: true }; let permissions2 = { canEdit: true }; // 将 permissions1 和 permissions2 中的所有属性都拷贝到 user 中 Object.assign(user, permissions1, permissions2); // 现在 user = { name: "John", canView: true, canEdit: true } ``` 如果被拷贝的属性的属性名已经存在，那么它会被覆盖： ```javascript let user = { name: "John" }; Object.assign(user, { name: "Pete" }); alert(user.name); // 现在 user = { name: "Pete" } ``` 我们也可以用 `Object.assign` 代替 `for..in` 循环来进行简单克隆： ```javascript let user = { name: "John", age: 30 }; let clone = Object.assign({}, user); ``` 它将 `user` 中的所有属性拷贝到了一个空对象中，并返回这个新的对象。 ## [深层克隆](https://zh.javascript.info/object-copy#shen-ceng-ke-long) 到现在为止，我们都假设 `user` 的所有属性均为原始类型。但属性可以是对其他对象的引用。那应该怎样处理它们呢？例如： ```javascript let user = { name: "John", sizes: { height: 182, width: 50 } }; alert( user.sizes.height ); // 182 ``` 现在这样拷贝 `clone.sizes = user.sizes` 已经不足够了，因为 `user.sizes` 是个对象，它会以引用形式被拷贝。因此 `clone` 和 `user` 会共用一个 sizes：就像这样： ```javascript let user = { name: "John", sizes: { height: 182, width: 50 } }; let clone = Object.assign({}, user); alert( user.sizes === clone.sizes ); // true，同一个对象 // user 和 clone 分享同一个 sizes user.sizes.width++; // 通过其中一个改变属性值 alert(clone.sizes.width); // 51，能从另外一个看到变更的结果 ``` 为了解决此问题，我们应该使用会检查每个 `user[key]` 的值的克隆循环，如果值是一个对象，那么也要复制它的结构。这就叫“深拷贝”。我们可以用递归来实现。或者不自己造轮子，使用现成的实现，例如 JavaScript 库 [lodash](https://lodash.com/) 中的 [_.cloneDeep(obj)](https://lodash.com/docs#cloneDeep)。 ## [for-in、for-of](https://juejin.cn/post/6916058482231754765) 简单来说就是两者都可以用于遍历，不过`for in`遍历的是数组的索引（`index`），而`for of`遍历的是数组元素值（`value`） **for in** `for in`更适合遍历对象，当然也可以遍历数组，但是会存在一些问题，比如： `index`索引为字符串型数字，不能直接进行几何运算 ```js var arr = [1,2,3] for (let index in arr) { let res = index + 1 console.log(res) } //01 11 21 ``` 遍历顺序有可能不是按照实际数组的内部顺序使用`for in`会遍历数组所有的可枚举属性，包括原型，如果不想遍历原型方法和属性的话，可以在循环内部判断一下，使用`hasOwnProperty()`方法可以判断某属性是不是该对象的实例属性 ```js var arr = [1,2,3] Array.prototype.a = 123 for (let index in arr) { let res = arr[index] console.log(res) } //1 2 3 123 for(let index in arr) { if(arr.hasOwnProperty(index)){ let res = arr[index] console.log(res) } } // 1 2 3 ``` **for of** `for of`遍历的是数组元素值，而且`for of`遍历的只是数组内的元素，不包括原型属性和索引 ```js var arr = [1,2,3] arr.a = 123 Array.prototype.a = 123 for (let value of arr) { console.log(value) } //1 2 3 ``` `for of`适用遍历数/数组对象/字符串/`map`/`set`等拥有迭代器对象（`iterator`）的集合，但是不能遍历对象，因为没有迭代器对象，但如果想遍历对象的属性，你可以用`for in`循环（这也是它的本职工作）或用内建的`Object.keys()`方法 ```js var myObject={ 　　a:1, 　　b:2, 　　c:3 } for (var key of Object.keys(myObject)) { console.log(key + ": " + myObject[key]); } //a:1 b:2 c:3 复制代码 ``` **小结** `for in`遍历的是数组的索引（即键名），而`for of`遍历的是数组元素值 `for in`总是得到对象的`key`或数组、字符串的下标 `for of`总是得到对象的`value`或数组、字符串的值 ## 类型判断 | 方式 | 特性 | 缺点 | | ------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | | `typeof` | `typeof`可以识别出基本类型`boolean,number,undefined,string,symbol`，可以识别出`function`。`typeof`可以用来识别一些基本类型。 | 不能识别`null`。不能识别引用数据类型，会把`null、array、object`统一归为`object`类型。 | | `instanceof` | 可以检测出引用类型，如`array、object、function`，同时对于是使用`new`声明的类型，它还可以检测出多层继承关系。其实也很好理解，js的继承都是采用原型链来继承的。比如`objA instanceof A `，其实就是看objA的原型链上是否有A的原型，而A的原型上保留A的`constructor`属性。所以`instanceof`一般用来检测对象类型，以及继承关系。 | `instanceof`不能识别出基本的数据类型 `number、boolean、string、undefined、unll、symbol`。 | | `constructor` | 指向构造函数，可以用来识别一些基本类型。 | `null、undefined`没有`construstor`方法，因此`constructor`不能判断`undefined`和`null`。它是不安全的，因为`contructor`的指向是可以被改变。 | | `toString` | 此方法可以相对较全的判断js的数据类型。最完美的方案。 | 无 | ```js // 基本数据类型：Undefined、Null、Boolean、Number、String，Symbol // 引用数据类型：Object let bool = true; let num = 1; let str = 'abc'; let und= undefined; let nul = null; let arr = [1,2,3,4]; let obj = {name:'xiaoming',age:22}; let fun = function(){console.log('hello')}; let s1 = Symbol(); // ------------- typeof ---------------- console.log(typeof bool); //boolean console.log(typeof num);//number console.log(typeof str);//string console.log(typeof und);//undefined console.log(typeof nul);//object console.log(typeof arr);//object console.log(typeof obj);//object console.log(typeof fun);//function console.log(typeof s1); //symbol // ------------- instanceof ---------------- console.log(bool instanceof Boolean);// false console.log(num instanceof Number);// false console.log(str instanceof String);// false console.log(und instanceof Object);// false console.log(nul instanceof Object);// false console.log(arr instanceof Array);// true console.log(obj instanceof Object);// true console.log(fun instanceof Function);// true console.log(s1 instanceof Symbol);// false // ------------- constructor ---------------- console.log(bool.constructor === Boolean);// true console.log(num.constructor === Number);// true console.log(str.constructor === String);// true console.log(arr.constructor === Array);// true console.log(obj.constructor === Object);// true console.log(fun.constructor === Function);// true console.log(s1.constructor === Symbol);//true // ------------- typeof ---------------- console.log(Object.prototype.toString.call(bool));//[object Boolean] console.log(Object.prototype.toString.call(num));//[object Number] console.log(Object.prototype.toString.call(str));//[object String] console.log(Object.prototype.toString.call(und));//[object Undefined] console.log(Object.prototype.toString.call(nul));//[object Null] console.log(Object.prototype.toString.call(arr));//[object Array] console.log(Object.prototype.toString.call(obj));//[object Object] console.log(Object.prototype.toString.call(fun));//[object Function] console.log(Object.prototype.toString.call(s1)); //[object Symbol] ``` 总结：在项目中使用哪个判断，还是要看使用场景，具体的选择，一般基本的类型可以选择`typeof`，引用类型可以使用`instanceof`。 ## CSS布局 **flex** 这里推荐一篇[文章](https://juejin.cn/post/6866914148387651592)，推荐速览 **grid** 页面上的弹性布局第一推荐，也推荐一篇[文章](https://juejin.cn/post/6854573220306255880)速览 [**BFC**](https://juejin.cn/post/6844904116552990727) BFC全称 Block Formatting Context 即`块级格式上下文`，简单的说，BFC是页面上的一个隔离的独立容器，不受外界干扰或干扰外界。 **如何触发BFC** - `float`不为 none - `overflow`的值不为 visible - `position` 为 absolute 或 fixed - `display`的值为 inline-block 或 table-cell 或 table-caption 或 grid **BFC的渲染规则是什么** - BFC是页面上的一个隔离的独立容器，不受外界干扰或干扰外界 - 计算BFC的高度时，浮动子元素也参与计算（即内部有浮动元素时也不会发生高度塌陷） - BFC的区域不会与float的元素区域重叠 - BFC内部的元素会在垂直方向上放置 - BFC内部两个相邻元素的margin会发生重叠 **BFC的应用场景** - **清除浮动**：BFC内部的浮动元素会参与高度计算，因此可用于清除浮动，防止高度塌陷 - **避免某元素被浮动元素覆盖**：BFC的区域不会与浮动元素的区域重叠 - **阻止外边距重叠**：属于同一个BFC的两个相邻Box的margin会发生折叠，不同BFC不会发生折叠 ## [CSS3伪类与伪元素](https://juejin.cn/post/6976646049456717838) 伪元素在`CSS3`之前就已经存在，只是没有伪元素的说法，都是归纳为伪类，所有很多人分不清楚伪类和伪元素。比如常用的`:before`和`:after`，它们是伪类还是伪元素？其实在`CSS3`之前被称为伪类，直到`CSS3`才正式区分出来叫伪元素那如何区分伪元素和伪类，记住两点： **1. 伪类表示被选择元素的某种状态，例如`:hover`** **2. 伪元素表示的是被选择元素的某个部分，这个部分看起来像一个独立的元素，但是是"假元素"，只存在于css中，所以叫"伪"的元素，例如`:before`和`:after`** 核心区别在于，是否创造了“新的元素”。其余详细说明可点击标题的连接查看。搞清楚定义，还要知道如何使用，这点很重要。这里也有一篇[文章](https://juejin.cn/post/6844903654756089864)，推荐速览。 ## Promise **前端必须搞懂的一个东西**，面试太常问了！！！这里涉及了几个知识点，我都整理在了[一篇文章](https://juejin.cn/post/7002008722629197832)里，强烈推荐看一看。如果了解了Promise的实现原理，这里列出几个比较深的问题： 1、Promise 中为什么要引入微任务？由于`promise`采用`.then`延时绑定回调机制，而`new Promise`时又需要直接执行`promise`中的方法，即发生了先执行方法后添加回调的过程，此时需等待`then`方法绑定两个回调后才能继续执行方法回调，便可将回调添加到当前js调用栈中执行结束后的任务队列中，由于宏任务较多容易堵塞，则采用了微任务。 2、Promise 中是如何实现回调函数返回值穿透的？首先`Promise`的执行结果保存在`promise`的data变量中，然后是`.then`方法返回值为使用`resolved`或`rejected`回调方法新建的一个`promise`对象，即例如成功则返回`new Promise（resolved）`，将前一个`promise`的data值赋给新建的`promise`。 3、Promise 出错后，是怎么通过“冒泡”传递给最后那个捕获？ `promise`内部有`resolved_`和`rejected_`变量保存成功和失败的回调，进入`.then（resolved，rejected）`时会判断`rejected`参数是否为函数，若是函数，错误时使用`rejected`处理错误；若不是，则错误时直接`throw`错误，一直传递到最后的捕获，若最后没有被捕获，则会报错。可通过监听`unhandledrejection`事件捕获未处理的`promise`错误。 ## [定时器](https://zh.javascript.info/settimeout-setinterval) 有时我们并不想立即执行一个函数，而是等待特定一段时间之后再执行。这就是所谓的“计划调用（scheduling a call）”。目前有两种方式可以实现： - `setTimeout` 允许我们将函数推迟到一段时间间隔之后再执行。 - `setInterval` 允许我们重复运行一个函数，从一段时间间隔之后开始运行，之后以该时间间隔连续重复运行该函数。这两个方法并不在 JavaScript 的规范中。但是大多数运行环境都有内建的调度程序，并且提供了这些方法。目前来讲，所有浏览器以及 Node.js 都支持这两个方法。说一下周期性调度，一种是使用 `setInterval`，另外一种就是嵌套的 `setTimeout`，就像这样：下面来比较这两个代码片段。第一个使用的是 `setInterval`： ```javascript let i = 1; setInterval(function() { func(i++); }, 100); ``` 第二个使用的是嵌套的 `setTimeout`： ```javascript let i = 1; setTimeout(function run() { func(i++); setTimeout(run, 100); // (*) }, 100); ``` 上面这个 `setTimeout` 在当前这一次函数执行完时 `(*)` 立即调度下一次调用。嵌套的 `setTimeout` 要比 `setInterval` 灵活得多。采用这种方式可以根据当前执行结果来调度下一次调用，因此下一次调用可以与当前这一次不同。例如，我们要实现一个服务（server），每间隔 5 秒向服务器发送一个数据请求，但如果服务器过载了，那么就要降低请求频率，比如将间隔增加到 10、20、40 秒等。并且，如果我们调度的函数占用大量的 CPU，那么我们可以测量执行所需要花费的时间，并安排下次调用是应该提前还是推迟。 **嵌套的 `setTimeout` 能够精确地设置两次执行之间的延时，而 `setInterval` 却不能。** 就上面的例子，对 `setInterval` 而言，内部的调度程序会每间隔 100 毫秒执行： ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/826adc39559b4fd7a40cfe92569036b7~tplv-k3u1fbpfcp-watermark.image?) 注意到了吗？ **使用 `setInterval` 时，`func` 函数的实际调用间隔要比代码中设定的时间间隔要短！** 这也是正常的，因为 `func` 的执行所花费的时间“消耗”了一部分间隔时间。也可能出现这种情况，就是 `func` 的执行所花费的时间比我们预期的时间更长，并且超出了 100 毫秒。在这种情况下，JavaScript 引擎会等待 `func` 执行完成，然后检查调度程序，如果时间到了，则 **立即** 再次执行它。极端情况下，如果函数每次执行时间都超过 `delay` 设置的时间，那么每次调用之间将完全没有停顿。这是嵌套的 `setTimeout` 的示意图： ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/eb2dae3a68534659bec05f314f7c6b87~tplv-k3u1fbpfcp-watermark.image?) **嵌套的 `setTimeout` 就能确保延时的固定（这里是 100 毫秒）。** 这是因为下一次调用是在前一次调用完成时再调度的。 > **垃圾回收和 setInterval/setTimeout 回调（callback）** > > 当一个函数传入 `setInterval/setTimeout` 时，将为其创建一个内部引用，并保存在调度程序中。这样，即使这个函数没有其他引用，也能防止垃圾回收器（GC）将其回收。 > > ```javascript > // 在调度程序调用这个函数之前，这个函数将一直存在于内存中 > setTimeout(function() {...}, 100); > ``` > > 对于 `setInterval`，传入的函数也是一直存在于内存中，直到 `clearInterval` 被调用。 > > 这里还要提到一个副作用。如果函数引用了外部变量（译注：闭包），那么只要这个函数还存在，外部变量也会随之存在。它们可能比函数本身占用更多的内存。因此，当我们不再需要调度函数时，最好取消它，即使这是个（占用内存）很小的函数。最后请注意，所有的调度方法都不能 **保证** 确切的延时。例如，浏览器内的计时器可能由于许多原因而变慢： - CPU 过载。 - 浏览器页签处于后台模式。 - 笔记本电脑用的是电池供电（译注：使用电池供电会以降低性能为代价提升续航）。所有这些因素，可能会将定时器的最小计时器分辨率（最小延迟）增加到 300ms 甚至 1000ms，具体以浏览器及其设置为准。 ## AJAX ## 定时器 VS AJAX ```js ajax(...successCallback: (res)=>{console.log(1)}); setTimeout(()=>{console.log(2)}) ``` 入上述代码所示，是先输出1还是2？首先我们知道`ajax`和定时器都是宏任务，那这里就要确认这种不确定回调时间的宏任务是直接加入宏任务队列的吗？答案是否定的，比如`setTimeout`在js执行到的时候是不会直接往宏任务队列中添加的，js会开启一个计时器线程，等到计时器时间到了，再添加到宏任务队列。那么以此类推，`ajax`请求应该也是类似的，只有请求返回了，才会把回调任务加入宏任务队列。再回头看在上面的代码我们知道，浏览器中计时器最小时间为`4ms`，也就是说`4ms`之后输出2，但是`ajax`请求的过程就比较复杂，即使很快的返回了，那也是需要经历一整个网络请求流程，所以不会在`4ms`之内完成，所以我们可以基本确定，先输出2，再输出1。当然这块只是我个人的理解，可以提出疑问。 ## [闭包](https://juejin.cn/post/6844903858636849159) 永远记住闭包的方法是通过背包的类比。当一个函数被创建并传递或从另一个函数返回时，它会携带一个背包。背包中是函数声明时作用域内的所有变量。如果问到闭包的实际应用，那下面的函数防抖和函数节流是最好的例子。 # 常用方法 ## 函数防抖 > [防抖](https://juejin.cn/post/6844904116552990727#heading-6)，即`短时间内大量触发同一事件，只会执行一次函数`，实现原理为`设置一个定时器，约定在xx毫秒后再触发事件处理，每次触发事件都会重新设置计时器，直到xx毫秒内无第二次操作`，防抖常用于搜索框/滚动条的监听事件处理，如果不做防抖，每输入一个字/滚动屏幕，都会触发事件处理，造成性能浪费。 ```js function debounce(func, wait) { let timeout = null return function() { let context = this let args = arguments if (timeout) clearTimeout(timeout) timeout = setTimeout(() => { func.apply(context, args) }, wait) } } ``` ## 函数节流 > 防抖是`延迟执行`，而节流是`间隔执行`，[函数节流](https://juejin.cn/post/6844904116552990727#heading-7)即`每隔一段时间就执行一次`，实现原理为`设置一个定时器，约定xx毫秒后执行事件，如果时间到了，那么执行函数并重置定时器`，和防抖的区别在于，防抖每次触发事件都重置定时器，而节流在定时器到时间后再清空定时器 ```js function throttle(func, wait) { var prev = 0; return function() { let now = Date.now(); let context = this; let args = arguments; if (now - prev > wait) { func.apply(context, args); prev = now; } } } ``` # 前端概念与知识 ## MVVM 1. MVVM（Model-View-ViewModel）是对MVC（Model-View-Control）和MVP（Model-View-Presenter）的进一步改进。 - View：视图层（UI用户界面） - ViewModel：业务逻辑层（一切JS可视为业务逻辑） - Model：数据层（存储数据及对数据的处理，如增删改查） 2. MVVM将数据双向绑定（data-binding）作为核心思想，View和Model之间没有联系，他们通过ViewModel这个桥梁进行交互。 3. Model和ViewModel之间的交互是双向的，因此View的变化会自动同步到Model，而Model的变化也会立即反映到View上显示。 ## JS和ES的关系 1. JS由三部分组成：ES+DOM（文档对象模型）+BOM（浏览器对象模型） 2. ES作为核心，是一套标准，规范了语言的组成，JS是ES规范的实现 ## 解决跨域问题 - JSONP - CORS - 通过修改`document.domain`来跨子域 - 使用`window.name`来进行跨域 - 使用`window.postMessage`方法 - `flash` - 在服务器上设置代理页面 ## XML和JSON的区别 1. 数据体积方面 JSON相对XML来讲数据体积小，传递速度快 2. 数据交互方面 JSON与JS的交互更加方便，更容易解析处理，更好的数据交互 3. 数据描述方面 JSON的数据描述性比XML差 4. 传输速度方面 JSON的速度远快于XML ## [浏览器缓存策略](https://juejin.cn/post/6844904116552990727) ### 浏览器缓存位置和优先级 1. Service Worker 2. Memory Cache（内存缓存） 3. Disk Cache（硬盘缓存） 4. Push Cache（推送缓存） 5. 以上缓存都没命中就会进行网络请求 ### 不同缓存间的差别 > 1. Service Worker 和Web Worker类似，是独立的线程，我们可以在这个线程中缓存文件，在主线程需要的时候读取这里的文件，Service Worker使我们可以自由选择缓存哪些文件以及文件的匹配、读取规则，并且缓存是持续性的 > 1. Memory Cache 即内存缓存，内存缓存不是持续性的，缓存会随着进程释放而释放 > 1. Disk Cache 即硬盘缓存，相较于内存缓存，硬盘缓存的持续性和容量更优，它会根据HTTP header的字段判断哪些资源需要缓存 > 1. Push Cache 即推送缓存，是HTTP/2的内容，目前应用较少 ### 浏览器缓存策略 > 强缓存(不要向服务器询问的缓存) **设置Expires** - 即过期时间，例如`「Expires: Thu, 26 Dec 2019 10:30:42 GMT」`表示缓存会在这个时间后失效，这个过期日期是绝对日期，如果修改了本地日期，或者本地日期与服务器日期不一致，那么将导致缓存过期时间错误。 **设置Cache-Control** - HTTP/1.1新增字段，Cache-Control可以通过`max-age`字段来设置过期时间，例如`「Cache-Control:max-age=3600」`除此之外Cache-Control还能设置`private/no-cache`等多种字段 > 协商缓存(需要向服务器询问缓存是否已经过期) **Last-Modified** - 即最后修改时间，浏览器第一次请求资源时，服务器会在响应头上加上`Last-Modified` ，当浏览器再次请求该资源时，浏览器会在请求头中带上`If-Modified-Since` 字段，字段的值就是之前服务器返回的最后修改时间，服务器对比这两个时间，若相同则返回304，否则返回新资源，并更新Last-Modified **ETag** - HTTP/1.1新增字段，表示文件唯一标识，只要文件内容改动，ETag就会重新计算。缓存流程和 Last-Modified 一样：服务器发送 ETag 字段 -> 浏览器再次请求时发送 If-None-Match -> 如果ETag值不匹配，说明文件已经改变，返回新资源并更新ETag，若匹配则返回304 > 两者对比 - ETag 比 Last-Modified 更准确：如果我们打开文件但并没有修改，Last-Modified 也会改变，并且 Last-Modified 的单位时间为一秒，如果一秒内修改完了文件，那么还是会命中缓存 - 如果什么缓存策略都没有设置，那么浏览器会取响应头中的 Date 减去 Last-Modified 值的 10% 作为缓存时间 ## 事件冒泡与事件委托（代理） ## 重排与重绘一篇[文章推荐](https://juejin.cn/post/6844903745914929165)阅读，文章把渲染队列和优化建议说的很通俗易懂，能快速理解这其中的原理。这里还有一个罗列所有重绘与重排相关的css属性的[网站](https://csstriggers.com/)，挺好玩的。 ## JS垃圾回收机制对于开发者来说，JavaScript 的内存管理是自动的、无形的。我们创建的原始值、对象、函数……这一切都会占用内存。当我们不再需要某个东西时会发生什么？JavaScript 引擎如何发现它并清理它？ ### [可达性（Reachability）](https://zh.javascript.info/garbage-collection#ke-da-xing-reachability) JavaScript 中主要的内存管理概念是 **可达性**。简而言之，“可达”值是那些以某种方式可访问或可用的值。它们一定是存储在内存中的。 1. 这里列出固有的可达值的基本集合，这些值明显不能被释放。比方说： - 当前函数的局部变量和参数。 - 嵌套调用时，当前调用链上所有函数的变量与参数。 - 全局变量。 - （还有一些内部的）这些值被称作 **根（roots）**。 2. 如果一个值可以通过引用或引用链从根访问任何其他值，则认为该值是可达的。对外引用不重要，只有传入引用才可以使对象可达。比方说，如果全局变量中有一个对象，并且该对象有一个属性引用了另一个对象，则 **该** 对象被认为是可达的。而且它引用的内容也是可达的。几个对象相互引用，但外部没有对其任意对象的引用，这些对象也可能是不可达的，并被从内存中删除。在 JavaScript 引擎中有一个被称作 [垃圾回收器](https://en.wikipedia.org/wiki/Garbage_collection_(computer_science)) 的东西在后台执行。它监控着所有对象的状态，并删除掉那些已经不可达的。 ### [内部算法](https://zh.javascript.info/garbage-collection#nei-bu-suan-fa) 垃圾回收的基本算法被称为 “mark-and-sweep”。定期执行以下“垃圾回收”步骤： - 垃圾收集器找到所有的根，并“标记”（记住）它们。 - 然后它遍历并“标记”来自它们的所有引用。 - 然后它遍历标记的对象并标记 **它们的** 引用。所有被遍历到的对象都会被记住，以免将来再次遍历到同一个对象。 - ……如此操作，直到所有可达的（从根部）引用都被访问到。 - 没有被标记的对象都会被删除。我们还可以将这个过程想象成从根溢出一个巨大的油漆桶，它流经所有引用并标记所有可到达的对象。然后移除未标记的。这是垃圾收集工作的概念。JavaScript 引擎做了许多优化，使垃圾回收运行速度更快，并且不影响正常代码运行。一些优化建议： - **分代收集（Generational collection）**—— 对象被分成两组：“新的”和“旧的”。许多对象出现，完成它们的工作并很快死去，它们可以很快被清理。那些长期存活的对象会变得“老旧”，而且被检查的频次也会减少。 - **增量收集（Incremental collection）**—— 如果有许多对象，并且我们试图一次遍历并标记整个对象集，则可能需要一些时间，并在执行过程中带来明显的延迟。所以引擎试图将垃圾收集工作分成几部分来做。然后将这几部分会逐一进行处理。这需要它们之间有额外的标记来追踪变化，但是这样会有许多微小的延迟而不是一个大的延迟。 - **闲时收集（Idle-time collection）**—— 垃圾收集器只会在 CPU 空闲时尝试运行，以减少可能对代码执行的影响。 ### [总结](https://zh.javascript.info/garbage-collection#zong-jie) 主要需要掌握的内容： - 垃圾回收是自动完成的，我们不能强制执行或是阻止执行。 - 当对象是可达状态时，它一定是存在于内存中的。 - 被引用与可访问（从一个根）不同：一组相互连接的对象可能整体都不可达。 ## 如何加快页面加载这是个大的课题，绝对不是简单的用webpack模块化打包、文件压缩等等这些常规的前端操作就能概述完的，我以后也会专门写一篇文章，从域名解析开始到页面加载完全，这期间每个步骤的优化点都会展开来讲讲。 ## HTTP ## [前端安全](https://juejin.cn/post/6844904116552990727) ### 什么是CSRF攻击 > CSRF即Cross-site request forgery(跨站请求伪造)，是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。假如黑客在自己的站点上放置了其他网站的外链，例如`www.weibo.com/api`，默认情况下，浏览器会带着`weibo.com`的cookie访问这个网址，如果用户已登录过该网站且网站没有对CSRF攻击进行防御，那么服务器就会认为是用户本人在调用此接口并执行相关操作，致使账号被劫持。 ### 如何防御CSRF攻击 - 验证`Token`：浏览器请求服务器时，服务器返回一个token，每个请求都需要同时带上token和cookie才会被认为是合法请求 - 验证`Referer`：通过验证请求头的Referer来验证来源站点，但请求头很容易伪造 - 设置`SameSite`：设置cookie的SameSite，可以让cookie不随跨域请求发出，但浏览器兼容不一 ### 什么是XSS攻击 > XSS即Cross Site Scripting（跨站脚本），指的是通过利用网页开发时留下的漏洞，注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。常见的例如在评论区植入JS代码，用户进入评论页时代码被执行，造成页面被植入广告、账号信息被窃取 ### XSS攻击有哪些类型 - **存储型**：即攻击被存储在服务端，常见的是在评论区插入攻击脚本，如果脚本被储存到服务端，那么所有看见对应评论的用户都会受到攻击。 - **反射型**：攻击者将脚本混在URL里，服务端接收到URL将恶意代码当做参数取出并拼接在HTML里返回，浏览器解析此HTML后即执行恶意代码 - **DOM型**：将攻击脚本写在URL中，诱导用户点击该URL，如果URL被解析，那么攻击脚本就会被运行。和前两者的差别主要在于DOM型攻击不经过服务端 ### 如何防御XSS攻击 - **输入检查**：对输入内容中的` ``` 那么DOM解析器会先执行JavaScript脚本，执行完成之后，再继续往下解析。那么第二种情况复杂点了，我们内联的脚本替换成js外部文件，如下所示： ``` 极客时间 ``` 这种情况下，当解析到JavaScript的时候，会先暂停DOM解析，并下载foo.js文件，下载完成之后执行该段JS文件，然后再继续往下解析DOM。这就是JavaScript文件为什么会阻塞DOM渲染。我们再看第三种情况，还是看下面代码： ```

极客时间

``` 当我在JavaScript中访问了某个元素的样式，那么这时候就需要等待这个样式被下载完成才能继续往下执行，所以在这种情况下，CSS也会阻塞DOM的解析。 ## 浏览器的渲染流程是什么？ 1. 渲染进程将 HTML 内容转换为能够读懂的 **DOM 树**结构。 0. 渲染引擎将 CSS 样式表转化为浏览器可以理解的 **styleSheets**，计算出 DOM 节点的样式。 0. 创建**布局树**，并计算元素的布局信息。 0. 对布局树进行分层，并生成**分层树**。 0. 为每个图层生成**绘制列表**，并将其提交到合成线程。 0. 合成线程将图层分成**图块**，并在**光栅化线程池**中将图块转换成位图。 0. 合成线程发送绘制图块命令 **DrawQuad** 给浏览器进程。 0. 浏览器进程根据 DrawQuad 消息**生成页面**，并**显示**到显示器上。 ## 为什么减少重绘、重排能优化 Web 性能吗？那又有那些具体的实践方法能减少重绘、重排呢？重排需要更新完整的渲染流水线，所以开销也是最大的。相较于重排操作，重绘省去了布局和分层阶段，所以执行效率会比重排操作要高一些。如果更改一个既不要布局也不要绘制的属性，渲染引擎将跳过布局和绘制，只执行后续的合成操作，我们把这个过程叫做合成。使用 CSS 的 transform 来实现动画效果，可以避开重排和重绘阶段，直接在非主线程上执行合成动画操作。这样的效率是最高的，因为是在非主线程上合成，并没有占用主线程的资源，另外也避开了布局和绘制两个子阶段，所以相对于重绘和重排，合成能大大提升绘制效率。减少重排重绘, 方法很多： 1. 使用 class 操作样式，而不是频繁操作 style 0. 避免使用 table 布局 0. 批量dom 操作，例如 createDocumentFragment，或者使用框架，例如 React 0. Debounce window resize 事件 0. 对 dom 属性的读写要分离 0. will-change: transform 做优化