underscore.js 293--409

最新推荐文章于 2022-04-28 21:29:17 发布
最新推荐文章于 2022-04-28 21:29:17 发布
阅读量241 收藏
点赞数 1
分类专栏： underscore源码一天学一点 (已完结) 文章标签： 函数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37396970/article/details/75175174
版权 
 // Invoke a method (with arguments) on every item in a collection.
  _.invoke = restArgs(function(obj, path, args) {
    var contextPath, func;
    if (_.isFunction(path)) {
      func = path;
    } else if (_.isArray(path)) {
      contextPath = path.slice(0, -1);
      path = path[path.length - 1];
    }
    return _.map(obj, function(context) {
      var method = func;
      if (!method) {
        if (contextPath && contextPath.length) {
          context = deepGet(context, contextPath);
        }
        if (context == null) return void 0;
        method = context[path];
      }
      return method == null ? method : method.apply(context, args);
    });
  });

  // Convenience version of a common use case of `map`: fetching a property.
  _.pluck = function(obj, key) {
    return _.map(obj, _.property(key));
  };

  // Convenience version of a common use case of `filter`: selecting only objects
  // containing specific `key:value` pairs.
  _.where = function(obj, attrs) {
    return _.filter(obj, _.matcher(attrs));
  };

  // Convenience version of a common use case of `find`: getting the first object
  // containing specific `key:value` pairs.
  _.findWhere = function(obj, attrs) {
    return _.find(obj, _.matcher(attrs));
  };

  // Return the maximum element (or element-based computation).
  _.max = function(obj, iteratee, context) {
    var result = -Infinity, lastComputed = -Infinity,
        value, computed;
    if (iteratee == null || (typeof iteratee == 'number' && typeof obj[0] != 'object') && obj != null) {
      obj = isArrayLike(obj) ? obj : _.values(obj);
      for (var i = 0, length = obj.length; i < length; i++) {
        value = obj[i];
        if (value != null && value > result) {
          result = value;
        }
      }
    } else {
      iteratee = cb(iteratee, context);
      _.each(obj, function(v, index, list) {
        computed = iteratee(v, index, list);
        if (computed > lastComputed || computed === -Infinity && result === -Infinity) {
          result = v;
          lastComputed = computed;
        }
      });
    }
    return result;
  };

  // Return the minimum element (or element-based computation).
  _.min = function(obj, iteratee, context) {
    var result = Infinity, lastComputed = Infinity,
        value, computed;
    if (iteratee == null || (typeof iteratee == 'number' && typeof obj[0] != 'object') && obj != null) {
      obj = isArrayLike(obj) ? obj : _.values(obj);
      for (var i = 0, length = obj.length; i < length; i++) {
        value = obj[i];
        if (value != null && value < result) {
          result = value;
        }
      }
    } else {
      iteratee = cb(iteratee, context);
      _.each(obj, function(v, index, list) {
        computed = iteratee(v, index, list);
        if (computed < lastComputed || computed === Infinity && result === Infinity) {
          result = v;
          lastComputed = computed;
        }
      });
    }
    return result;
  };

  // Shuffle a collection.
  _.shuffle = function(obj) {
    return _.sample(obj, Infinity);
  };

  // Sample **n** random values from a collection using the modern version of the
  // [Fisher-Yates shuffle](http://en.wikipedia.org/wiki/Fisher–Yates_shuffle).
  // If **n** is not specified, returns a single random element.
  // The internal `guard` argument allows it to work with `map`.
  _.sample = function(obj, n, guard) {
    if (n == null || guard) {
      if (!isArrayLike(obj)) obj = _.values(obj);
      return obj[_.random(obj.length - 1)];
    }
    var sample = isArrayLike(obj) ? _.clone(obj) : _.values(obj);
    var length = getLength(sample);
    n = Math.max(Math.min(n, length), 0);
    var last = length - 1;
    for (var index = 0; index < n; index++) {
      var rand = _.random(index, last);
      var temp = sample[index];
      sample[index] = sample[rand];
      sample[rand] = temp;
    }
    return sample.slice(0, n);
  };

