泛型
泛型泛型，最简单的理解：泛指的类型。（类似函数中的形参与实参）
函数中的泛型使用12345678910111213141516171819202122232425262728293031function join(first: string | number, second: string | number) { return `${first}${second}`}join('jspang', 1); // 如果我想第一个参数是字符串，第二个也必须是字符串，这么就用到泛型// 泛型使用，如同定义形参，在调用时指定类型function join<JSPang>(first: JSPang, second: JSPang) { return `${first}${second}`}join<string>('jspang', '123');join<number>(11, ...
TS-联合类型和类型保护
联合类型和类型保护联合类型 指某个参数可以是多种类型。
类型保护 指参数属于某个类型才有相应的操作。
12345678910111213141516171819202122232425262728293031323334353637383940interface Waiter { anjiao: boolean say: () => {}}interface Teacher { anjiao: boolean skill: () => {}}function judgeWho(animal: (Waiter | Teacher)) { // 联合类型 // 第一种断言方法 if (animal.anjiao) { // (animal as Teacher) 的意思是：断言 animal 是 Teacher类型 (animal as Teacher).skill() } else { (animal as Waiter).s ...
TS-元组、接口
元组元组，可以理解为：已知元素数量和类型的数组
123456789101112131415// 联合类型const xjj:(string | number)[] = ['a',22,'b'] // 规定整个数组当中可以有string或number// 元组注解 注意这里的注解只有一个中括号const xjj1: [string, number, number] = ['a', 22, 33] // 规定了数组每个元素对应位置的类型// Note: 在开发中元祖的使用在相对少// CSV的方式定义数据格式； （二维数组时需要多加一个中括号）const xjj2: [string, number, number][] = [ ['a', 22, 33], ['a', 22, 33]]
接口接口，可以理解为对象属性的类型描述。和类型别名类似，不同的是 接口必须是一个对象，而别名可以直接是一个类型，如 type Girl = string
123456789101112131415161 ...
TS 中 interface 和 type 有什么区别
TS 中 interface 和 type 有什么区别下面这个例子，可以用 type，也可以用 interface。
123456789interface Person { name: string age: number}const person: Person = { name: 'lin', age: 18}
123456789type Person = { name: string age: number}const person: Person = { name: 'lin', age: 18}
那 type 和 interface 难道都可以随便用，总得有个区别吧。TS 文档中说
既然如此，那 interface 和 type 应该是不同的东西才对，一个叫接口，一个叫类型别名。只是有时候两者都能实现同样的功能，才会经常被混淆。
interfaceinterface（接口） 是 TS 设计出来用于定义 ...
数组原型对象的最后一个元素
数组原型对象的最后一个元素
编写一段代码实现一个数组方法，使任何数组都可以调用 array.last() 方法，这个方法将返回数组最后一个元素。如果数组中没有元素，则返回 -1 。
输入：nums = [null, {}, 3]
输出：3
解释：调用 nums.last() 后返回最后一个元素： 3。
输入：nums = []
输出：-1
解释：因为此数组没有元素，所以应该返回 -1。
123Array.prototype.last = function() { return !this.length? -1:this.pop();};
对称二叉树
对称二叉树
给一个二叉树的根节点 root ， 检查它是否轴对称。
输入：root = [1,2,2,3,4,4,3]
输出：true
123456789function isSymmetric(root: TreeNode | null): boolean { return check(root, root);};const check = (p: TreeNode | null, q: TreeNode | null): boolean => { if (!p && !q) return true; if (!p || !q) return false; return p.val === q.val && check(p.left, q.right) && check(p.right, q.left);}
验证回文串
验证回文串如果在将所有大写字符转换为小写字符、并移除所有非字母数字字符之后，短语正着读和反着读都一样。则可以认为该短语是一个 回文串 。
字母和数字都属于字母数字字符。
给你一个字符串 s，如果它是 回文串 ，返回 true ；否则，返回 false 。
输入: s = “A man, a plan, a canal: Panama”
输出：true
解释：”amanaplanacanalpanama” 是回文串。
1234567//正则+字符串反序 只需要比较前一半和后一半的反序相等function isPalindrome(s: string): boolean { const a=(s.match(/[A-Za-z0-9]+/g)?.join("")??"").toLowerCase() const mid=Math.floor(a.length/2) return a.slice(0,mid)===[...a.slice(a.length-mid)].reverse().join("") ...
二进制求和
二进制求和
两个二进制字符串 a 和 b ，以二进制字符串的形式返回它们的和。
例：
输入:a = “11”, b = “1”
输出：”100”
12345678910111213141516171819function addBinary(a: string, b: string): string { let add = 0; let sum = []; for (let i = a.length - 1, j = b.length - 1; i >= 0 || j >= 0; i--, j--) { // 位数不够，默认为 0 let num1 = +a[i] || 0; let num2 = +b[j] || 0; // 两数相同异或为0，0与任意数字异或为数字本身 sum.unshift(num1 ^ num2 ^ add); add = num1 + num2 + add > 1 ? 1 : 0; } if ( ...
什么是长缓存？在Webpack中如何做到长缓存优化？
什么是长缓存？在 Webpack 中如何做到长缓存优化？
什么是长缓存浏览器在用户访问页面的时候，为了加快加载速度，会对用户访问的静态资源进行存储，但是每一次代码升级或者更新，都需要浏览器去下载新的代码，最方便的更新方式就是引入新的文件名称，只下载新的代码块，不加载旧的代码块，这就是长缓存。
具体实现在 Webpack 中，可以在 output 给出输出的文件制定 chunkhash，并且分离经常更新的代码和框架代码，通 NameModulesPlugin 或者 HashedModulesPlugin 使再次打包文件名不变
Webpack 的热更新原理
Webpack 的热更新原理
Webpack 的热更新又称热替换（Hot Module Replacement），缩写为 HMR。 这个机制可以做到不用刷新浏览器而将新变更的模块替换掉旧的模块。
HMR 的核心就是客户端从服务端拉去更新后的文件，准确的说是 chunk diff (chunk 需要更新的部分)，实际上 WDS 与浏览器之间维护了一个 Websocket，当本地资源发生变化时，WDS 会向浏览器推送更新，并带上构建时的 hash，让客户端与上一次资源进行对比。客户端对比出差异后会向 WDS 发起 Ajax 请求来获取更改内容(文件列表、hash)，这样客户端就可以再借助这些信息继续向 WDS 发起 jsonp 请求获取该 chunk 的增量更新。
后续的部分(拿到增量更新之后如何处理？哪些状态该保留？哪些又需要更新？)由 HotModulePlugin 来完成，提供了相关 API 以供开发者针对自身场景进行处理，像 react-hot-loader 和 vue-loader 都是借助这些 API 实现 HMR。
