2019-06 下旬 ✅

  • 创建于：2019-06-21
  • 更新于：2023-03-16

# 2019-06-30: 常见的排序算法及时间复杂度 💊✅✅

好好想想先 😌

  • 参考链接

  • 一句话

    • 冒泡排序：O(n^2)
      • 比较相邻的元素。如果第一个比第二个大，就交换他们两个；
      • 对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对。这步做完后，最后的元素会是最大的数；
      • 针对所有的元素重复以上的步骤，除了最后一个；
      • 持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比较。
    • 选择排序：O(n^2)
      • 在未排序序列中找到最小（大）元素，存放到排序序列的起始位置；
      • 然后，再从剩余未排序元素中继续寻找最小（大）元素，然后放到已排序序列的末尾；
      • 以此类推，直到所有元素均排序完毕。
    • 插入排序：O(n^2)
      • 从第一个元素开始，该元素可以认为已经被排序；
      • 取出下一个元素，在已经排序的元素序列中从后向前扫描；
      • 如果该元素（已排序）大于新元素，将该元素移到下一位置；
      • 重复步骤 3，直到找到已排序的元素小于或者等于新元素的位置；
      • 将新元素插入到该位置后；
      • 重复步骤 2~5。
    • 希尔排序：O(n^2) 不稳定
      • 定义一个用来分割的步长；
      • 按步长的长度 K，对数组进行 K 趟排序；
      • 不断重复上述步骤
    • 快速排序：O(nlogn)
      • 挑选基准值：从数列中挑出一个元素，称为 “基准”（pivot） ；
      • 分割：重新排序序列，所有比基准值小的元素摆放在基准前面，所有比基准值大的元素摆在基准后面（与基准值相等的数可以到任何一边）。在这个分割结束之后，对基准值的排序就已经完成；
      • 递归排序子序列：递归地将小于基准值元素的子序列和大于基准值元素的子序列排序
    • 归并排序：
      • 归并排序是建立在归并操作上的一种有效的排序算法。该算法是采用分治法（Divide and Conquer）的一个典型的应用。 合并排序法是将两个（或两个以上）有序表合并成一个新的有序表，即把待排序序列分为若干个子序列，每个子序列是有序的。然后再把有序子序列合并为整体有序序列。 将已有序的子序列合并，得到完全有序的序列；即先使每个子序列有序，再使子序列段间有序。若将两个有序表合并成一个有序表，称为 2-路归并。

# 2019-06-29: 什么是时间复杂度和空间复杂度，如何分析时间复杂度 ✅✅

好好想想先 😌
  • 参考链接
  • 一句话
    • 时间复杂度：评估执行程序所需的时间。可以估算出程序对处理器的使用程度。
    • 空间复杂度：评估执行程序所需的存储空间。可以估算出程序对计算机内存的使用程度。
    • O(1)<O(logn)<O(n)<O(nlogn)<O(n²)<O(n³)<O(2ⁿ)<O(n!)
      • 执行一次 => O(1)
      • 循环，i++ => O(n)
      • 循环，i = i*n => O(logn)
      • 循环，i = i^n => O(nlogn)
      • 嵌套循环，i++, j++ => O(n²)

# 2019-06-28: 常见的数据结构及应用 💊✅✅

好好想想先 😌
  • 参考链接
  • 一句话
    • 栈：一种遵从先进后出 (LIFO) 原则的有序集合；新添加的或待删除的元素都保存在栈的末尾，称作栈顶，另一端为栈底。在栈里，新元素都靠近栈顶，旧元素都接近栈底。
    • 队列：与上相反，一种遵循先进先出 (FIFO / First In First Out) 原则的一组有序的项；队列在尾部添加新元素，并从头部移除元素。最新添加的元素必须排在队列的末尾。
    • 链表：存储有序的元素集合，但不同于数组，链表中的元素在内存中并不是连续放置的；每个元素由一个存储元素本身的节点和一个指向下一个元素的引用（指针/链接）组成。
    • 集合：由一组无序且唯一（即不能重复）的项组成；这个数据结构使用了与有限集合相同的数学概念，但应用在计算机科学的数据结构中。
    • 字典：以 [键，值] 对为数据形态的数据结构，其中键名用来查询特定元素，类似于 Javascript 中的 Object。
    • 散列：根据关键码值（Key value）直接进行访问的数据结构；它通过把关键码值映射到表中一个位置来访问记录，以加快查找的速度；这个映射函数叫做散列函数，存放记录的数组叫做散列表。
    • 树：由 n（n>=1）个有限节点组成一个具有层次关系的集合；把它叫做“树”是因为它看起来像一棵倒挂的树，也就是说它是根朝上，而叶朝下的，基本呈一对多关系，树也可以看做是图的特殊形式。
    • 堆：堆是一种特殊的树
    • 图：图是网络结构的抽象模型；图是一组由边连接的节点（顶点）；任何二元关系都可以用图来表示，常见的比如：道路图、关系图，呈多对多关系。

