项目用了很久underscore.每次都是临时查手册,没有系统的研究过,最近有空正好看看

github地址:https://github.com/lily1010/underscore_learn

一 Underscore定义

一个JavaScript实用库，提供了一整套函数式编程的实用功能，但是没有扩展任何JavaScript内置对象,它是Backbone重度依赖的js库.主要涉及对Collection、Object、Array、Function的操作.

二 _.each

(1)定位:遍历list中的所有元素，按顺序用遍历输出每个元素,不返回任何值.

(2)标准模式:_.each(list, iteratee, [context]),其中[context]是迭代器的上下文，也就是迭代器中this的指向

(3)如果数据list是数组,iteratee的参数：(element, index, list)

(4)如果数据list是对象,iteratee的参数是(value, key, list)

(5)如果存在原生的forEach方法，Underscore就使用它代替

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>underscore--each函数</title>

        <script src="../js/underscore.js"></script>

    </head>

    <body>

        <script type="text/javascript">

            // 遍历数组 (可获取三个参数element, index, list)

            var data = [1,2,3];

            _.each(data,function(element, index, list) { //三个参数都是可选,位置固定,element是数组值,index是值在数组位置,list是整个数组

                document.write(element);    //打印出1 2 3

                document.write(index);        //打印出0 1 2

                document.write(list);        //打印出1,2,3 1,2,3 1,2,3,因为每次遍历都会打印一遍

            });

            // 遍历对象 (可获取三个参数 value,key,list)

            var data2 = {

                name1: "lili",

                name2: "manman"

            };

            _.each(data2,function(value,key,list) {   //注意第一个是value,第二个是key,位置固定,但参数可以缺少

                document.write(value);   //打印出lili manman

                document.write(key);    //打印出name1 name2

                document.write(list);  //打印出 [object Object] [object Object] ,因为循环了两边,故打印两遍

            });

            // 标准格式  _.each(list, iteratee, [context]) ,其中[context]是迭代器的上下文，也就是迭代器中this的指向

            var obj = {name: "hello"};

            _.each([1, 2, 3], function (i) {

              document.write(this.name + ":" + i);

            }, obj);

        </script>

    </body>

</html>

三 _.map

(1)定位:通过转换函数(iteratee迭代器)映射列表中的每个值,将返回的值依次存入一个新的数组.

(2)标准模式:_.map(list, iteratee, [context]),其中[context]是迭代器的上下文，也就是迭代器中this的指向.

(3)如果数据list是数组,iteratee的参数：(element, index, list)

(4)如果数据list是对象,iteratee的参数是(value, key, list)

(5)用法同each,但是它返回的是数组

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>underscore--map函数</title>

        <script src="../js/underscore.js"></script>

    </head>

    <body>

        <script type="text/javascript">

            // 遍历数组后生成数组 (可获取三个参数element, index, list)

            var data = [1,2,3];

            _.map(data,function(element, index, list) { //三个参数都是可选,位置固定,element是数组值,index是值在数组位置,list是整个数组

                document.write(element);    //打印出[1,2,3]

                document.write(index);        //打印出0 1 2

                document.write(list);        //打印出1,2,3 1,2,3 1,2,3,因为每次遍历都会打印一遍

            });

//            // 遍历对象 (可获取三个参数 value,key,list)

            var data2 = {

                name1: "lili",

                name2: "manman"

            };

            _.map(data2,function(value,key,list) {   //注意第一个是value,第二个是key,位置固定,但参数可以缺少

                document.write(value);   //打印出lili manman

                document.write(key);    //打印出name1 name2

                document.write(list);  //打印出 [object Object] [object Object] ,因为循环了两边,故打印两遍

            });

            // 标准格式  _.map(list, iteratee, [context]) ,其中[context]是迭代器的上下文，也就是迭代器中this的指向

            var obj = {name: "hello"};

            _.each([1, 2, 3], function (i) {

              document.write(this.name + ":" + i);

            }, obj);

        </script>

    </body>

</html>

四 _.reduce

(1)标准模式:reduce_.reduce(list, iterator, memo, [context])

(2)这里不做深入探讨,参数太多,感兴趣的去官网看一下

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>underscore--reduce函数</title>

        <script src="../js/underscore.js"></script>

    </head>

    <body>

        <script type="text/javascript">

            // 遍历数组

            var data = [1,2,3];

            _.reduce(data,function(memo, element, index, list) { //四个参数都是可选,位置固定,memo是设置一个初始值,element是数组值,index是值在数组位置,list是整个数组

                document.write(memo);   //打印出 4 undefined undefined

                document.write(element);    //打印出[1,2,3]

                document.write(index);        //打印出0 1 2

                document.write(list);        //打印出1,2,3 1,2,3 1,2,3,因为每次遍历都会打印一遍

            },4);   //注意4就是参数memo

        </script>

    </body>

</html>

五 _.find函数

(1)标准写法:_.find(list, predicate, [context])

(2)在list中逐项查找，返回第一个通过predicate迭代函数真值检测的元素值.

