1.Underscore源码分析
2.原来 JS 的 Array.sort 是插入排序和快速排序的集合！
3.JavaScript?编写枚举的最有效方法分享
4.为什么 querySelectorAll 返回的不是 Array?

Underscore源码分析

       JavaScript，作为最被低估的编程语言之一，自从Node.js的出现，全端开发（All Stack/Full Stack）概念日渐兴起，现今，美工工具源码其地位不可小觑。JavaScript实质上是一种类C语言，对于具备C语言基础的学习者，理解JavaScript代码大体上较为容易，然而，作为脚本语言，JavaScript的灵活性远超C语言，这在一定程度上给学习者带来了一定的困难。

       集合是JavaScript中一种重要的概念，下面我们就来看看其中的几个迭代方法。

       首先，集合中的迭代方法包括`_.each`和`_.forEach`，这两个方法在功能上基本一致，主要用于对集合进行遍历。它们接受三个参数：集合、迭代函数和执行环境。其中，`_.each`和`_.forEach`在ES6中为数组添加了原生的手机游戏棋牌源码`forEach`方法，但后者更灵活，能够应用于所有集合。

       `_.each`和`_.forEach`在遍历时会根据集合的类型（类数组或对象）调用不同的实现。如若集合有`Length`属性且为数字且在0至`MAX_ARRAY_INDEX`之间，则判定为类数组，否则视为对象集合。在遍历过程中，`_.each`和`_.forEach`会根据集合的特性使用合适的迭代方式。

       在处理集合时，`_.map`和`_.reduce`方法的实现原理类似，`_.map`用于获取集合中元素的映射结果，而`_.reduce`则用于逐元素执行函数并逐步聚合结果。

       此外，`_.find`函数与`Array.some()`具有相似性，不同之处在于`_.find`返回第一个使迭代结果为真的元素，而`Array.some()`则返回一个布尔值。`_.find`和`_.detect`函数基于`_.findIndex`和`_.findLastIndex`实现，它们分别在正序和反序的情况下查找满足条件的元素。

       在处理集合时，`_.max`方法用于寻找集合中的最大值，通过循环比较集合中的所有项，最终返回最大值。`_.toArray`则负责将各种类型的生产统计网站源码集合转换为数组，确保数据的格式统一。对于数组、类数组对象、普通对象以及null或undefined的情况，`_.toArray`分别采用了不同的处理方式，确保了转换过程的灵活性与准确性。

       至于集合转换为数组的问题，JavaScript中的数据类型多样，理解它们之间的区别对于开发者来说至关重要。然而，`_.toArray`函数的设计似乎更侧重于处理特定类型的数据，而不仅仅基于JavaScript的基本数据类型。在实际应用中，开发者需要根据具体场景灵活运用这些工具，以实现高效、准确的数据处理。

原来 JS 的 Array.sort 是插入排序和快速排序的集合！

       深入解析 JS 数组的 `sort` 方法，你将发现它是快速排序和插入排序的巧妙结合。这篇文章带你探索 `sort` 方法的内部实现，了解它如何根据数组的长度选择合适的排序算法，从而提升编程思维。

       `sort` 方法的TypeHandler的源码分析基本使用涉及到对数组元素进行排序，返回的是排序后的数组引用。默认情况下，数组元素会被转换为字符串，然后按照 UTF- 码元值进行升序排序。此排序行为依赖于具体实现，因此其时间和空间复杂度无法保证。

       为了自定义排序顺序，可以提供一个 `compareFunction` 函数，用于比较两个元素，并返回一个数字，正负性表示两个元素的相对顺序。这个函数使用一系列参数调用，确保排序过程符合预期。

       若未提供 `compareFunction`，所有非 `undefined` 的数组元素将转换为字符串进行排序。数值排序时，9 在 之前排序，但在 Unicode 顺序中，“”排在“9”之前。所有 `undefined` 元素会被排列到数组末尾。

       接下来，让我们探索 `sort` 方法的底层实现。在 V8 内部，如何源码安装gcc`sort` 方法对于多种边界情况进行了优化，其源码揭示了有趣实现。对于数组长度 n 的不同情况，`sort` 方法采用了不同的排序算法。

       当 n 小于等于 时，插入排序被采用；插入排序是一种直观简单的排序算法，通过构建有序序列，扫描未排序数据，找到相应位置并插入，实现排序效果。插入排序在小数据集上性能优越，尤其是在数据量足够小时，其性能优于快速排序或合并排序。

       当 n 大于 时，快速排序成为首选。快速排序的基本思想是通过一趟排序将待排记录分隔成独立两部分，其中一部分记录的关键字均比另一部分的小，递归地对这两部分进行排序。快速排序的核心是“三路切分”，通过一个整数 x 将数组切分成小于、等于、大于三部分，实现时间复杂度 O(N)，空间复杂度 O(1)。

       具体来说，当 n 小于 时，直接取中点作为三路切分的中位数。当 n 大于 时，通过挑选元素排序后取中位数。这样的设计旨在优化排序性能，避免在某些极端情况下退化为 O(n^2) 级别的时间复杂度。

       总之，`sort` 方法结合了快速排序和插入排序，根据数组长度选择最优排序算法。当数据量较小（n 小于等于 ）时，插入排序性能更优；当数据量较大时，快速排序的性能优势显著。深入理解 `sort` 方法的实现逻辑，有助于提升 JavaScript 编程能力，增强对算法的理解。

