【underscore 源码解读】Array Functions 相关源码拾遗 & 小结

SimpleTriangle 发布于2019-08-19 18:31 / 3340人阅读

摘要：最近开始看源码，并将源码解读放在了我的计划中。将转为数组同时去掉第一个元素之后便可以调用方法总结数组的扩展方法就解读到这里了，相关源码可以参考这部分。放个预告，下一篇会暂缓下，讲下相关的东西，敬请期待。

Why underscore

最近开始看 underscore.js 源码，并将 underscore.js 源码解读放在了我的 2016 计划中。

阅读一些著名框架类库的源码，就好像和一个个大师对话，你会学到很多。为什么是 underscore？最主要的原因是 underscore 简短精悍（约 1.5k 行），封装了 100 多个有用的方法，耦合度低，非常适合逐个方法阅读，适合楼主这样的 JavaScript 初学者。从中，你不仅可以学到用 void 0 代替 undefined 避免 undefined 被重写等一些小技巧，也可以学到变量类型判断、函数节流&函数去抖等常用的方法，还可以学到很多浏览器兼容的 hack，更可以学到作者的整体设计思路以及 API 设计的原理（向后兼容）。

之后楼主会写一系列的文章跟大家分享在源码阅读中学习到的知识。

underscore-1.8.3 源码解读项目地址 https://github.com/hanzichi/underscore-analysis

underscore-1.8.3 源码全文注释 https://github.com/hanzichi/underscore-analysis/blob/master/underscore-1.8.3.js/underscore-1.8.3-analysis.js

underscore-1.8.3 源码解读系列文章 https://github.com/hanzichi/underscore-analysis/issues

欢迎围观~ （如果有兴趣，欢迎 star & watch~）您的关注是楼主继续写作的动力

Main

很快，Array Functions 部分到了尾声，今天来做个了（xiao）结。

underscore 给数组（以及 arguments，这里特别说明下，underscore 的数组扩展方法，同样适用于 arguments）增加了 20 个扩展方法，值得一提的是，很多有意思的方法，比如 map，shuffle 等，都被放在了 Collection Functions 中。本文来看看 Array Functions 中还有哪些有意思的方法（之前没有被提及）。

_.compact

这个方法很有意思，它的作用是剔除数组中的假值，返回数组副本。

实现非常的简单：

_.compact = function(array) {
  return _.filter(array, _.identity);
};

_.filter 我们在以后会讲到，这里你可以把它理解为 Array.prototype.filter 的一个 polyfill，来看看 _.identity 是个什么东东。

_.identity = function(value) {
  return value;
};

乍一看，_.identity 似乎没什么卵用，传入一个参数，原封不动返回这个参数，什么鬼？而再看 _.compact 的实现，就会发现非常巧妙！细细品味下，直接过滤了数组的假值，而 _.identity 在源码中能在多个地方复用。

从这个方法可以想到 PHP 的 array_filter 函数。array_filter 的基本用法和 Array.prototype.filter 相似，都是为了过滤数组中的元素。

function isOdd($num) {
  return $num & 1;
}

$a = Array(1, 2, 3);

$a = array_filter($a, "isOdd");

var_dump($a);

// array
//   0 => int 1
//   2 => int 3

但是，值得注意的是：

If no callback is supplied, all entries of array equal to FALSE (see converting to boolean) will be removed.

这就有点 6 了，直接把 _.filter 和 _.compact 两个方法合二为一了。

$a = Array(0, 1, 2, 3, null, false, 4);

$a = array_filter($a);

var_dump($a);

// array
//   1 => int 1
//   2 => int 2
//   3 => int 3
//   6 => int 4

Array.prototype.filter 为何不设计成这样呢？没有 callback 传入的时候，直接过滤假值...

_.difference & _.without

先来看 _.without，它的作用是从数组中剔除指定的元素。

var a = [1, 2, 3, 4, 5];
var ans = _.without(a, 1, 2, 3);
console.log(ans); // [4, 5]

恩，没错，剔除数组 a 中的 value 为 1, 2, 3 的元素，这个过程中用 === 来进行比较。该方法传入的第一个参数是数组，后面的参数为单个元素。

而 _.difference 呢？和 _.without 的唯一区别是，第二个参数开始传入的是数组。（分别和数组中的元素比较）

var a = [1, 2, 3, 4, 5];
var ans = _.difference(a, [1, 2, 3], [5, 6]);
console.log(ans); // [4]

从 a 数组中剔除 1，2，3，5，6。

仔细一想，如果已经实现了 _.difference，我们把 _.without 的参数放入数组，然后传入 _.difference 就 ok 了！倒过来就不行了（思考下为什么）。

来看 _.difference 的实现，非常简单：

