周记 2019/08/30: 重新认识 js array 的 sort 方法。科学管理 chrome 书签

[Penn]

数组排序

平时开发经常使用到数组的排序方法。js 的数组排序很简单, 直接调用实例的 sort 方法。

var elements = [2, 1, 3];
elements.sort()
// result: [1, 2, 3]

sort 的默认规则是升序，但并非简单的比较数值。下面的结果可以证明。

var elements = [2,100,3]
elements.sort()
// result: [100, 2, 3]

那底层的逻辑到底是什么呢？按照 MDN 的说法，排序规则是，将元素转化为 string，然后比较 UTF-16 code。上面数组中三个元素的 UTF-16 code 分别是

100 - [49, 48, 48]
2 - [50]
3 - [51]

比较的规则是从左开始，依次比较，如果长度不够，补 0。所以，很显然 3 最大，2 其次， 100 最小。所以排序结果是 100， 2， 3。

compare function

上面我们直到了默认的排序标准依赖于 UTF-16 code，这在很多场合都不适用。好在 sort 函数支持自定义比较规则。

function compare(a, b) {
  return a - b;
}
elements.sort(compare)
// [2, 3, 100]

a，b 代表两个相邻的元素，b 是 a 的下一个元素。sort 方法将排序过程中的每一对相邻元素传入 compare 函数，根据返回值是否大于 0 来判断是否需要交换元素的位置。详细的规则是：

• 如果结果小于 0， 将 a 放在 b 前面
• 如果结果大于 0， 将 b 放在 a 前面
• 如果结果等于 0， 什么也不做

上面的规则乍一看有些像冒泡排序，当然这只是 API 规则，背后的实现在各个浏览器上都或许各有不同。

回到我们的例子，结合上面的规则和compare 函数的实现，当元素 a 小于后一个元素b 时，compare 函数返回结果小于 0，所以 a 相对于 b 位置不变。当元素 a 大于 b 时，返回结果大于 0， 所以将 b 放在 a 前面，即交换位置。每一次交换都将更小的元素换到更前面，最终，所有的元素按照升序排列。

[2, 3, 100]

对compare函数的规则做一句话总结：当结果大于0，交换元素位置。

Mutated 操作

react 强调 props 应该使用不可变数据结构，即 immutable。理想的 immutable 是绝对不更新原数据，而是生成包含更新的新副本。对于数组，我们知道通过下标更新元素，splice 切除若干元素，都是更新了原始数组，即是比较危险的 mutable 操作。看到这篇文章的时候记得提醒下自己，sort 也是 mutable 操作。

科学管理 chrome 书签

浏览网页时遇到感兴趣的，通常会添加书签以便后续访问。在使用 evernote 之前，所有的好内容都会以书签的形式存在于我的 chrome 里。但是书签有本身的局限性，最大的问题是如果原站点或者对应网页失效，书签也就失去了价值。evernote 的剪藏功能在一定程度上解决了这个问题，当你剪藏的时候，是将此刻网页上显示的内容本身复制到 evernote，而不仅仅是链接。

但是，书签依然是有价值的 —— 因为我期待从这些网页上持续的得到信息而非一次性的剪藏。对我来说，它们是 it 站点，私人博客，工作使用的网页，等等。随着时间推移，收藏夹越来越多，难以管理。于是花了些时间整理了一下，借用了一些工具，如下。

chrome 浏览器书签管理器

chrome 自带的书签管理器支持搜索，删除，修改，打开，复制，等常见的功能，你也可以随意的拖拽某个书签到其他目录，甚至改编左边的目录结构。chrome 的 ui 设计比较符合一般人的使用习惯，不需要要特别的练习也能流畅使用。

Bookmarks

chrome 的书签管理器对于一般的用户绝对是够用了，但像我这样陆陆续续添加过数百个书签，而且很多书签被反复添加过，平时对书签又有一些管理上的洁癖的人，chrome 就不够用了。

Bookmarks 一个比较大的亮点是能够快速的检索到重复的书签，按照分类有不同目录下重复，或者同目录下重复，你可以接着选择删除重复或者保留。

同时，你可以方便的打开 Bookmarks 进行简单的搜索，然后在搜索结果中选择目标书签然后打开。默认的打开方式是新标签，很欣慰。