bilibili-lab / Blog

前端基础、深入Vue、深入React、深入Webpack、数据结构与算法

学习笔记

• 记录成为更好的自己。
• 种树最好的时间在十年前其次是现在。
• 牛顿曾经说过:如果说我看得比别人更远些,那是因为我站在巨人的肩膀上。

CSS

• css选择器
• 盒子模型
• BFC
• 垂直居中
• 16 种方法实现水平居中垂直居中
• 控制元素显示与隐藏的实现方式
• link 与 @import 的区别
• css实现三角形
• css实现进度条

基础

• 类型转换：强制转换、隐式转换

• 如何终止 forEach 循环

• 实现 Url 查询参数解析

• 实现 深浅拷贝

• 实现 apply、call、bind

• 实现 new 关键字

• 实现 instanceof 关键字

• 实现 数组扁平化的 6 种方式

• 实现 数组去重

• 实现 防抖与节流

• 实现 EventEmitter

• 实现 PromiseA+ 规范

• 实现 Promise.all 、Promise.race、Promise.prototype.finally()

• 实现 Promise 超时中断如何实现

• 实现 有并行限制的 Promise 调度器

• 实现 compose 函数

• JS 继承 6 种方式

• JS 获取对象属性方式(遍历)

• JS == 和 === 和 Object.is 函数的区别

• 实现 Object.is

• 0.1 + 0.2 > 0.3 问题, 如何解决

• 解码被多次编码的 URL

• 前端二进制(待更新)

浏览器

• 浏览器渲染原理
• 浏览器同源策略与跨域解决方案
• 浏览器缓存策略
• 重排与重绘, 如何避免
• 输入 URL 后发生了什么
• 内存管理及垃圾回收机制(待更新)
• 浏览器存储(待更新)

React

• React 的理解
• PureComponent

TS

• JSDoc规范
• 实现内置工具类型

网络

• https
• DNS解析

性能优化

• 合理选用图片

前端安全

• XSS
• CSRF
• 点击劫持
• 传输安全
• Cooikes
• 密码安全
• 接入层注入问题
• 接入层上传问题

加密算法

加密的目的:

• 保密性：防止用户的标识或数据被读取。
• 数据完整性：防止数据被更改。
• 身份验证：确保数据发自特定的一方。

加密分类：

• 对称加密
• 非对称加密
• 散列函数(hash)

面向函数式编程

面向对象编程

以类和对象作为组织的代码基本方式，并实现封装、继承、多态等特性。

软件开发经历三个阶段：

• 面向对象分析(OOA, Object-Oriented Analysis)
• 面向对象设计(OOD, Object-Oriented Design)
• 面向对象编程(OOP, Object-Oriented Programming)

都是相辅相成的: 分析是为了设计，设计是为了编程。

• 继承
• 封装
• 多态

设计模式

设计模式的六大原则有：

• Open Closed Principle：开闭原则
• Single Responsibility Principle：单一职责原则
• Liskov Substitution Principle：里氏替换原则
• Interface Segregation Principle：接口隔离原则
• Dependence Inversion Principle：依赖倒置原则
• Law of Demeter：迪米特法则

设计模式

111

设计模式分类

• 单例设计模式

数据结构与算法

如何评价一个算法的好坏

• 时间复杂度和空间复杂度

数组

• Leetcode算法题
  • 随机打乱数组/洗牌算法
  • 1. 两数之和
  • 15. 三数之和
  • 11. 盛最多水的容器
  • 26. 删除有序数组中的重复项
  • 66. 加一
  • 88. 合并两个有序数组
  • 189. 旋转数组
  • 283. 移动零

链表

• 链表的基本概念和实现
• 双向链表的基本概念和实现
• Leetcode算法题
  • 206. 反转链表
  • 24. 两两交换链表中的节点
  • 141. 环形链表
  • 142. 环形链表 II
  • 25. K 个一组翻转链表
  • 21. 合并两个有序链表
  • 83. 删除排序链表中的重复元素
  • 83. 删除排序链表中的重复元素

跳表

栈

• 栈的基本概念和实现
• Leetcode算法题
  • 20. 有效的括号
  • 84. 柱状图中最大的矩形
  • 155. 最小栈

队列

• 队列的基本概念和实现
• 双端队列的基本概念和实现

树

• 树的基本概念
• 二叉搜索树实现
• AVL树的概念和实现
• 红黑树的概念和实现
• Leetcode算法题
  • 94. 二叉树的中序遍历
  • 144. 二叉树的前序遍历
  • 145. 二叉树的后序遍历
  • 102. 二叉树的层序遍历
  • 589. N 叉树的前序遍历
  • 590. N 叉树的后序遍历
  • 429. N 叉树的层序遍历

递归

• Leetcode算法题
  • 70. 爬楼梯
  • 509. 斐波那契数
  • 22. 括号生成
  • 226. 翻转二叉树
  • 98. 验证二叉搜索树
  • 104. 二叉树的最大深度
  • 111. 二叉树的最小深度
  • 297. 二叉树的序列化与反序列化
  • 236. 二叉树的最近公共祖先
  • 105. 从前序与中序遍历序列构造二叉树
  • 77. 组合
  • 46. 全排列
  • 47. 全排列 II

