Skip to content

标准内置对象

  • Infinity,无穷大

  • NaN,不是一个数字

  • undefined,未赋值

  • globalThis,任何环境下的 this

函数

  • parseInt,从给定的字符串中解析出的一个整数或者 NaN

  • encodeURI,url 编码,以下情况不会被编码,解码(decodeURI())

    1. 保留字符:; , / ? : @ & = + $

    2. 非转义的字符:字母 数字 - _ . ! ~ * ' ( )

    3. 数字符号:#

  • encodeURIComponent,url 编码,除了非转义字符,解码(decodeURIComponent())

    1. 字母 数字 - _ . ! ~ * ' ( )
  • isFinite(),判断是否是有限数值

数字、日期对象

  • BigInt:可以表示大于 2^53 - 1 的整数

数据类型区别

  • 值类型

    占用空间固定,保存在栈中(当一个方法执行时,每个方法都会建立自己的内存栈,在这个方法内定义的变量将会逐个放入这块栈内存里,随着方法的执行结束,这个方法的内存栈也将自然销毁了。因此,所有在方法中定义的变量都是放在栈内存中的;栈中存储的是基础变量以及一些对象的引用变量,基础变量的值是存储在栈中,而引用变量存储在栈中的是指向堆中的数组或者对象的地址,这就是为何修改引用类型总会影响到其他指向这个地址的引用变量。)

  • 引用类型

    占用空间不固定,保存在堆中(当我们在程序中创建一个对象时,这个对象将被保存到运行时数据区中,以便反复利用(因为对象的创建成本通常较大),这个运行时数据区就是堆内存。堆内存中的对象不会随方法的结束而销毁,即使方法结束后,这个对象还可能被另一个引用变量所引用(方法的参数传递时很常见),则这个对象依然不会被销毁,只有当一个对象没有任何引用变量引用它时,系统的垃圾回收机制才会在核实的时候回收它。)

继承

原型

每一个 js 对象(除 null)都有另一个对象有关联,这里另一个对象就是原型,每个对象都从原型继承属属性

观察者模式

发布-订阅模式

模块化

ES6

数据结构

  • Set

    类数组,成员唯一,可遍历

    • add

    • delete

    • has

    • clear

    • keys

    • values

    • forEach

  • WeakSet

    只能存储对象,不可遍历,垃圾回收运行前后,部分成员可能被回收

  • Map

    键值对

    • size,成员总数

    • set,设置键名对应的键值

    • get,读取 key 对应的键值

    • has,判断是否包含某个 key

    • delete,删除某个键,如果删除失败,返回 false

    • clear

    • keys

    • values

    • entries

    • forEach

  • WeakMap

    只支持对象作为键名

Promise

Async/Await

浏览器

重绘、重排

浏览器渲染机制

http 协议

三次握手,四次挥手

状态管理

redux

框架

react

react dev tool

portal

Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案

生命周期

  • 16.4 以后
  1. constructor

    初始化 state

  2. getDerivedStateFromProps

    第一次渲染和更新时会调用,静态函数,无法获取 this,根据 props 更新 state,不过会导致 state 来源不单一

  3. getSnapshotBeforeUpdate

    在 dom 渲染前的快照,可以保存原来的 state,props

  4. componentDidMount

    渲染真实 dom 树后调用

  5. componentDidUpdate

    更新完成函数

  6. componentWillUnmount

    组件卸载,清除定时器

其他

技术选型

扩展性

  • 易于增加新功能

  • 新功能的增加带来的系统复杂度

维护性

  • 代码逻辑清晰、简洁,便于扩展与修改

  • 高内聚、低耦合

  • 文档健全

易于测试

  • 功能分层清晰

  • 副作用少,尽量使用纯函数

  • 开发工具完善度、社区活跃度、生态圈

易于构建

  • 使用通用技术与架构

  • 构建工具的选择

数据结构与算法

web 安全

XSS(跨站脚本攻击)

浏览器渲染整个 HTML 文档的过程中出现了不被预期的脚本指令执行

存储型 XSS

前端提交的数据未经处理存储到数据库,在读取返回到页面上时引发问题,比如执行 js 代码

反射型 XSS

发出请求时,XSS 代码作为输入提交到服务端,服务端解析后返回这段 XSS 代码,最后浏览器解析执行

DOM 型 XSS

防范

  1. 转译特殊字符

  2. cookie,设置 Secure 只允许 https 协议传输,设置 HttpOnly,防止 js 脚本获取 cookie

  3. CSP 内容安全策略

CSRF(跨站请求伪造)

一种诱骗受害者提交恶意请求的攻击,攻击者盗用了你的身份,以你的名义发送恶意请求,请求到达后端时,服务器将无法区分恶意请求和合法请求。CSRF 能够做的事情包括:以你名义发送邮件,发消息,盗取你的账号,甚至于购买商品,虚拟货币转账等。

防范

  1. 同源检测,禁止外域的请求

  2. CSRF token,服务端校验 token

monorepo

pnpm workspace

Released under the MIT License.