_.invoke

 // Invoke a method (with arguments) on every item in a collection.
  _.invoke = restArgs(function(obj, path, args) {
    var contextPath, func;
    if (_.isFunction(path)) {
      func = path;
    } else if (_.isArray(path)) {
      contextPath = path.slice(0, -1);
      path = path[path.length - 1];
    }
    return _.map(obj, function(context) {
      var method = func;
      if (!method) {
        if (contextPath && contextPath.length) {
          context = deepGet(context, contextPath);
        }
        if (context == null) return void 0;
        method = context[path];
      }
      return method == null ? method : method.apply(context, args);
    });
  });

先看restArg，我们知道这个就是给函数赋予一个rest param，但invoke里的函数有是怎么会是呢？
传入参数obj和后面的args不难理解， 但中间的path参数到底是什么意思？

看后面

if (_.isFunction(path)) {
      func = path; //func
    } else if (_.isArray(path)) {
      contextPath = path.slice(0, -1); // pop
      path = path[path.length - 1]; // the last
    }

原来是函数或者一个数组
然后开始遍历obj:

return _.map(obj, function(context) {
      var method = func;
      if (!method) {
        if (contextPath && contextPath.length) {
          context = deepGet(context, contextPath);
        }
        if (context == null) return void 0;
        method = context[path];
      }
      return method == null ? method : method.apply(context, args);
    });

这个部分很耐人寻味，看似很难弄懂，但我们发现，最后返回的数组部分有return method
这个method顺着向上，我们找到了func这个东西
我们假设，path部分填充的是一个函数，那么会发生什么？

var result = $.invoke([{a:1}], function () {console.log(this.a)})
console.log(result) // [undefined]

我们从源代码可知：一旦path为一个function， 则func被指定为该函数，而method也会被填充，会跳过！method部分，进而直接调用该函数，并且context会设置为对应的数组item部分。

好的，那么如果path并非是个函数，而是个数组呢？
我们看到此时path就会作为一个contextPath保存，并去掉最后一个值，最后一个值保留起来作为属性名，用deepget先按路径取得context，最后调用这个context下的特定函数，并将该函数的context绑定为该context。

_.invoke本质上就是调用函数或者提供context来给被调用函数所使用，遇见null则返回null，若函数有return则在新的数组中展现。

_.pluck

_.pluck = function(obj, key) {
    return _.map(obj, _.property(key));
  };