分治、回溯

• Leetcode算法题
  • 50. Pow(x, n)
  • 78. 子集
  • 169. 多数元素
  • 17. 电话号码的字母组合
  • 51. N 皇后

深度优先搜索和广度优选搜索

• Leetcode算法题
  • 22. 括号生成
  • 102. 二叉树的层序遍历
  • 515. 二叉树的右视图
  • 127. 单词接龙
  • 257. 二叉树的所有路径
  • 433. 最小基因变化
  • 433. 最小基因变化
  • 126. 单词接龙 II
  • 200. 岛屿数量
  • 529. 扫雷游戏
  • 543. 二叉树的直径

二分查找

• 二分查找基本概念
• Leetcode算法题
  • 69. x 的平方根
  • 367. 有效的完全平方数
  • 74. 搜索二维矩阵
  • 33. 搜索旋转排序数组
  • 153. 寻找旋转排序数组中的最小值

贪心算法

• 贪心算法
• Leetcode算法题
  • 322. 零钱兑换
  • 860. 柠檬水找零
  • 122. 买卖股票的最佳时机 II
  • 455. 分发饼干
  • 874. 模拟行走机器人
  • 45. 跳跃游戏 II

动态规划

• 70. 爬楼梯
• 746. 使用最小花费爬楼梯
• 509. 斐波那契数
• 1143. 最长公共子序列
• 62. 不同路径
• 63. 不同路径 II
• 120. 三角形最小路径和
• 53. 最大子序和
• 152. 乘积最大子数组
• 322. 零钱兑换

字典树和并查集

贪心算法

LRU

• Leetcode算法题
  • 146. LRU 缓存机制

排序算法

• 排序动画网站
• Leetcode算法题
  • 冒泡排序
  • 选择排序
  • 插入排序
  • 快速排序

布隆过滤器

位运算

字符串算法

• 基础算法

  • 165. 比较版本号
  • 709. 转换成小写字母
  • 58. 最后一个单词的长度
  • 771. 宝石与石头
  • 387. 字符串中的第一个唯一字符
  • 剑指 Offer 50. 第一个只出现一次的字符
  • 8. 字符串转换整数 (atoi)

• 字符串操作问题

  • 14. 最长公共前缀
  • 344. 反转字符串
  • 541. 反转字符串 II
  • 151. 翻转字符串里的单词
  • 557. 反转字符串中的单词 III
  • 917. 仅仅反转字母

• 异味词

  • 242. 有效的字母异位词
  • 49. 字母异位词分组
  • 438. 找到字符串中所有字母异位词

• 回文串问题

  • 125. 验证回文串
  • 680. 验证回文字符串 Ⅱ
  • 5. 最长回文子串

• 最长子串、子序列问题

  • 1143. 最长公共子序列
  • https://leetcode-cn.com/problems/edit-distance/
  • https://leetcode-cn.com/problems/longest-palindromic-substring/

• 字符串 +DP 问题

  • https://leetcode-cn.com/problems/regular-expression-matching/
  • https://leetcode-cn.com/problems/regular-expression-matching/solution/ji-yu-guan-fang-ti-jie-gen-xiang-xi-de-jiang-jie-b/
  • https://leetcode-cn.com/problems/wildcard-matching/
  • https://leetcode-cn.com/problems/distinct-subsequences/

• 字符串匹配算法

  • https://leetcode-cn.com/problems/first-unique-character-in-a-string/
  • https://leetcode-cn.com/problems/string-to-integer-atoi/
  • https://leetcode-cn.com/problems/reverse-string-ii/
  • https://leetcode-cn.com/problems/reverse-words-in-a-string/
  • https://leetcode-cn.com/problems/reverse-words-in-a-string-iii/
  • https://leetcode-cn.com/problems/reverse-only-letters/
  • https://leetcode-cn.com/problems/find-all-anagrams-in-a-string/
  • https://leetcode-cn.com/problems/longest-palindromic-substring/
  • https://leetcode-cn.com/problems/isomorphic-strings/
  • https://leetcode-cn.com/problems/valid-palindrome-ii/
  • https://leetcode-cn.com/problems/wildcard-matching
  • https://leetcode-cn.com/problems/longest-valid-parentheses
  • https://leetcode-cn.com/problems/distinct-subsequences/

手写面试题

• 对象属性路径解析
• 点击li元素的时候输出其输出0、1、2
• 数字千分位
• 字符串转驼峰
• rem 基本设置
• 实现 图片懒加载
• 实现 trim 函数
• 实现 Object.create() 函数
• 实现倒计时
• settimeout 模拟实现 setinterval(带清除定时器的版本)
• 实现模板字符串解析功能
• 实现 LazyMan
• 实现 add 函数
• 分片**解决大数据量渲染问题