# 2019-06-27: 什么是外边距合并，怎样消除? ✅✅

好好想想先 😌

# 2019-06-26: 什么是 BFC？ ✅✅

好好想想先 😌
  • 参考链接
  • 一句话
    • 块格式化上下文（Block Formatting Context，BFC） 是 Web 页面的可视化 CSS 渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域
    • 常用于解决外边距合并问题和 float 高度塌陷问题
    • 下列方式会创建块格式化上下文：
      • 根元素或包含根元素的元素
      • 浮动元素（元素的 float 不是 none）
      • 绝对定位元素（元素的 position 为 absolute 或 fixed）
      • 行内块元素（元素的 display 为 inline-block）
      • 表格单元格（元素的 display 为 table-cell，HTML 表格单元格默认为该值）
      • 表格标题（元素的 display 为 table-caption，HTML 表格标题默认为该值）
      • 匿名表格单元格元素（元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是 HTML table、row、tbody、thead、tfoot 的默认属性）或 inline-table）
      • overflow 值不为 visible 的块元素
      • display 值为 flow-root 的元素，创建无副作用的 BFC
      • contain 值为 layout、content 或 strict 的元素
      • 弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
      • 网格元素（display 为 grid 或 inline-grid 元素的直接子元素）
      • 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
      • column-span 为 all 的元素始终会创建一个新的 BFC，即使该元素没有包裹在一个多列容器中

# 2019-06-25: TypeScript 元组和枚举、protected 和 private 的区别 ✅✅

好好想想先 😌

  • 参考链接

  • 一句话

    • 元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。 比如，你可以定义一对值分别为 string 和 number 类型的元组
    • 枚举类型提供的一个便利是你可以由枚举的值得到它的名字
    enum Color {
  Red = 1,
  Green,
  Blue
}
let colorName: string = Color[2]
    • protected 可在派生类(extends)中使用，private 只能在当前类中使用

# 2019-06-24: vertical-align 属性的作用，可选值 ✅✅

好好想想先 😌
  • 参考链接
  • 一句话
    • CSS 的属性 vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。
    • 可选值：baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>
    • 默认值：baseline

# 2019-06-23: css 伪类选择器，nth-child 和 nth-of-type 的区别？✅✅

好好想想先 😌
  • 参考链接
  • 一句话
    • nth-child 选择同一父级元素下的第 n 个元素，nth-of-type 选择同一类型的第 n 个元素。

# 2019-06-22: CSS Position，各个属性的特征，relative 和 absolute 的关系？✅✅

好好想想先 😌
  • 参考链接
  • 一句话
    • static: 该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
    • relative: 该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。
    • absolute: 不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
    • fixed: 不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。
    • sticky: 盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为 table 时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky 对 table 元素的效果与 position: relative 相同。

# 2019-06-21: webpack loader 和 plugin 有啥区别？✅✅

好好想想先 😌
  • 参考链接
  • 一句话
    • loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS 文件！ 因为 webpack 本身只能处理 JavaScript，如果要处理其他类型的文件，就需要使用 loader 进行转换，loader 本身就是一个函数，接受源文件为参数，返回转换的结果。
    • Plugin 是用来扩展 Webpack 功能的，通过在构建流程里注入钩子实现，它给 Webpack 带来了很大的灵活性。 通过 plugin（插件）webpack 可以实 loader 所不能完成的复杂功能，使用 plugin 丰富的自定义 API 以及生命周期事件，可以控制 webpack 打包流程的每个环节，实现对 webpack 的自定义功能扩展。
< 2019-06 中旬 ✅ 2019-07 上旬 ✅ >