underscore.js and moment.js

underscore.js and moment.jscss

underscore.jsnpm

1、簡介
Underscore.js是一個JavaScript實用庫,提供了一整套函數式編程的實用功能。它提供了100多種函數,彌補了部分jQuery沒有實現的功能,在項目中使用很方便。編程


2、下載和安裝
1.下載網址:
http://www.css88.com/doc/underscore/underscore.js
2.Node.js 安裝
npm install underscore
3.Bower 安裝
bower install underscoreapi


3、經常使用的方法(數組)
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}]數組


4、經常使用的方法(對象)
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'};dom


5、經常使用的方法(函數)
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!'curl


6、經常使用的方法(實用功能)
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/優化

相關文章
相關標籤/搜索