[underscore 源码学习] unique 去重函数 & compact & range

_.unique

// 源码
_.uniq = _.unique = function(array, isSorted, iteratee, context) {
  if (!_.isBoolean(isSorted)) {
    context = iteratee;
    iteratee = isSorted;
    isSorted = false;
  }
  if (iteratee != null) iteratee = cb(iteratee, context);
  const result = [];
  const seen = [];
  ...
  return result;
}
  • 语法：_.unique(array, isSorted, iteratee)
  • 根据 iteratee 设置的重复标准，对 array 进行去重。通过 isSotrted，提高对有序数组的去重效率。

_.compact

_.compact(array)：去除 array 中所有 “假值” 项目。

在 JavaScript 中，这些值被认为具有 “假值” 意向：

  • false
  • null
  • 0
  • ""
  • undefined
  • NaN

如何验证？

  • Boolean(false); // => false
  • Boolean(null); // => false
  • Boolean(0); // => false
  • Boolean(""); // => false
  • Boolean(undefined); // => false
  • Boolean(NaN); // => false
// 源码
_.compact = function(array) {
  return _.filter(array, Boolean);
};

// 用例
_.compact([0, 1, false, 2, '', 3]); // => [1, 2, 3]

_.range

  • _.range(start, stop, step)：设置步长 step，产生一个 [start, n) 的序列。
    举例：

    1. 产生 [n, m) 内的数组 range(1, 11); => [1,2,3,4,5,6,7,8,9,10]
    2. 指定步长 range(1, 11, 2) => [1,3,5,7,9]
    3. 从 [0, n) range(5) => [1,2,3,4]

  • range 函数作用：快速产生一个落在区间范围内的数组。

下面我们开始源码实现：

test.js

