Trie 的简易版 js 实现

Trie 能解决什么问题?

假设我们有一个数组:['tiger', 'monkey', 'elephant', 'dog'],我们想要查找里面有没有 dog,最简单的方法是遍历数组,如果要查 10000 次,则遍历数组的次数是 1w * 4 = 4w;如果我们用 trie 来解决这个问题,则会大大的提升我们的速度。构建 trie 的遍历次数是 5 + 6 + 7 + 3 = 21,再查询 10000 次,则是 10000 * 3 + 21 = 30021。很明显,查询次数越多,trie 的性能优势就越明显。

上面的计算可能并不专业,仅供参考。

继续阅读“Trie 的简易版 js 实现”

线段树的 js 实现

Segment tree 可以用来解决一些区间的问题。比如说有 100 个元素的整数数组,想要求其中索引位置在 a - b 之间所有数字的和,那怎么求呢?一种方式是遍历,从 a 到 b,这样的时间复杂度是 O(n) 级别的;第二种是使用线段树,则可以把时间复杂度优化到 O(logn)。

继续阅读“线段树的 js 实现”

40 行原生代码理解 Vue 响应式

Vue 的一大核心是响应式,所以理解她的响应式实现是很重要的。为了帮助最核心的原理理解,我抽丝剥茧于 Vue 源码,实现了一个最简单的响应式系统。明白依赖如何收集;在哪个时机收集的;数据变化了又应该在哪个时机触发视图的更新。

继续阅读“40 行原生代码理解 Vue 响应式”

动画展示插入排序全过程

计划把学习的系列排序算法做个简单的动画,坚持做到 timsort 为止。

动画展示快速排序全过程

继续阅读“动画展示快速排序全过程”

动画展示选择排序全过程

动画展示冒泡排序全过程

就这么一简单玩意儿,花了我一晚上时间,我怎么变得聪明起来呢。

继续阅读“动画展示冒泡排序全过程”

display: flex

css flex 布局要学好,那些 float/bfc 啥的,以后通通不管用了,学习了也没有什么收益。苦于不能很好理解 flex 各种属性和属性值,做了一个小 demo,看能不能帮助你更直观理解 flex。

参考链接

switch 的块级作用域

今天同事在 case 语句加了一个花括号{} ,我感到挺诧异的,问了他为什么要这么干?原来他是为了实现 case 语句的块级作用域,可以解决命名的苦恼,这是一个好的实践,值得推荐。

function foo(condition) {
            switch (condition) {
                case 1: {
                    let a = 1;
                    break
                }
                case 2: {
                    let a = 2
                    console.log(a)
                    break;
                }
            }
        }

foo(2)
继续阅读“switch 的块级作用域”