姚永坤的小窝

正则表达式的核心 正则就是匹配模式，要么匹配位置，要么匹配字符。 模式 模式 说明 ^ 匹配开头的位置 $ 匹配结尾的位置 \b 匹配单词边界 \B 匹配非单词边界 (?=表达式) 正向先行断言：(?=表达式)，指在某个位置的右侧必须能匹配表达式 (?!表达式) 反向先行断言：(?!表达式)，指在某个位置的右侧不能匹配表达式 (?<=表达式) 正向后行断言：(?<=表达式)，指在某个位置的左侧必须能匹配表达式 (?<!表达式) 反向后行断言：(?<=表达式)，指在某个位置的左侧必须能匹配表达式 1.匹配/开头结尾的位置 12345678const str1 = 'hello world';const str2 = 'world';const expHead = /^hello/;const expEnd = /^world/;expHead.test(str1);// trueexpHead.test(str2);// falseexpEnd.test(str1);// tr ...

chunk 将数组按照指定区块的长度进行拆分 如果 array 无法被分割成全部等长的区块，那么最后剩余的元素将组成一个区块 参数：(array, [size=1]) 12345const arr = ["a", "b", 1, false, "", { name: "zhangsan" }];console.log(_.chunk(arr, 2));// [[ 'a', 'b' ], [ 1, false ], [ '', { name: 'zhangsan' } ] ]console.log(_.chunk(arr, 4));// [[ 'a', 'b', 1, false ], [ '', { name: 'zhangsan' } ] ] compact 创建一个新数组，包含原数组 ...

react hook 不能放在循环、判断语句中，以及函数体中 useState() 解决函数式组件中无法使用setState管理状态的弊端。 12345678910111213141516171819export default function Demo(){ const [count, setCount] = useState(0)； const onClick = ()=>{ // 直接调用setCount修改值 setCount(count + 1); // 支持回调函数 setCount((count) => count + 1); // 错误写法，页面不会刷新 setCount(()=>{ return count++; }) } return ( <div> <div>{count}</div> <button onClick={onClick ...

SPA 单页Web应用（single page web application，SPA）。 整个应用只有一个完整的页面。 点击页面中的链接不会刷新页面，只会做页面的局部更新。 数据都需要通过ajax请求获取, 并在前端异步展现。 一般组件和路由组件 写法不同： 一般组件：<Demo/> 路由组件：<Route path="/demo" component={Demo}/> 存放位置不同： 一般组件：components 路由组件：pages 接收到的props不同： 一般组件：写组件标签时传递了什么，就能收到什么 路由组件：接收到三个固定的属性history:go: ƒ go(n) goBack: ƒ goBack() goForward: ƒ goForward() push: ƒ push(path, state) replace: ƒ replace(path, state) location:pathname: "/about" search: "" state: ...

受控组件 定义：页面中所有的输入类的 DOM 随着你的输入能够维护状态。 state，setState 非受控组件 定义：页面中所有的输入类的 DOM 现用现取 ref 函数柯里化 通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。 高阶函数 若函数A，接收的参数是一个函数，A就可以是高阶函数。 若函数A，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。 Promise、setTimeout、Array.map等 Diffing算法经典面试题:1). react/vue中的key有什么作用？（key的内部原理是什么？）2). 为什么遍历列表时，key最好不要用index? 虚拟DOM中key的作用： 1). 简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。 2). 详细的说: 当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】, 随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较，比较规则如下： a. 旧虚拟DOM中找到了与新虚拟DOM相同的key： ...

生命周期流程图 生命周期函数初始化阶段constructor构造函数 在 React 组件挂载之前被调用，实现 React.Component 的子类的构造函数时，要在第一行加上 super(props)。 React 构造函数通常只用于两个目的： 通过分配一个对象到 this.state 来初始化本地 state。 将事件处理程序方法绑定到实例。 如果没有初始化状态（state），并且没有绑定方法，通常不需要为 React 组件实现一个构造函数。 不需要在构造函数中调用 setState()，只需将初始状态设置给 this.state 即可 。 static getDerivedStateFromProps(nextProps, prevState) getDerivedStateFromProps 在每次调用 render 方法之前调用。包括初始化和后续更新时。 包含两个参数： 第一个参数为即将更新的 props 值； 第二个参数为之前的 state 值 返回值：返回为 null 时，不做任何副作用处理。倘若想更新某些 state 状态值，则返回一个对象，就会对 sta ...

类型别名 类型别名用来给一个类型起个新名字。 使用 type 创建类名。 12345678910type Name = string;type NameResolver = () => string;type NameOrResolver = Name | NameResolver;function getName(n: NameOrResolver): Name { if (typeof n === 'string') { return n; } else { return n(); }} 字符串字面量类型 字符串字面量类型用来约束取值只能是某几个字符串中的一个。 类型别名与字符串字面量类型都是使用 type 进行定义。 123456789type EventNames = 'click' | 'scroll' | 'mousemove';function handleEvent(ele: ...

内置对象是指根据标准在全局作用域（Global）上存在的对象。这里的标准是指 ECMAScript 和其他环境（比如 DOM）的标准。 ECMAScript 的内置对象 ECMAScript 标准提供的内置对象有： Boolean、Error、Date、RegExp 等。 可以直接在 TypeScript 中将变量定义为这些类型。 1234let b: Boolean = new Boolean(1);let e: Error = new Error('Error occurred');let d: Date = new Date();let r: RegExp = /[a-z]/; DOM 和 BOM 的内置对象 DOM 和 BOM 提供的内置对象有： Document、HTMLElement、Event、NodeList 等。 12345let body: HTMLElement = document.body;let allDiv: NodeList = document.querySelectorAll('div');doc ...

定义 必须以.d.ts为后缀的文件； 用于存储声明语句的一个单独的文件。 第三方声明文件 使用 @types 统一管理第三方库的声明文件。 用 npm 安装对应的声明模块 1npm install @types/jquery --save-dev 书写声明文件 库的使用场景主要有以下几种 全局变量：通过 <script> 标签引入第三方库，注入全局变量 npm 包：通过 import foo from 'foo' 导入，符合 ES6 模块规范 UMD 库：既可以通过 <script> 标签引入，又可以通过 import 导入 直接扩展全局变量：通过 <script> 标签引入后，改变一个全局变量的结构 在 npm 包或 UMD 库中扩展全局变量：引用 npm 包或 UMD 库后，改变一个全局变量的结构 模块插件：通过 <script> 或 import 导入后，改变另一个模块的结构 全局变量declare var/let/const 声明全局变量 一般来说，全局变量都是禁止修改的常量，所以大部分情况都应该使用 ...

类型断言（Type Assertion）可以用来手动指定一个值的类型。 语法123值 as 类型<类型>值 类型断言的限制 若 A 兼容 B，那么 A 能够被断言为 B，B 也能被断言为 A。 12345678910111213141516171819202122interface Animal { name: string;}interface Cat { name: string; run(): void;}let tom: Cat = { name: 'Tom', run: () => { console.log('run') }};let animal: Animal = tom;// 等价于interface Animal { name: string;}interface Cat extends Animal { run(): void;} 双重断 ...