(function(root) {

    const toString = Object.prototype.toString;
    const push = Array.prototype.push;

    const _ = function(obj) {

        if (obj instanceof _) {
            return obj;
        }

        if (!(this instanceof _)) {
            return new _(obj);
        }
        this._wrapped = obj;
    };

    _.uniq = _.unique = function(array, isSorted, iteratee, context) {
        // 没有传 isSorted 时重载参数
        if (!_.isBoolean(isSorted)) {
            context = iteratee;
            iteratee = isSorted;
            isSorted = false;
        }

        // 如果有迭代函数
        if (iteratee != null) {
            iteratee = cb(iteratee, context);
        }

        const result = [];
        // 用来过滤重复值
        let seen;

        for (let i = 0; i < array.length; i++) {
            const computed = iteratee ? iteratee(array[i], i, array) : array[i];
            // 如果是有序的数组，则当前元素只需要跟上一个元素对比即可
            if (isSorted) {
                // !i 为了处理下标为 0 的情况
                if (!i || seen !== computed) result.push(computed);
                seen = computed;
            } else if (result.indexOf(computed) === -1) {
                result.push(computed);
            }
        }

        return result;

    };

    // _.identity = function(value) { return value }; 在 _.filter 里面会 if 判断这里 return 的值，最终返回所有的真值。
    _.compact = function(array) {
        return _.filter(array, _.identity);
    };

    _.range = function(start, stop, step) {
        if (stop == null) {
            stop = start || 0;
            start = 0;
        }

        step = step || 1;
        const length = Math.max(Math.ceil((stop - start) / step), 0);
        const range = Array(length);
        for (let index = 0; index < length; index++, start += step) {
            range[index] = start;
        }
        return range;
    };

    // 以上 ------------------------

    const flatten = function(array, shallow) {
        const ret = [];
        let index = 0;
        for (let i = 0; i < array.length; i++) {
            let value = array[i];
            if (_.isArray(value)) {
                // 递归全部展开
                if (!shallow) {
                    value = flatten(value, shallow);
                }
                let j = 0;
                let len = value.length;
                while (j < len) {
                    ret[index++] = value[j++];
                }
            } else {
                ret[index++] = value;
            }
        }
        return ret;
    };

    _.flatten = function(array, shallow) {
      return flatten(array, shallow);
    };

    _.initial = function(array, n) {
        return [].slice.call(array, 0, Math.max(0, array.length - (n == null ? 1 : n)));
    };

    _.rest = function(array, n, guard) {
        return [].slice.call(array, n == null ? 1 : n);
    };

    // 以上 --------------------------------

    // 返回一个 [min, max] 区间内的任意整数
    _.random = function(min, max) {
        if (max == null) {
            max = min;
            min = 0;
        }
        // 这里 + 1 的原因是因为 Math.random() 的值永远 (0,1) ; 大于 0 小于 1 。
        // 假设 min 为 3，max 为 6；所以是 min + x；x 要想取到 3，则必须 + 1。（0.99 * 4 = 3.96，向下取整为 3）。
        return min + Math.floor((Math.random() * (max - min + 1)));
    };

    _.clone = function(obj) {
        return _.isArray(obj)? obj.slice() : Object.assign({}, obj);
    };

    _.sample = function(array, n) {
        if (n == null) {
            return array[_.random(array.length - 1)]
        }
        const sample = _.clone(array);
        const length = sample.length;
        const last = length - 1;
        n = Math.max(Math.min(n, length), 0);
        for (let index = 0; index < n; index++) {
            // 抽取 [index, last] 中某一位
            // 例如这里随机取 [0, 10] 中的 5，交换 sample[0] 和 sample[5] 的值。下一次迭代取 [1, 10] 之间的值。所以不会重复的值
            const rand = _.random(index, last);
            const temp = sample[index];
            sample[index] = sample[rand]; // 交换
            sample[rand] = temp;
        }
        return sample.slice(0, n);
    };

    // ---------------------

    const createPredicateIndexFinder = function(dir) {
        return function (array, predicate, context) {
            predicate = cb(predicate, context);
            const length = array.length;
            let index = dir > 0? 0 : length - 1;
            for (index; index >= 0 && index < length; index += dir) {
                if (predicate(array[index], index, array)) {
                    return index;
                }
            }
            return -1;
        };
    };

    _.findIndex = createPredicateIndexFinder(1);
    _.findLastIndex = createPredicateIndexFinder(-1);

    _.sortedIndex = function(array, obj, iteratee, context) {
        iteratee = cb(iteratee, context, 1);
        const value = iteratee(obj);
        let low = 0;
        let high = array.length;
        while(low < high) {
            let mid = Math.floor((low + high) / 2);
            if (iteratee(array[mid]) < value) {
                low = mid + 1;
            } else {
                high = mid;
            }
        }
        return low;
    };

    _.isBoolean = function(obj) {
        return obj === true || obj === false || toString.call(obj) === '[object Boolean]';
    };

    // 判断数据类型为 NaN
    _.isNaN = function(obj) {
        return _.isNumber(obj) && isNaN(obj);
    };

    const createIndexFinder = function(dir, predicateFind, sortedIndex) {
        return function(array, item, idx) {
            let i = 0;
            let length = array.length;
            // idx 布尔值代表是否是已经排序好的数组
            if (sortedIndex && _.isBoolean(idx) && length) {
                // 满足条件则使用二分查找
                idx = sortedIndex(array, item);
                return array[idx] === item ? idx : -1;
            }

            // 特殊情况 如果要查找的元素是 NaN 类型 NaN !== NaN
            if (item != item) {
                idx = predicateFind(slice.call(array, i, length), _.isNaN);
                return idx >= 0 ? idx + i : -1;
            }

            // 非上述情况正常遍历
            for (idx = dir > 0? i : length -1; idx >=0 && idx < length; idx += dir) {
                if (array[idx] === item) return idx;
            }

            return -1;
        };
    };

    _.indexOf = createIndexFinder(1, _.findIndex, _.sortedIndex);
    _.lastIndexOf = createIndexFinder(-1, _.findLastIndex);


    _.filter = function(obj, predicate, context) {
        predicate = cb(predicate, context);

        const results = [];

        _.each(obj, function(value, index, list) {
            if (predicate(value, index, list)) {
                results.push(value);
            }
        });

        return results;
    };

    // （direction）dir 为 1，从左到右累加；dir 为 -1，从右到左累加。
    const createReduce = function(dir) {

        const reducer = function(obj, iteratee, memo, initial) {
            const keys = !_.isArray(obj) && Object.keys(obj);
            const length = (keys || obj).length;
            let index = dir > 0? 0 : length - 1;

            // 如果不包含初始值，则使用 第一个或最后一个值 作为初始化值，并相应移动 index dir 步。
            if (!initial) {
                memo = obj[keys? keys[index] : index];
                index += dir;
            }

            for (index; index >= 0 && index < length; index += dir) {
                const currentKey = keys? keys[index] : index;
                memo = iteratee(memo, obj[currentKey], currentKey, obj);
            }
            return memo;
        };


        return function(obj, iteratee, memo, context) {
            // 如果值的个数大于等于 3，说明存在初始化值
            const initial = arguments.length >= 3;
            return reducer(obj, optimizeCb(iteratee, context, 4), memo, initial);
        };
    };

    _.reduce = createReduce(1);

    _.reduceRight = createReduce(-1);

    // rest 参数
    _.restArguments = function(func) {
        // rest 参数位置
        const startIndex = func.length - 1;
        return function() {
            const length = arguments.length - startIndex;
            const rest = Array(length);
            // rest 数组中的成员
            for (let index = 0; index < length; index++) {
                rest[index] = arguments[index + startIndex];
            }
            // 非 rest 参数成员的值一一对应
            const args = Array(startIndex + 1);
            for (let index = 0; index < startIndex; index++) {
                args[index] = arguments[index];
            }

            args[startIndex] = rest;
            return func.apply(this, args);
        };
    };


    _.isFunction = function(obj) {
        return typeof obj === 'function';
    };

    const cb = function(iteratee, context, count) {
        if (iteratee === void 0) {
            return _.identity;
        }

        if (_.isFunction(iteratee)) {
            return optimizeCb(iteratee, context, count);
        }
    };

    const optimizeCb = function(func, context, count) {
        if (context === void 0) {
            return func;
        }

        switch (count == null ? 3 : count) {
            case 1:
                return function(value) {
                    return func.call(context, value);
                };
            case 3:
                return function(value, index, obj) {
                    return func.call(context, value, index, obj);
                };
            case 4:
                return function(memo, value, index, obj) {
                    return func.call(context, memo, value, index, obj);
                }
        }
    };

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

    _.map = function(obj, iteratee, context) {
        // 生成不同功能迭代器
        const cbIteratee = cb(iteratee, context);
        const keys = !_.isArray(obj) && Object.keys(obj);
        const length = (keys || obj).length;
        const result = Array(length);

        for (let index = 0; index < length; index++) {
            const currentKey = keys? keys[index] : index;
            result[index] = cbIteratee(obj[currentKey], index, obj);
        }

        return result;
    };

    _.isArray = function(obj) {
        return toString.call(obj) === "[object Array]";
    };

    _.functions = function(obj) {
        const res = [];
        for (let key in obj) {
            res.push(key);
        }
        return res;
    };

    _.each = _.forEach = function(obj, iteratee, context) {
        iteratee = optimizeCb(iteratee, context);
        if (_.isArray(obj)) {
            for (let i = 0;i < obj.length; i++) {
                iteratee(obj[i], i, obj);
            }
        } else {
            for (let key in obj) {
               iteratee(obj[key], key, obj);
            }
        }
        return obj;
    };

    _.chain = function(obj) {
        const instance = _(obj);
        instance._chain = true;
        return instance;
    };

    const result = function(instance, obj) {
        return instance._chain? _(obj).chain() : obj;
    };

    _.prototype.value = function() {
        return this._wrapped;
    };

    _.mixin = function(obj) {
        _.each(_.functions(obj), (name) => {
            const func = obj[name];

            _.prototype[name] = function() {
                let args = [this._wrapped];
                push.apply(args, arguments);
                return result(this, func.apply(this, args));
            };
        });
    };

    _.mixin(_);

    root._ = _;
})(this);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>underscore</title>
</head>
<body>
    <script src="./test.js"></script>
    <script>
        console.log(_.unique([1,2,3,3,4,5,5,6,7], true));
        console.log(_.unique([3,2,6,5,3,2,8,9,1,0,7,1], function(value) {
            return value + 1;
        }));
        console.log(_.compact([1,null, "", false, true, undefined, NaN, {'a': 1}]));
        console.log(_.range(10));
        console.log(_.range(1, 11, 2));
    </script>
</body>
</html>

显示结果如下：


最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 214,837评论 6赞 496
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,551评论 3赞 389
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 160,417评论 0赞 350
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,448评论 1赞 288
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,524评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,554评论 1赞 293
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,569评论 3赞 414
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,316评论 0赞 270
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,766评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,077评论 2赞 330
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,240评论 1赞 343
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,912评论 5赞 338
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,560评论 3赞 322
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,176评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,425评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,114评论 2赞 366
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,114评论 2赞 352