_.property = function(path) {
    if (!_.isArray(path)) {
      return shallowProperty(path);
    }
    return function(obj) {
      return deepGet(obj, path);
    };

_.property是一个高层封装，如果path为字符串，则用shallowproperty处理，
数组则返回一个设定path为该数组的deepget类型返回函数

而pluck这个么。。。则是property的批量处理

_.where

 _.where = function(obj, attrs) {
    return _.filter(obj, _.matcher(attrs));
  };

_.matcher = _.matches = function(attrs) {
    attrs = _.extendOwn({}, attrs); //创造一个新对象
    return function(obj) {
      return _.isMatch(obj, attrs);
    };
  };

_.isMatch = function(object, attrs) {
    var keys = _.keys(attrs), length = keys.length;
    if (object == null) return !length;
    var obj = Object(object);
    for (var i = 0; i < length; i++) {
      var key = keys[i];
      if (attrs[key] !== obj[key] || !(key in obj)) return false;
    }
    return true;
  }; //是否一一对应c
  _.extendOwn = _.assign = createAssigner(_.keys);

var createAssigner = function(keysFunc, defaults) {
    return function(obj) {
      var length = arguments.length;
      if (defaults) obj = Object(obj);
      if (length < 2 || obj == null) return obj;
      for (var index = 1; index < length; index++) {
        var source = arguments[index],
            keys = keysFunc(source),
            l = keys.length;
        for (var i = 0; i < l; i++) {
          var key = keys[i];
          if (!defaults || obj[key] === void 0) obj[key] = source[key]; ///唯一重要的一行，其余都是在加强程序健壮性
        }
      }
      return obj;
    };
  };

部分重点通过注释标注，说明where是专门用于处理对象所用，去除obj中一切满足不了attrs属性的对象，是filter的一种更高层封装。

_.findWhere

_.findWhere = function(obj, attrs) {
    return _.find(obj, _.matcher(attrs));
  };

_.find = _.detect = function(obj, predicate, context) {
    var keyFinder = isArrayLike(obj) ? _.findIndex : _.findKey;
    var key = keyFinder(obj, predicate, context);
    if (key !== void 0 && key !== -1) return obj[key];
  };

不想吐槽，跟_.find基本一样，不过是对对象的处理，看attrs是不是一一对应，不过真的，underscore的健壮性真强，如此多的处理情况能连贯地考虑周全，可怕。
这里写图片描述

_.max

  // Return the maximum element (or element-based computation).
  _.max = function(obj, iteratee, context) {
    var result = -Infinity, lastComputed = -Infinity,
        value, computed;
    if (iteratee == null || (typeof iteratee == 'number' && typeof obj[0] != 'object') && obj != null) {
      obj = isArrayLike(obj) ? obj : _.values(obj);
      for (var i = 0, length = obj.length; i < length; i++) {
        value = obj[i];
        if (value != null && value > result) {
          result = value;
        }
      }
    } else {
      iteratee = cb(iteratee, context);
      _.each(obj, function(v, index, list) {
        computed = iteratee(v, index, list);
        if (computed > lastComputed || computed === -Infinity && result === -Infinity) {
          result = v;
          lastComputed = computed;
        }
      });
    }
    return result;
  };

其实没什么好说的，选个最大值就完了，大不了用iteratee处理一下再选个最大值，只有一个点需要注意：

value != null && value > result

为什么value还需要 != null ？既然都大于result了？你试试看

console.log(null > -1000 ) 
就知道了，当然最好在nodejs或者chrome上试

_.min

// Return the minimum element (or element-based computation).
  _.min = function(obj, iteratee, context) {
    var result = Infinity, lastComputed = Infinity,
        value, computed;
    if (iteratee == null || (typeof iteratee == 'number' && typeof obj[0] != 'object') && obj != null) {
      obj = isArrayLike(obj) ? obj : _.values(obj);
      for (var i = 0, length = obj.length; i < length; i++) {
        value = obj[i];
        if (value != null && value < result) {
          result = value;
        }
      }
    } else {
      iteratee = cb(iteratee, context);
      _.each(obj, function(v, index, list) {
        computed = iteratee(v, index, list);
        if (computed < lastComputed || computed === Infinity && result === Infinity) {
          result = v;
          lastComputed = computed;
        }
      });
    }
    return result;
  };

复制粘贴？好吧换了个大小符号
这里写图片描述

// Shuffle a collection.
  _.shuffle = function(obj) {
    return _.sample(obj, Infinity);
  };

  // Sample **n** random values from a collection using the modern version of the
  // [Fisher-Yates shuffle](http://en.wikipedia.org/wiki/Fisher–Yates_shuffle).
  // If **n** is not specified, returns a single random element.
  // The internal `guard` argument allows it to work with `map`.
  _.sample = function(obj, n, guard) {
    if (n == null || guard) {
      if (!isArrayLike(obj)) obj = _.values(obj);
      return obj[_.random(obj.length - 1)];
    }
    var sample = isArrayLike(obj) ? _.clone(obj) : _.values(obj);
    var length = getLength(sample);
    n = Math.max(Math.min(n, length), 0);
    var last = length - 1;
    for (var index = 0; index < n; index++) {
      var rand = _.random(index, last);
      var temp = sample[index];
      sample[index] = sample[rand];
      sample[rand] = temp;
    }
    return sample.slice(0, n);
  };

_.random = function(min, max) {
    if (max == null) {
      max = min;
      min = 0;
    }
    return min + Math.floor(Math.random() * (max - min + 1));
  };

没什么好说的，只有膜，代码太严谨了。。。
_.sample

＊当只输入obj，或者有guard值时，返回当中任意一个值。
＊当输入了obj，n且guard不能成立时，会返回一个打乱的obj内部，其中n是数组限定范围，若n大于传入obj的length值，则默认为obj的length

所以很明显_.shuffle传入infinity就是为了洗整个obj。

好吧，没了。
这里写图片描述

atrocitytheme
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
工具函数封装：深度获取对象的值、深拷贝对象、去除数组对象中的重复对象、验证手机号、取小数点
青红造了个大白之成长记
06-05 393
// （1）深度获取深层对象的值 const deepGet = (object, path, defaultValue) => { return (!Array.isArray(path) ? path.replace(/\[/g, '.').replace(/\]/g, '').split('.') : path) .reduce((o, k) => (o || {})[k], object) || defaultValue; } // （2）验证手机号码 con.
analyze_Underscore.js:解析underscore.js源码-源码解析
03-24
Underscore.js是一款轻量级的JavaScript实用库，它提供了大量的实用函数，为开发者在处理数组、对象、函数等方面提供便利。本篇文章将深入探讨Underscore.js的源码，解析其内部机制，并结合实际应用场景，帮助读者更...
deepClone 用法i
weixin_38951735的博客
01-06 1020
getType (obj){ //tostring会返回对应不同的标签的构造函数 let toString = Object.prototype.toString; let map = { '[object Boolean]' : 'boolean', '[object Number]' :...
Underscore.js 入门-常用方法介绍
Cool的博客
02-25 238
 Underscore.js是一个很精干的库，压缩后只有4KB。它提供了几十种函数式编程的方法，弥补了标准库的不足，大大方便了JavaScript的编程。MVC框架Backbone.js就将这个库作为自己的工具库。除了可以在浏览器环境使用，Underscore.js还可以用于Node.js。 Underscor.js定义了一个下划线（_）对象，函数库的所有方法都属于这个对象。这些方法大致上可以分...
Underscore.js-精巧而强大实用功能库
WHACKW的专栏
03-09 1514
小编推荐：掘金是一个高质量的技术社区，从 ECMAScript 6 到 Vue.js，性能优化到开源类库，让你不错过前端开发的每一个技术干货。各大应用市场搜索「掘金」即可下载APP，技术干货尽在掌握.. 前言 从其他语言转向Javascript时，通常都会遇到一些困惑性问题。比如，Java中的HashMap在Javascript中如何实现？Javascript面向对象式编程如何
Node.js--服务器
weixin_69356624的博客
04-28 4396
手写简单服务器 http核心模块(原生写法,服务器)、Express写法(服务器)、statusCode状态码、设置content-type与常见的几种类型 、托管静态资源
Underscore.js 基础学习
Fzqx_的博客
02-14 598
Underscore封装了常用的JavaScript对象操作方法，用于提高开发效率。它本身与我们介绍的主题“Backbone”没有半毛钱的 关系，因此你可以完全不理会“Backbone”的概念来学习它，或将它单独运用到任何一个页面。（另外，Underscore还可以被使用在 Node.js运行环境。） 在学习Underscore之前，你应该先保存它的API地址，因为你将在以后经常访问它： Unde...
UnderScore.js常用方法总结！！！
qq_31699161的博客
08-06 336
JavaScript是函数式编程语言，支持高阶函数和闭包。函数式编程非常强大，可以写出非常简洁的代码。例如Array的map()和filter()方法： 'use strict'; var a1 = [1, 4, 9, 16]; var a2 = a1.map(Math.sqrt); // [1, 2, 3, 4] var a3 = a2.filter((x) => { return x %...
underscore.js 0 －－ 101行
atrocitytheme的博客
07-12 268
先上代码：(function() { // Baseline setup // -------------- // Establish the root object, `window` (`self`) in the browser, `global` // on the server, or `this` in some virtual machines. We use `self`
underscore.js的用法
mapbar_front的博客
10-17 815
Array有map()和filter()方法，可是Object没有这些方法。此外，低版本的浏览器例如IE6～8也没有这些方法，解决问题的方式就是使用第三方库underscore.js。       underscore.js的百度cdn地址就是：http://apps.bdimg.com/libs/underscore.js/1.7.0/underscore-min.js
underscore.js -2009年发布的js库
weixin_30381793的博客
09-04 71
2009 Underscore.js 0.1.0发布 Underscore一个JavaScript实用库，提供了一整套函数式编程的实用功能，但是没有扩展任何JavaScript内置对象。它是这个问题的答案：“如果我在一个空白的HTML页面前坐下， 并希望立即开始工作， 我需要什么？“...它弥补了部分jQuery没有实现的功能,同时又是Backbone.js必不可少的部分。 （感谢...
underscore.js-learning:underscore.js源码学习笔记
03-23
在JavaScript的世界里，underscore.js是一个备受开发者喜爱的轻量级库，它提供了丰富的实用函数，帮助我们处理数组、对象、函数等核心数据类型，大大简化了代码。本篇将围绕"underscore.js-learning"这一主题，深入...
underscore.js:underscore.js原始解析-源码解析
03-24
underscore.js，作为一个轻量级的JavaScript库，以其强大的功能性、高效性和灵活性，被广泛应用于前端开发中。它提供了大量的实用函数，帮助开发者处理数组、对象、函数等数据类型，极大地提高了代码的可读性和可...
underscore-basic-tutorial:underscore.js的基础教程
05-26
Underscore.js是一个轻量级的JavaScript库，它提供了一系列实用的功能，用于处理数组、对象、函数等，为开发人员提供了便利的工具集。在这个基础教程中，我们将深入理解Underscore.js的核心概念和常用方法。 一、...
underscore-analysis:underscore.js原始学习-js
03-24
《深入剖析 underscore.js：探索 JavaScript 开源库的精髓》 在JavaScript的世界里，underscore.js（下文简称_）是一个广泛使用的轻量级工具库，它为开发者提供了许多实用的函数，帮助我们处理日常编程中的常见任务...
Avatar_Utils-1.0.6-py3-none-any.whl.zip
最新发布
09-05
Avatar_Utils-1.0.6-py3-none-any.whl.zip
“人力资源+大数据+薪酬报告+涨薪调薪”
09-05
人力资源+大数据+薪酬报告+涨薪调薪，在学习、工作生活中，越来越多的事务都会使用到报告，通常情况下，报告的内容含量大、篇幅较长。那么什么样的薪酬报告才是有效的呢？以下是小编精心整理的调薪申请报告，欢迎大家分享。相信老板看到这样的报告，一定会考虑涨薪的哦。
2024-2030全球及中国聚硅氮烷行业研究及十五五规划分析报告 Sample-yb.pdf
09-05
QYResearch是全球知名的大型咨询公司，行业涵盖各高科技行业产业链细分市场，横跨如半导体产业链（半导体设备及零部件、半导体材料、集成电路、制造、封测、分立器件、传感器、光电器件）、光伏产业链（设备、硅料/硅片、电池片、组件、辅料支架、逆变器、电站终端）、新能源汽车产业链（动力电池及材料、电驱电控、汽车半导体/电子、整车、充电桩）、通信产业链（通信系统设备、终端设备、电子元器件、射频前端、光模块、4G/5G/6G、宽带、IoT、数字经济、AI）、先进材料产业链（金属材料、高分子材料、陶瓷材料、纳米材料等）、机械制造产业链（数控机床、工程机械、电气机械、3C自动化、工业机器人、激光、工控、无人机）、食品药品、医疗器械、农业等。
用于目标检测的一个GUI程序界面.zip
09-05
目标检测（Object Detection）是计算机视觉领域的一个核心问题，其主要任务是找出图像中所有感兴趣的目标（物体），并确定它们的类别和位置。以下是对目标检测的详细阐述： 一、基本概念 目标检测的任务是解决“在哪里？是什么？”的问题，即定位出图像中目标的位置并识别出目标的类别。由于各类物体具有不同的外观、形状和姿态，加上成像时光照、遮挡等因素的干扰，目标检测一直是计算机视觉领域最具挑战性的任务之一。 二、核心问题 目标检测涉及以下几个核心问题： 分类问题：判断图像中的目标属于哪个类别。 定位问题：确定目标在图像中的具体位置。 大小问题：目标可能具有不同的大小。 形状问题：目标可能具有不同的形状。 三、算法分类 基于深度学习的目标检测算法主要分为两大类： Two-stage算法：先进行区域生成（Region Proposal），生成有可能包含待检物体的预选框（Region Proposal），再通过卷积神经网络进行样本分类。常见的Two-stage算法包括R-CNN、Fast R-CNN、Faster R-CNN等。 One-stage算法：不用生成区域提议，直接在网络中提取特征来预测物体分类和位置。常见的One-stage算法包括YOLO系列（YOLOv1、YOLOv2、YOLOv3、YOLOv4、YOLOv5等）、SSD和RetinaNet等。 四、算法原理 以YOLO系列为例，YOLO将目标检测视为回归问题，将输入图像一次性划分为多个区域，直接在输出层预测边界框和类别概率。YOLO采用卷积网络来提取特征，使用全连接层来得到预测值。其网络结构通常包含多个卷积层和全连接层，通过卷积层提取图像特征，通过全连接层输出预测结果。 五、应用领域 目标检测技术已经广泛应用于各个领域，为人们的生活带来了极大的便利。以下是一些主要的应用领域： 安全监控：在商场、银行
Underscore.js核心方法详解及应用
Underscore.js 是一个轻量级的JavaScript函数式编程库，专为简化前端开发中的数据操作而设计。它提供了一系列强大的函数，使得在Node.js环境和浏览器环境中都能轻松地处理数组、对象、函数和通用工具。本文将详细...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值