(3)如果没有值传递给测试迭代器将返回undefined。 如果找到匹配的元素，函数将立即返回，不会遍历整个list。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>underscore--find方法</title>

        <script src="../js/underscore.js"></script>

    </head>

    <body>

        <script type="text/javascript">

            //_.find

            var data = [1,2,3,4,5,6];

            var aa=_.find(data,function(num) {

                return num % 2 == 0;

            });

            console.log("数据类型是"+typeof aa+";返回值是"+aa);  //打印结果是:数据类型是number;返回值是2

        </script>

    </body>

</html>

六 _.filter函数

(1)标准写法:_.filter(list, predicate, [context])

(2)遍历list中的每个值，返回所有通过predicate真值检测的元素值.

(3)如果没有值传递给测试迭代器将返回undefined。 如果找到匹配的元素，函数将立即返回，不会遍历整个list。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>underscore--fliter方法</title>

        <script src="../js/underscore.js"></script>

    </head>

    <body>

        <script type="text/javascript">

            //_.filter

            var data2 = [1,2,3,4,5,6];

            var bb=_.filter(data2,function(num) {

                return num % 2 == 0;

            });

            console.log("数据类型是"+typeof bb+";返回值是"+bb); //打印结果是:数据类型是object;返回值是2,4,6

        </script>

    </body>

</html>

Underscore学习笔记1的更多相关文章

  1. Underscore.js 源码学习笔记（下）

    上接 Underscore.js 源码学习笔记(上) === 756 行开始 函数部分. var executeBound = function(sourceFunc, boundFunc, cont ...

  2. Underscore.js 源码学习笔记（上）

    版本 Underscore.js 1.9.1 一共 1693 行.注释我就删了,太长了… 整体是一个 (function() {...}());  这样的东西,我们应该知道这是一个 IIFE(立即执行 ...

  3. JavaScript学习笔记（八）——变量的作用域与解构赋值

    在学习廖雪峰前辈的JavaScript教程中,遇到了一些需要注意的点,因此作为学习笔记列出来,提醒自己注意! 如果大家有需要,欢迎访问前辈的博客https://www.liaoxuefeng.com/ ...

  4. 《零基础学JavaScript(全彩版)》学习笔记

    <零基础学JavaScript(全彩版)>学习笔记 二〇一九年二月九日星期六0时9分 前期: 刚刚学完<零基础学HTML5+CSS3(全彩版)>,准备开始学习JavaScrip ...

  5. 【转】Backbone.js学习笔记（二）细说MVC

    文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Bac ...

  6. NPM 学习笔记整理

    NPM 学习笔记整理 阅读 550,2017年06月04日 发布,来源:blog.ihoey.com 什么是 NPM npm 之于 Node ,就像 pip 之于 Python , gem 之于 Ru ...

  7. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  8. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

  9. PHP-会员登录与注册例子解析-学习笔记

    1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...

随机推荐

  1. visual studio snippets风格

    snippet挺好用,但是不是我喜欢的那种风格,比如if是这样的 if () { XX } 而我比较习惯这种: if () { XX } 可以这么做: 工具(Tools)——代码段管理器(Code S ...

  2. git merge之squash

    看CM源码时,发现历史记录里有很多squash,于是google了解了一下. Git相对于CVS和SVN的一大好处就是merge非常方便,只要指出branch的名字就好了,如: 1 2 3 4 5 $ ...

  3. SharePoint 2010中重置windows 活动目录(AD)域用户密码的WebPart（免费下载）

    由于SharePoint 2013推出不久,并非所有的企业都会升级到SharePoint 2013的,毕竟升级不是打打补丁这么简单,更多的企业还是使用Sharepoint 2010版本的,因此本人自行 ...

  4. windows 2008 R2 64位系统，找到Microsoft Excel 应用程序

    在windows  2003 操作系统中, 1.在"开始"->"运行"中输入dcomcnfg.exe启动"组件服务", 2.依次双击& ...

  5. SPI总线通信电路设计

    数据带宽＝(总线频率×数据位宽)÷8 B表示带宽,F表示存储器时钟频率,D表示存储器数据总线位数,则带宽为: B(峰值带宽)=F(时钟频率MHz)×D(总线位数bit)/8 例如,PC-100的SDR ...

  6. Hadoop入门进阶课程9--Mahout介绍、安装与应用案例

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博主为石山园,博客地址为 http://www.cnblogs.com/shishanyuan  ...

  7. 使用命令行备份指定文件夹并保留最新N份

    客户需要对网站进行定期备份,并保留最近30天的文件,编写后以下脚本,通过Windows的任务计划进行调度 对比手工和任务计划调度运行情况来看,手工运行中可直接调用RAR.exe和网络进行传输,但是任务 ...

  8. 另一个 OleDbParameterCollection 中已包含 OleDbParameter 错误分析及解决办法

    程序非常简单,就是从一个表中取出一个符合要求的数据,如果取到,就把该数据对应的计数加1.也就是执行不同的两个SQL语句操作同一个表,并且这两个SQL的参数是一样的.在一个函数里完成这个调用.执行第二个 ...

  9. OpenProcess打开进程返回错误的问题

    问题描述 项目中需要做一个小功能:能够查看系统中当前正在运行的进程的内存信息,如内存块类型.分配状态.访问权限等.如下图所示: 需要的信息和上图相差无几.说起来也不算太难,毕竟现成的API已经提供了. ...

  10. Do not to test a private method.

    If you want to unit test a private method, something may be wrong. Unit tests are (generally speakin ...