2019-06 下旬

作者: Bougie 创建于: 2019-06-21 | 成长
  • 2019-06-30: 常见的排序算法及时间复杂度
好好想想先 😌
  • 参考链接

  • 一句话

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

  • 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: 什么是外边距合并,怎样消除
好好想想先 😌
  • 参考链接
  • 一句话
    • 块级元素的上外边距和下外边距有时会合并(或折叠)为一个外边距,其大小取其中的最大者,这种行为称为外边距折叠(margin collapsing),有时也翻译为外边距合并。注意浮动元素和绝对定位元素的外边距不会折叠。
    • 添加 overflow 属性触发 BFC 即可消除。

  • 2019-06-26: 什么是 BFC
好好想想先 😌
  • 参考链接
  • 一句话
    • 块格式化上下文(Block Formatting Context,BFC) 是 Web 页面的可视化 CSS 渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域
    • 下列方式会创建块格式化上下文:
      • 根元素或包含根元素的元素
      • 浮动元素(元素的 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 的元素
      • 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 元组和枚举、protectedprivate 的区别
好好想想先 😌
  • 参考链接

  • 一句话

    • 元组类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同。 比如,你可以定义一对值分别为 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 选择同一个父元素下的顺序。

  • 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-8-10 23:51:27