Underscore学习笔记1
项目用了很久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的更多相关文章
- Underscore.js 源码学习笔记（下）
上接 Underscore.js 源码学习笔记(上) === 756 行开始 函数部分. var executeBound = function(sourceFunc, boundFunc, cont ...
- Underscore.js 源码学习笔记（上）
版本 Underscore.js 1.9.1 一共 1693 行.注释我就删了,太长了… 整体是一个 (function() {...}()); 这样的东西,我们应该知道这是一个 IIFE(立即执行 ...
- JavaScript学习笔记（八）——变量的作用域与解构赋值
在学习廖雪峰前辈的JavaScript教程中,遇到了一些需要注意的点,因此作为学习笔记列出来,提醒自己注意! 如果大家有需要,欢迎访问前辈的博客https://www.liaoxuefeng.com/ ...
- 《零基础学JavaScript(全彩版)》学习笔记
<零基础学JavaScript(全彩版)>学习笔记 二〇一九年二月九日星期六0时9分 前期: 刚刚学完<零基础学HTML5+CSS3(全彩版)>,准备开始学习JavaScrip ...
- 【转】Backbone.js学习笔记（二）细说MVC
文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Bac ...
- NPM 学习笔记整理
NPM 学习笔记整理 阅读 550,2017年06月04日 发布,来源:blog.ihoey.com 什么是 NPM npm 之于 Node ,就像 pip 之于 Python , gem 之于 Ru ...
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- PHP-自定义模板-学习笔记
1. 开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2. 整体架构图 ...
- PHP-会员登录与注册例子解析-学习笔记
1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...
随机推荐
- 【PRML读书笔记-Chapter1-Introduction】1.1 Example:Polynomial Curve Fitting
书中给出了一个典型的曲线拟合的例子,给定一定量的x以及对应的t值,要你判断新的x对应的t值多少. 任务就是要我们去发现潜在的曲线方程:sin(2πx) 这时就需要概率论的帮忙,对于这种不确定给t赋何值 ...
- 代码演示 .NET 4.5 自带的 ReadonlyCollection 的使用
代码如下: 1. using System; using System.Collections.Generic; using System.Linq; using System.Text; using ...
- java中的vo 、dto 、dao--转
原文地址:http://yinchunjian.iteye.com/blog/758196 O是跟数据库里表的映射,一个表对应一个VO DAO是用VO来访问真实的表,对数据库的操作都在DAO中完成 B ...
- Hadoop第4周练习—HDFS读写文件操作
1 运行环境说明... 3 :编译并运行<权威指南>中的例3.2. 3 内容... 3 2.3.1 创建代码目录... 4 2.3.2 建立例子文件上传到hdfs中... 4 ...
- 最近读cocoaui源代码有感
上半年为了做一个ios的应用,引入了cocoaui库,主要是用来布局ios界面,发现简化了不少代码和工作量.因为在写第一个ios应用的时候,用的代码布局,在适配4s和6的机型时候,几乎被搞死,大量的约 ...
- 请求参数到表述层的类型转换——Struts2
一.简介 说明:HTTP 协议传输数据没有类型的概念,在服务器端是通过 request.getParameter().request.getParameterValue() 方法得到请求参数为 Str ...
- 如何花样展示自己的摄影作品？CSS+JS+Html
注意:Windows平台推荐使用Edge.Chrome.FireFox,部分浏览器打不开 P.S.慢慢用鼠标在图片上拖拽会感觉更神奇 // 0.5 ? 1 : -1; }, ease: fun ...
- java:[1,1] 需要class, interface或enum
状态: cmd编译.java文件时报异常:java:[1,1] 需要class, interface或enum异常原因: 主要原因是java文件的编码问题. 在中文操作系统中,使用一贯的"j ...
- SQL增删查改注意的事项
一.新增 1.增加的时候,bit字段要用“0,1”表示false,和true: 2.时间字段,用单引号包括,里面要遵循基本时间格式: 3,不能为标识列(自动编号列)插入数据(特殊情况下:set ide ...
- JAVA的网络编程基础概念
网络编程的目的就是指直接或间接地通过网络协议与其他计算机进行通讯.网络编程中有两个主要的问题,一个是如何准确的定位网络上一台或多台主机,另一个就是找到主机后如何可靠高效的进行数据传输.在TCP/IP协 ...