`

underscore常用的几个函数(不断学习,不断更新~~)

阅读更多
前言:
   underscore 是一个JavaScript实用库,提供了类似Prototype.js (或 Ruby)的一些功能,但是没有扩展任何JavaScript内置对象。它提高了代码的可读性,让我们的逻辑更简单.
正文:
1._.find(list, iterator, [context]) 
    功能:遍历list,返回第一个通过iterator迭代器真值检测的元素值,如果没有值传递给测试迭代器将返回undefined。 如果找到匹配的元素,函数将立即返回,不会遍历整个list。

var this_activity = _.find(JSON.parse(localStorage.getItem( "activities")),function(activity) {return activity.status = "start";
});  //如果activities中存在status为start则返回第一个符合条件的,如果没有则返回undefined

2._.filter(list, iterator, [context])
    功能:遍历list中的每个值,返回包含所有通过iterator真值检测的元素值。如果存在原生filter方法,则用原生的filter方法。与select用法相近

var apply_lists = _.filter(JSON.parse(localStorage.getItem( "received_messages")),function(received_message) {var enter_into_it = localStorage.enter_into_it;
            return received_message.activity_name == enter_into_it;
        });

3._.where(list, properties)
    功能:遍历list中的每一个值,返回一个数组,这个数组包含包含properties所列出的属性的所有的键 - 值对。

_.where(listOfPlays, {author: "Shakespeare", year: 1611});
=> [{title: "Cymbeline", author: "Shakespeare", year: 1611},
    {title: "The Tempest", author: "Shakespeare", year: 1611}]

4._.findWhere(list, properties)
    功能:遍历list中的每一个值,返回匹配properties所列出的属性的所有的键 - 值对的第一个值。如果没有找到匹配的属性,或者list是空的,那么将返回undefined。

_.findWhere(publicServicePulitzers, {newsroom: "The New York Times"});
=> {year: 1918, newsroom: "The New York Times",
  reason: "For its public service in publishing in full so many official reports,
  documents and speeches by European statesmen relating to the progress and
  conduct of the war."}

5._.reject(list, iterator, [context])
返回list中没有通过iterator真值检测的元素集合,与filter相反。

var odds = _.reject([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });
=> [1, 3, 5]

6._.every(list, [iterator], [context])
如果list中的所有元素都通过iterator的真值检测就返回true。如果存在原生的every方法,就使用原生的every。

_.every([true, 1, null, 'yes'], _.identity);
=> false

7._.some(list, [iterator], [context])
如果list中有任何一个元素通过 iterator 的真值检测就返回true。一旦找到了符合条件的元素, 就直接中断对list的遍历. 如果存在原生的some方法,就使用原生的some

_.some([null, 0, 'yes', false]);
=> true

8._.contains(list, value)
如果list包含指定的value则返回true。如果list 是数组,内部使用indexOf判断。

_.contains([1, 2, 3], 3);
=> true

9._.groupBy(list, iterator, [context])
把一个集合分组为多个集合,通过 iterator 返回的结果进行分组. 如果 iterator 是一个字符串而不是函数, 那么将使用 iterator 作为各元素的属性名来对比进行分组.

_.groupBy(those_messages,function(this_message){
            return parseInt(this_message.price)
        })

10._.map(list, iterator, [context]) Alias: collect
通过变换函数(iterator迭代器)把list中的每个值映射到一个新的数组中(愚人码头注:产生一个新的数组)。如果存在原生的map方法,就用原生map方法来代替。如果list是个JavaScript对象,iterator的参数是(value, key, list)。

_.map(grouped_those_messages,function(value,key){
            return {"price":key,"count":value.length}
        })

11._.sortBy(list, iterator, [context])
返回一个排序后的list拷贝副本。如果有iterator参数,iterator将作为list排序的依据。迭代器也可以是字符串的属性的名称进行排序的(比如 length)。

_.sortBy(those_messages,function(this_message){
            return parseInt(this_message.price)
        });

12.each_.each(list, iterator, [context]) 
遍历list中的所有元素,按顺序用遍历输出每个元素。如果传递了context参数,则把iterator绑定到context对象上。每次调用iterator都会传递三个参数:(element, index, list)。如果list是个JavaScript对象,iterator的参数是 (value, key, list))。如果存在原生的forEach方法,Underscore就使用它代替。

_.each([1, 2, 3], alert);//依次提示每个数字
_.each({one: 1, two: 2, three: 3}, alert);//依次提示每个值

应该注意的是:each与map相似,但是没有返回值,所以用它alert是可以的,但是涉及到返回值就不可以使用了
13.size_.size(list) 返回list的长度。
_.size(activities);//其中activities是一个数组,返回值是该数组的长度

14.chain_.chain(obj) 返回一个封装的对象. 在封装的对象上调用方法会返回封装的对象本身, 直道 value 方法调用为止.
_.chain(BidMessages.get_bid_messages())
        .filter(function(bid_message){
            return bid_message.activity_name == localStorage.enter_into_it && bid_message.bid_id == localStorage.enter_into_bid
        })
        .groupBy(function(bid_message){
            return parseInt(bid_message.price)
        })
        .map(function(value,key){
            return {"price":key,"count":value.length}
        })
        .value();//获取封装对象的最终值.

参考文献:
1.官方文档:http://underscorejs.org/
2.中文文档:http://www.css88.com/doc/underscore/
分享到:
评论

相关推荐

    copy-underscore

    接下来,我们详细解析几个关键的Underscore函数: 1. `_.map`: 这个函数接受一个集合和一个迭代函数,对集合的每个元素应用迭代函数并返回新的数组。它是函数式编程中的映射操作,可以方便地进行数组的转换。 2. `...

    Underscore.js常用方法总结

    它提供了几十种函数式编程的方法,大大方便了Javascript的编程。MVC框架backbone.js就是基于这个库。 它定义了一个下划线(_)对象,函数库的所有方法都属于这个对象。这些方法大致上可以分成:集合(collection)、...

    我在工作中用到的几个轻量级的js库

    标题 "我在工作中用到的几个轻量级的js库" 提示我们,这篇博客内容将聚焦于在实际项目中常用的一些小型JavaScript库。JavaScript库在Web开发中扮演着重要角色,它们提供了许多便利的功能,帮助开发者更高效地构建...

    通过面向对象利用JS实现五彩小球

    在这个项目中,我们将探讨以下几个关键知识点: 1. **面向对象编程(OOP)**: 面向对象编程是一种编程范式,它基于“对象”概念,允许我们组织代码,使其更易于理解和维护。在JavaScript中,我们可以通过构造函数...

    JavaScript工具库.zip

    JavaScript工具库是前端开发工程师的重要资源,它们提供了一系列预封装的功能,帮助开发者更高效地编写健壮...同时,随着技术的发展,开发者还需要关注新的工具和框架,保持学习和更新,以适应不断变化的前端开发环境。

    JQueryzTreev3

    在实际使用 jQuery zTree v3 时,我们需要注意以下几个关键点: 1. **初始化设置**:zTree 的使用始于 HTML 树节点结构的创建,然后通过 jQuery 选择器和 `$.fn.zTree.init()` 方法来初始化树。 2. **节点数据格式...

    DIY-underscorejs:动手DIY一个underscorejs库及underscorejs二进制分析博客使用的代码

    Underscore.js是一个功能丰富的工具库,提供了大量的实用函数,用于简化常见的编程任务。通过自行构建这样一个库,我们可以深入了解JavaScript的核心机制、函数式编程的概念以及如何设计高效、可维护的代码。 首先...

    js-snippets:JS代码片段收集区

    "js-snippets"项目中的代码片段通常按照功能进行分类,可能包括但不限于以下几个方面: 1. **数组操作**:例如排序、过滤、映射等常见的数组处理方法。 2. **对象操作**:涉及到对象的创建、遍历、深浅拷贝等。 3...

    JS特效以及模板

    JavaScript(简称JS)是一种轻量级的编程语言,主要用于网页和网络应用的开发。它能够对用户交互进行响应,提供动态效果,增强用户体验。...通过不断学习和实践,开发者可以掌握更多技巧,创造出更多精彩的网页作品。

    javascript中数组、对象

    同时,许多工具如`lodash`和`underscore.js`提供了丰富的实用函数,如`_.forEach`、`_.map`、`_.find`等,用于简化数组和对象的操作。 **四、数组操作整理** 文档"Javascript数组操作整理.doc"可能包含了对数组...

    js:库赫javascript

    3. 工具库:如lodash、Underscore,提供了大量实用的函数,可以简化常见的编程任务。 4. Ajax库:如jQuery、axios,简化了HTTP请求的处理,便于与服务器进行数据交互。 5. 图表库:如Chart.js、D3.js,用于绘制...

    jquery实现的在底部固定位置悬浮漂浮返回顶部按钮的特效源码.zip

    在实现返回顶部特效的过程中,主要涉及以下几个关键知识点: 1. **选择器与DOM操作**:jQuery提供了丰富的选择器,如ID选择器(#id)、类选择器(.class)、元素选择器(tag)等,用于快速定位DOM元素。在这个例子中,...

    前端开源库-colac.zip

    在前端开发中,开源库通常分为几个主要类别: 1. **JavaScript框架**:例如React、Vue.js或Angular,它们提供了一种组织和管理页面组件的方式,简化了状态管理和DOM操作。React以其虚拟DOM和组件化思想著名,Vue.js...

    js库在element ui中能用到

    Element UI与JavaScript库的结合主要体现在以下几个方面: 1. **组件交互**:Element UI的组件如日期选择器、时间线、轮播图等,其内部实现往往依赖于JavaScript库的功能,例如事件监听、DOM操作等。通过JavaScript...

    JavaScript实现鼠标移动粒子跟随效果

    要实现粒子跟随鼠标移动的效果,我们需要以下几个关键步骤: 1. **HTML布局**:创建一个`<canvas>`元素作为画布,用于绘制粒子。在这个例子中,`canvas`元素的宽高被设置为800px * 500px,并设置了背景颜色为#333。...

    js代码-将下划线的变量转化成驼峰命名的变量

    而下划线命名法(Underscore_case)则是另一种常用的命名方式,尤其是在命令行参数或者某些编程语言中。本篇文章将详细探讨如何将下划线分隔的变量名转换为驼峰命名法,并通过JavaScript代码实现这一过程。 首先,...

    jschool2020showcase

    在JavaScript中,我们可以学习到以下几个关键知识点: 1. **基础语法**:包括变量声明(var, let, const)、数据类型(如字符串、数字、布尔值、对象、数组)、控制流(if语句、switch、for循环、while循环)以及...

    my-map-doc:进入到旅单页堆栈

    【描述】中提到了几个关键的技术栈组件: 1. **HTML**:超文本标记语言(HTML)是构建网页的基础,定义了网页的结构。在这个项目中,HTML可能被用来创建各种页面元素,如标题、段落、链接等,构建出用户界面的基础...

    C++MFC教程

    下面介绍几个成员函数: Add 增加CString RemoveAt 删除指定位置CString对象 RemoveAll 删除数组中所有CString对象 GetAt 得到指定位置的CString对象 SetAt 修改指定位置的CString对象 InsertAt 在某一位置...

Global site tag (gtag.js) - Google Analytics