JavaScript?编写枚举的最有效方法分享

       在JavaScript中，我们常常需要对一些固定选项进行标记。例如，我们需要统计员工的技术栈，目前我们需要标记的技术有 CSS、JavaScript、HTML、WebGL。以往，我们可能会这样写枚举：

       const SKILLS = { CSS: 1 , JS: 2, HTML: 3, WEB_GL: 4}

       最近，我在学习Vue源码时，发现了一个高效使用枚举的技巧。这种方法可以让我们更高效地管理这些标记。我们可以这样定义枚举：

       const SKILLS = { CSS: 1 , JS: 1 1, HTML: 1 2, WEB_GL: 1 3}

       左移运算符（<<）将第一个操作数左移指定位数。向左移动的多余位被丢弃。零位从右侧移入。例如：二进制的 1 是 ，左移一位是 ，即十进制的 2。如果我们将其移动两位，它将变为 ，即十进制的 4。如果我们将其移动三位，它将变为 ，即十进制的 8。如果我们将其移动 N 位，它将变为 2^N在十进制。

       按照上面的方法定义好枚举后，我们可以这样使用：

       const SKILLS = { CSS: 1 , JS: 1 1, HTML: 1 2, WEB_GL: 1 3}

       // 使用这个值来存储用户的技能栈let skills = 0

       // 添加用户的技能function addSkill(skill) { skills = skills | skill}

       addSkill(SKILLS.CSS)

       addSkill(SKILLS.JS)

       // 如果这个值不为 0，表示用户掌握了该技术console.log('他是否掌握了CSS', (skills & SKILLS.CSS) !== 0)

       console.log('他是否掌握了JavaScript', (skills & SKILLS.JS) !== 0)

       console.log('他是否掌握了WebGL', (skills & SKILLS.WEB_GL) !== 0)

       这里需要注意，| 是按位或运算符，它在每个操作数的对应位为 1 的每个位位置返回 1。例如：const a = 5; // const b = 3; // console.log(a | b); // // 预期输出：7

       如何理解这段代码？在 JavaScript 中，整数存储在 4 个字节中，即 位。第一个代表正负，后面的 位代表数字。当我们用二进制表示 1, 1 2 时，它们看起来像这样：我们定义的枚举变量只有一个二进制格式的1，并且占据不同的位置。当我们向技能添加枚举选项时，我们使用 skills | skill。假设现在我们需要添加的技能是 SKILLS.CSS，那么在执行过程中，就是：

       我们可以发现，在技能中，SKILLS.CSS 对应的位置会变成1。反之，那么我们可以通过查看 skills & SKILLS.CSS 的结果是否为 0 来判断技能中是否存在 SKILLS.CSS。顺便说一句，这里我们也可以发现这个技巧有个缺点，就是枚举项不能超过 个。

       我们为什么要使用这个技巧？答案很简单，这样的代码运行起来更高效。CPU 中有直接对应位操作的指令，因此效率更高。我们也可以做一个性能测试。如果我们不使用按位运算，而是使用传统的方法（数组或映射）来实现，那么代码如下。

       Array 方法：

       const SKILLS = { CSS: 1 , JS: 1 1, HTML: 1 2, WEB_GL: 1 3}

       // 使用数组来存储用户的技能栈let skills = []

       function addSkill(skill) { if (!skills.includes(skill)) { // 避免重复存储 skills.push(skill) }}

       addSkill(SKILLS.CSS)

       addSkill(SKILLS.JS)

       skills.includes(SKILLS.CSS)

       skills.includes(SKILLS.JS)

       skills.includes(SKILLS.WEB_GL)

       Map 方法：

       const SKILLS = { CSS: 1 , JS: 1 1, HTML: 1 2, WEB_GL: 1 3}

       // 使用映射来存储用户的技能栈let skills = { }

       function addSkill(skill) { if (!skills[skill]) { skills[skill] = true }}

       addSkill(SKILLS.CSS)

       addSkill(SKILLS.JS)

       skills[SKILLS.CSS]

       skills[SKILLS.JS]

       skills[SKILLS.WEB_GL]

       这是 jsbench.me 的性能测试：使用按位枚举，性能明显更高。

为什么 querySelectorAll 返回的不是 Array?

       查询所有元素涉及到的规范与数组规范不同，因此查询所有元素返回的不是数组类型。

       从规范角度看，查询所有元素属于 DOM 规范，而数组属于 ECMAScript 规范。DOM 规范强调平台中立性，但并未在规范中提及与数组相关的概念。

       实际上，查询所有元素返回的是 NodeList 类型，这与数组有本质区别。Array 类型来源于 ECMAScript 规范，而 NodeList 则是 DOM 中用于表示一组节点的类。

       具体到源码层面，Chromium 的实现中，查询所有元素返回的是 StaticElementList 类型。该类封装了选择器字符串并提供了节点集合，但与 JavaScript 数组的实现不同。

       JavaScript 数组由 V8 引擎实现，其长度属性通过特定的偏移量在 JSArray 对象上获取。与此相反，StaticElementList 的长度属性计算逻辑与 JavaScript 数组完全不同。

       综上，查询所有元素返回的 NodeList 不是 Array 类型的原因，主要在于两者所属的规范体系不同，以及在实现细节上的差异。