underscore.js and moment.js
underscore.js and moment.js
underscore.js
一、简介
Underscore.js是一个JavaScript实用库,提供了一整套函数式编程的实用功能。它提供了100多种函数,弥补了部分jQuery没有实现的功能,在项目中使用很方便。
二、下载和安装
1.下载网址:
http://www.css88.com/doc/underscore/underscore.js
2.Node.js 安装
npm install underscore
3.Bower 安装
bower install underscore
三、常用的方法(数组)
1._range([start], stop, [step])
一个用来创建整数灵活编号的列表的函数
_.range(5) => [01,2,3,4]
_.range(0,20) =>[0,5,10,15]
2._each(list, func)遍历list的所有元素
3._map(list, func) 通过对list里的每个元素调用转换函数生成一个与之相对应的数组
_.map([1, 2, 3], function(num){ return num * 3; });
=> [3, 6, 9]
用map有一个缺点 比如
_.map([{age:1},{age:2},{age:3}], function(item){
if (item.age > 1) return item;
});
=> [undefined, {age:2}, {age:3}]
使用_.compact(array) 可以去掉数组中的所有 false, null, 0, "", undefined 和 NaN 的值 =>[{age:2}, {age:3}]
4._.filter(list, func) 过滤掉不满足条件的元素
var evens = _.filter([1, 2, 3, 4, 5, 6], function(num){
return num % 2 == 0; });
=> [2, 4, 6]
5._.toArray(list)把list转换成一个数组,在转换 arguments 对象时非常有用
(function(){ return _.toArray(arguments).slice(1); })(1, 2, 3, 4);
=> [2, 3, 4]
6._.min 和 _.max 获取list中最小最大值
7._.first(array, [n])返回array中最后一个元素。传递 n参数将返回数组中从最后一个元素开始的n个元素
_.first([5, 4, 3, 2, 1],3) =>[5,4,3]
8._.last(array, [n]) 从数组中最后一个开始截取
9.flatten_.flatten(array) 将一个嵌套多层的数组 array(数组) (嵌套可以是任何层数)转换为只有一层的数组
_.flatten([1, [2], [3, [[4]]]]) => [1, 2, 3, 4];
10._.intersection(*arrays) 返回数组的交集
_.intersection([1, 2, 3], [101, 2, 1, 10], [2, 1])=> [1, 2]
11. _.difference(array, *others) 返回的值来自array参数数组,并且不存在于other 数组。
_.difference([1, 2, 3, 4, 5], [5, 2, 10]);=> [1, 3, 4]
12. _.object(list,[value])将数组转换为对象
_.object(['moe', 'curly'], [30, 50]);=> {moe: 30,curly: 50}
13. _.uniq(arry) 数组去重
_.uniq([1,2,3,4,5,3,2,2,1]) =>[1,2,3,4,5]
14. _.reduce(list,func,[memo])把list中元素归结为一个单独的数值,memo为初始值
_.reduce([1, 2, 3], function(memo, num){
return memo + num; }, 0) =>6
用_.reduce可以使含有对象的数组去重
var arr = [{name:'N',age:2},{name:'N',age:3},{name:'M',age:2}], hash = {};
arr = _.reduce(arr, function(item, next) {
hash[next.age] ? '' : hash[next.age] = true && item.push(next);
return item
}, [])
=>[{name:'N',age:2},{name:'N',age:3}]
四、常用的方法(对象)
1. _.keys(object) 返回对象所有的key
_.keys({one: 1, two: 2, three: 3}); => ["one", "two", "three"]
2. _.values(object) 返回对象所有的value
_.values({one: 1, two: 2, three: 3}); => [1, 2, 3]
3._.isEqual(object, other) 执行两个对象之间的优化深度比较,确定他们是否应被视为相等
var stooge = {name: 'moe', luckyNumbers: [13, 27, 34]};
var clone = {name: 'moe', luckyNumbers: [13, 27, 34]};
stooge == clone; => false
_.isEqual(stooge, clone); => true
4._.isEmpty(object) 判断一个对象是否为空
_.isEmpty({});=> true
5._.clone(object) 克隆一个对象
_.clone({name: 'moe'});=> {name: 'moe'};
五、常用的方法(函数)
1._.delay(function, wait, *arguments) 类似setTimeout,等待wait毫秒后执行函数
2. _.debounce(function, wait, [true]) 在 wait 时间间隔的开始调用function,在wait时间内不会再次调用function,对不小小点击多次次按钮是很有帮助
3._.throttle(function, wait, [options])当重复调用函数的时候,至少每隔 wait毫秒调用一次该函数。对于想控制一些触发频率较高的事件有帮助
4._.once(function)创建一个只能调用一次的函数,重复调用改进的方法也没有效果,只会返回第一次执行时的结果
5._.after(count, function)创建一个函数, 只有在运行了 count 次之后才有效果
6._.compose(*functions) 返回函数集 functions 组合后的复合函数, 也就是一个函数执行完之后把返回的结果再作为参数赋给下一个函数来执行. 以此类推. 在数学里, 把函数 f(), g(), 和 h() 组合起来可以得到复合函数 f(g(h()))var greet = function(name){ return "hi: " + name; };
var exclaim = function(statement){ return statement.toUpperCase() + "!"; };
var welcome = _.compose(greet, exclaim);
welcome('moe');
=> 'hi: MOE!'
六、常用的方法(实用功能)
1._.random(min, max) 返回一个min 和 max之间的随机整数
_.random(0, 100);=> 42
2._.unescape(string)转义HTML字符串,替换&, <, >, ", `, 和 /字符
_.unescape('<h1>underscope</h1>')
=> <h1>underscope</h1>
3._.now() 一个优化的方式来获得一个当前时间的整数时间戳
_.now() => 1392066795351
4._.iteratee(value, [context]) 一个重要的内部函数用来生成可应用到集合中每个元素的回调, 返回想要的结果
var stooges = [{name: 'curly', age: 25}, {name: 'moe', age: 21}, {name: 'larry', age: 23}];
_.min(stooges, _.iteratee('age')) => {name: 'moe', age: 21}
5._.template(templateString, [settings]) 将 JavaScript 模板编译为可以用于页面呈现的函数, 对于通过JSON数据源生成复杂的HTML并呈现出来的操作非常有用.
var test = 'underscoper-test';
var compiled = _.template("<p>hello: <%= test %></p>");
compiled() => '<p>hello: underscoper-test</p>'
这样可以不用拼接字符串 类似与ES6中的``
6._.mixin(object) 允许用您自己的实用程序函数
_.mixin({capitalize: function(string) {
return string.charAt(0).toUpperCase() + string.substring(1).toLowerCase();
}});
_("fabio").capitalize();
=> "Fabio"
moment.js
1.取值
moment().get('year');
moment().get('month'); // 0 to 11
moment().get('date');
moment().get('hour');
moment().get('minute');
moment().get('second');
moment().get('millisecond');
2.加法
moment().add(7, 'days'); 当前时间加上7天
moment().add(2, 'months') 当前时间加上2个月
moment().add(2, 'years') 当前时间加上2年
3.减法
moment().subtract(7, 'days'); 当前时间减去7天
moment().subtract(2, 'months') 当前时间减去2个月
moment().subtract(2, 'years') 当前时间减去2年
4.转换为毫秒数进行比较大小
moment('2017-12-18 00:20', 'YYYY-MM-DD HH:mm').valueOf() => 1513527600000
参考:
1.http://www.css88.com/doc/underscore/
2.http://momentjs.cn/
underscore.js and moment.js的更多相关文章
- 【JavaScript】前端开发框架三剑客—AngularJS VS. Backone.js VS.Ember.js
摘要:透过对Github,StackOverflow,YouTube等社区进行数据收集后可知,AngularJS在各大主流社区中都是最受欢迎的,Backbone.js与Ember.js则不相伯仲.本文 ...
- 如何使用 require.js ,实现js文件的异步加载,避免网页失去响应,管理模块之间的依赖性,便于代码的编写和维护。
一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代 ...
- AngularJS 、Backbone.js 和 Ember.js 的比较
1 介绍 我们准备在这篇文章中比较三款流行于Web的“模型-视图-*”框架:AngularJS.Backbone和Ember.为你的项目选择正确的框架能够对你及时交付项目的能力和在以后维护你自己代码的 ...
- JavaScript模块化-require.js,r.js和打包发布
在JavaScript模块化和闭包和JavaScript-Module-Pattern-In-Depth这两篇文章中,提到了模块化的基本思想,但是在实际项目中模块化和项目人员的分工,组建化开发,打包发 ...
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
- 再谈React.js实现原生js拖拽效果
前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...
- spring访问静态资源出错,No mapping found for HTTP request with URI xxx/resources/js/jquery.min.js...
问题:spring访问静态资源出错,No mapping found for HTTP request with URI xxx/resources/js/jquery.min.js... web.x ...
- prototype.js 和 jQuery.js中 ajax 的使用
这次还是prototype.js 和 jQuery.js冲突的问题,前面说到过解决办法http://www.cnblogs.com/Joanna-Yan/p/4836252.html,以及上网说的大部 ...
- LazyLoad.js及scrollLoading.js
http://blog.csdn.net/ning109314/article/details/7042829 目前图片延迟加载主要分两大块,一是触发加载(根据滚动条位置加载图片):二是自动预加载(加 ...
随机推荐
- 深入了解Cookie(1)------selenium2进行Cookie操作的前奏
世界上最宽阔的是海洋,比海洋还宽阔的是天空,比天空还宽阔的是人的心量.做人的心量有多大.人生的成就就有多大. 不为一己之利去争.去斗.去夺,扫除报复之心和妒忌之念.自然"心底无私天地宽&qu ...
- linux c编程:文件的读写
Linux系统中提供了系统调用函数open()和close()用于打开和关闭一个存在的文件 int open(const char *pathname,int flags) int open(cons ...
- 基于ajax的登录
验证码 当登录一个网站的时候往往会有验证码. python生成随机验证码,需要使用到 PIL 模块 安装 : pip3 install pillow 1. 创建图片 我们现在写的验证码属 ...
- uboot中添加自定义命令
uboot中可以通过修改源程序来添加自定义命令,进一步扩展uboot的功能. 我想在uboot下添加一条新的命令(名为varcpy),用来拷贝uboot中的环境变量. 修改方式如下: 创建新文件com ...
- CodeChef - ANDMIN —— 线段树 (结点最多被修改的次数)
题目链接:https://vjudge.net/problem/CodeChef-ANDMIN Read problems statements in Mandarin Chinese, Russia ...
- Spring Boot2.0之 yml的使用
yml Spring Boot 默认读取 .yml .properties 结尾的 yml非常好的作用,比properties更节约 结构清晰 server: port: 8090 con ...
- 0-mybatis目录
mybatis 第一天: 对原生态jdbc程序(单独使用jdbc开发)问题总结 框架原理 入门程序 用户的增.删.改.查 开发dao两种方法: 原始dao开发方法(程序需要编写dao接口和dao实现类 ...
- python基础-元组
操作元组 获取元组中的值 tup1 = ('高数','计算机',2008,2016) tup2 = (1,2,3,4,5,6,7) #和list的一样,同样取下标1,2,3,4的值 print(&qu ...
- bzoj3312
K个硬币,要买N个物品. 给定买的顺序,即按顺序必须是一路买过去,当选定买的东西物品序列后,付出钱后,货主是不会找零钱的.现希望买完所需要的东西后,留下的钱越多越好,如果不能完成购买任务,输出-1 $ ...
- 【Python】python2.7 安装配置OpenCV2
环境:Ubuntu16.04 anaconda Python2.7 opencv2.4.13 安装opencv后 import cv2 遇到错误信息: No module named cv2 安装op ...