// _.difference(array, *others)
_.difference = function(array) {
  // 将 others 数组展开一层
  // rest[] 保存展开后的元素组成的数组
  // strict 参数为 true
  // 不可以这样用 _.difference([1, 2, 3, 4, 5], [5, 2], 10);
  // 10 就会取不到
  var rest = flatten(arguments, true, true, 1);
  
  // 遍历 array，过滤
  return _.filter(array, function(value){
    // 如果 value 存在在 rest 中，则过滤掉
    return !_.contains(rest, value);
  });
};

不熟悉 flatten 的可以看看前文，当 shallow 和 strict 均为 true 时，展开一层，并且过滤非数组元素，即可以起到将多个数组合并的作用。之后利用 ._filter 进行过滤即可。

而 _.without 方法则建立在 _.difference 基础上。

_.without = function(array) {
  // slice.call(arguments, 1)
  // 将 arguments 转为数组（同时去掉第一个元素）
  // 之后便可以调用 _.difference 方法
  return _.difference(array, slice.call(arguments, 1));
};

总结

数组的扩展方法就解读到这里了，相关源码可以参考 https://github.com/hanzichi/underscore-analysis/blob/master/underscore-1.8.3.js/src/underscore-1.8.3.js#L450-L693 这部分。接下去要解读的是 Collection Functions 部分，所谓 Collection，正是 Object & Array，也就是说这部分方法既可以用于 Object 也能用于 Array，比如我们熟悉的 map，filter，shuffle 等等，都在这部分内。

放个预告，下一篇会暂缓下 Collection Functions，讲下 array-like 相关的东西，敬请期待。

PS：坚持一件事真的挺难，一个月来，每天坚持看点源码，几乎把所有业余时间花在了上面，写了 10 篇随笔，每篇文章写的时间不短，关键还需要构思，如何提炼出一个主题，如何写让人看了会有所收获，恩，继续坚持。请关注我的 Repo https://github.com/hanzichi/underscore-analysis 支持我~

云服务器 GPU云服务器 underscore源码分析源码解读 webrtc源码解读 webrtc fec源码解读

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79637.html

【underscore 源码解读】Object Functions 相关源码拾遗 &amp; 小结

摘要：直接来看例子一目了然，第一个参数是对象，第二个参数可以是一系列的值，也可以是数组数组中含，也可以是迭代函数，我们根据值，或者迭代函数来过滤中的键值对，返回新的对象副本。 Why underscore 最近开始看 underscore.js 源码，并将 underscore.js 源码解读放在了我的 2016 计划中。阅读一些著名框架类库的源码，就好像和一个个大师对话，你会学到很多。...

neuSnail 2019-08-19 18:25 评论0 收藏0
Underscore 整体架构浅析

摘要：支持形式的调用这其实是非常经典的无构造，其实就是一个构造函数，的结果就是一个对象实例，该实例有个属性，属性值是。前言终于，楼主的「Underscore 源码解读系列」underscore-analysis 即将进入尾声，关注下 timeline 会发现楼主最近加快了解读速度。十一月，多事之秋，最近好多事情搞的楼主心力憔悴，身心俱疲，也想尽快把这个系列完结掉，也好了却一件心事。本文...

ningwang 2019-08-20 11:59 评论0 收藏0
【underscore 源码解读】如何优雅地写一个『在数组中寻找指定元素』的方法

摘要：今天要讲的是，如何在数组中寻找元素，对应中的，，，以及方法。如果往一个有序数组中插入元素，使得数组继续保持有序，那么这个插入位置是这就是这个方法的作用，有序，很显然用二分查找即可。 Why underscore （觉得这部分眼熟的可以直接跳到下一段了...）最近开始看 underscore.js 源码，并将 underscore.js 源码解读放在了我的 2016 计划中。阅读一...

0x584a 2019-08-21 10:51 评论0 收藏0
【underscore.js 源码解读】for ... in 存在的浏览器兼容问题你造吗

摘要：最近开始看源码，并将源码解读放在了我的计划中。像和使用内置构造函数所创建的对象都会继承自和的不可枚举属性，例如的方法或者的方法。循环将迭代对象的所有可枚举属性和从它的构造函数的继承而来的包括被覆盖的内建属性。 Why underscore 最近开始看 underscore.js 源码，并将 underscore.js 源码解读放在了我的 2016 计划中。阅读一些著名框架类库的源码...

Pikachu 2019-08-19 18:23 评论0 收藏0
也谈前端面试常见问题之『数组乱序』

摘要：看完部分的源码，首先迫不及待想跟大家分享的正是本文主题数组乱序。这是一道经典的前端面试题，给你一个数组，将其打乱，返回新的数组，即为数组乱序，也称为洗牌问题。关于数组乱序，正确的解法应该是，复杂度。前言终于可以开始 Collection Functions 部分了。可能有的童鞋是第一次看楼主的系列文章，这里再做下简单的介绍。楼主在阅读 underscore.js 源码的时候，学到...

tracy 2019-08-19 18:42 评论0 收藏0