underscorejs

時間 2019-12-10

標籤 underscorejs 简体版

原文原文鏈接

模板template

框架提供了字符串模板，方便數據渲染
有兩種數據渲染方式
1.使用 _.template(tplStr,data)，相關代碼以下javascript

<script type="text/template" id="tpl">
        <% _.each(data, function(n){ %>
            <p>姓名：<%= n.name %></p>
        <% }); %>
    </script>

    let data = [
        {name : '阿里巴巴'},
        {name : '百度'}
    ];

 _.template($('#tpl').html(), data ); // 直接使用 data 做爲模板數據

2.使用_.template( tplStr ),相關代碼以下css

<script type="text/template" id="tpl">
        <% _.each(data, function(n){ %>
            <p>姓名：<%= n.name %></p>
        <% }); %>
    </script>
    // 注意 data 數據的區別
    let data = {data :[
        {name : '阿里巴巴'},
        {name : '百度'}
    ]};
    let comp = _.template( $('#tpl').html() ); // 預編譯
    $('body').append( comp (data) ); // 渲染數據

兩種方式的主要區別在於，數據對象在模板中的取值，第一種方式傳什麼就處理什麼數據，傳過來數據就是數據源。第二種是數據的鍵做爲數據源。注意區別，若是使用模塊化，能夠不用在 html 文件中使用 script, 能夠將模板做爲一個獨立的js文件，方便複用html

集合collections

集合，顧名思義處理數據集合的方法，在javascript中，集合主要指數組和對象，固然在es6中，涉及到Set 和 Map 數據結構。關於 set 和 map 的數據結構的集合不在討論範圍。請查閱相關資料。在使用集合方法的時候，爲了便於理解，把數組理解成特殊的對象，數組的索引是對象的鍵，數組的元素是對應的鍵值。html5

each

each(list, iteratee, [context]) 別名： forEach
功能：遍歷對象，與 jquery 中的 $.each() 和 $().each() 以及html5中的 forEach() 功能類似，有細微的差異。
返回值：返回集合自己
參數：list,待遍歷的集合； iteratee，回調函數；context,做用域，關於做用域的使用請查相關的資料，主要是針對 this 指針，指向當前集合。

_.each({one: '阿里巴巴', two: '騰訊', three: '百度'},function(value,key){
        console.log(value); // 阿里巴巴 騰訊 百度
    });
    // 注意回調函數中的，對於對象來講 value 表示是值，key表示的是鍵。

map

map(list, iteratee, [context]) 別名： collect
功能：經過回調函數，將集合中的每個元素映射到一個新的數組中。與 jquery 中的 $.map() 功能相似
返回值：新的數組
參數：同上

_.map([1, 2, 3], function(num){
        return num * 3
    });  // [3,6,9]

    _.map({one: 1, two: 2, three: 3}, function(num, key){
        return num * 3;
    }); // [3,6,9]

reduce

reduce(list, iteratee, [memo], [context]) 別名: inject, foldl
功能：迭代，根據執行的不一樣方法，進行數據迭代
返回值：迭代後的結果
參數：list，同上；iteratee，回調函數；memo，迭代的起始值，可選；context，做用域，與前文相同；

/****************************** 累加 ***************************/
    var result = _.reduce([1,2,3,4,5],function(v1,v2){
        return v1 + v2; // v1,表示每次迭代後的結果，v2，表示當前對象
     },10); // 參數10， 表示迭代的起始值。不傳，默認是集合的第一個元素
     console.log( result ); // 25
    /*************************** 合併數組 ***************************/
    var result = _.reduce([[1,2],[3,4],5,6,[[7,8]]],function(v1,v2){
        return v1.concat( v2 ); 
    });
    console.log( result ); // [1,2,3,4,5,6,[7,8]]

reduceRight

功能與reduce相似，別名: foldr，不一樣的是，該方法從後向前迭代，其餘並沒有區別，用法參考reduce，須要說明的是，在es5提供了一樣的方法，方法名與功能相同，能夠直接使用。java

find

find(list, predicate, [context] 別名： detect
功能：查找某一指定的元素，或者指定條件的值，找到當即返回。
返回值：返回知足條件的值，條件拒不知足，返回 undefined
參數：list，同上；predicate，查找的條件；context，做用域，同上

var even = _.find([ 1, 3, 4, 5, 6 , 2 ], function( num ){ 
        return num % 2 == 0; 
    });
    console.log(even); // 4
    
    var result = _.find([ 'a','bb','cc','dd' ], function( str ){ 
        return str.length == 2; 
    });

filter

filter(list, predicate, [context]) 別名： select
功能：功能與 find 相似不一樣的是 filter 遍歷全部的數據，返回全部知足條件的數據
返回值：知足條件的數組
參數：同上

var evens = _.filter([1, 2, 3, 4, 5, 6], function(num){
       return num % 2 == 0; 
    });
    console.log( evens ) ; // [2,4,6]

where

where(list, properties)
功能：篩選含有 properties 全部的元素，
返回值：返回一個數組
參數：list，同上；properties，鍵值對的對象

var result = _.where([
        {title: "The Tempest", author: "Shakespeare", year: 1611},
        {title: "The Tempest", year: 44},
        {title: "The Tempest", author: "Shakespeare", year: 50},
        {year: 44}],{year:44});
    console.log( result ); // [{title: "The Tempest", year: 44},{year: 44}]

findWhere

findWhere(list, properties)
功能：功能與 where 基本相同，不一樣點是 findWhere 返回第一個查找到的元素，即條件成立後當即中止查找，並返回查找到的值。

var result = _.findWhere([
        {title: "The Tempest", year: 1611},
        {title: "The Tempest", year: 44},
        {author: "Shakespeare", year: 1611,'csss':'css'}],{year: 1611});
        console.log( result ); // {title: "The Tempest", year: 1611}

reject

reject(list, predicate, [context])
功能：返回不知足條件的數據，與filter功能相反，無其餘區別。
返回值：不知足條件的數組
參數：list，同上；predicate，查找的條件；context，做用域，同上

var result = _.reject([1, 2, 3, 4, 5, 6], function( item ){ 
        return item % 2 == 0;
    });
    console.log( result ); // [1,3,5]

every

every(list, [predicate], [context]) 別名： all
功能：檢測全部的數據是否知足條件，若所有知足返回true，不然返回 false；注意是falsly值，0，undefined,null,false,''；es5提供了該方法
返回值：布爾值
參數：同上

var result = _.every([true, 1, null, 'yes']);
    console.log( result ); // false

some

some(list, [predicate], [context]) 別名： any
功能：檢測數據是否知足條件，只要有一個數據爲真則返回 true，不然返回 false，用法與 every 類似。不一樣在於一個是存在，一個是所有知足。es5提供了該方法

var result = _.some([null, 0, 'yes', false]);
    console.log( result ); // true

contains

contains(list, value) 別名： include
功能：檢測集合中是否包含某一值，若包含返回 true，不然返回 false
返回值：布爾值
參數：list,數據集合；value，指定的數據

var result = _.contains([1, 2, 3], 3);
    console.log( result ); // true
    
    var result = _.contains( {'name':123,'age':'age',sex:'男'}, '男' );
    console.log( result ); // true

invoke

invoke(list, methodName, *arguments)
功能：爲集合中每一項執行一個方法，在自定義方法中 this 表示當前對象。
返回值：返回執行後的結果
參數：list,集合；methodName，方法的引用，方法的參數；

var result = _.invoke([[5, 1, 7], [3, 2, 1]], 'sort'); // 排序
    console.log( result ); // [ [1, 5, 7], [1, 2, 3] ]
    
    var result = _.invoke([[5, 1, 7], [3, 2, 1]], 'reverse'); // 倒置
    console.log( result ); // [[7, 1, 5], [1, 2, 3]]
    
    // 自定義方法 arguments 表示方法的參數
    var result = _.invoke( [ 1, 2, 3, 4, 5 ], 'toFixed', 2 ); // 保留2位小數
    console.log(result); // ["1.00", "2.00", "3.00", "4.00", "5.00"]
    
    // 自定義方法 this 表示當前元素
    var result = _.invoke( [ 1, 2, 3, 4, 5 ], function(){
        return this + 10;    
    }); 
    console.log( result ); // [11, 12, 13, 14, 15]
    
    // 自定義方法傳參
    var result = _.invoke( [ 1, 2, 3, 4, 5 ], function( a ){
        return this * a;    
    },10);
    console.log( result ); // [10, 20, 30, 40, 50]

pluck

pluck(list, propertyName)
功能：即萃取對象數組中某屬性值，返回一個數組。
返回值：返回一個由屬性值組成的新數組
參數：list，數據集合，propertyName，待提取的鍵

var result =  _.pluck(
        [
            {name: 'moe',  age: 40 }, 
            {name: 'larry', age: 50},
            {name: 'curly',age: 60}
        ], 'name'); 
      console.log( result ); // ["moe", "larry", "curly"]

max

max(list, [iteratee], [context])
功能：獲取集合中的最大值，若是list爲空，將返回-Infinity，因此你可能須要事先用isEmpty檢查 list。
返回值：返回最大值
參數：list，集合；iteratee，回調函數，context，上下文；

var result = _.max(
        [
            {name: 'moe', age: 40}, 
            {name: 'larry', age: 50}, 
            {name: 'curly', age: 60}
        ], function( item ){ 
            return item.age; 
        });
    console.log( result ); // {name: "curly", age: 60}

min

功能：與 max 用法類似，不一樣的是 min 是獲取最小值。請參考 max 方法

var result = _.min( [10, 5, 100, 2, 1000], function( a, b ){
        console.log(a,b); // a 值，b 索引
    });
    console.log( result ); // 2

sortBy

sortBy(list, iteratee, [context])
功能：按照給定的條件，排序。回調函數中能夠是字符串的屬性爲條件(好比 length )。可使用在條件前使用 '-' 號，反向排序
返回值：排序後的副本
參數：同上

var result = _.sortBy([1, 2, 3, 4, 5, 6], function( item ){ 
        return Math.sin( item ); // 按sin值得大小對元素排列 
    });
    console.log( result ); // [5, 4, 6, 3, 1, 2]

    var result = _.sortBy(['alibaba','xiaomi','tengxu','baidu','cctv'],function( item ){ 
        return item.length; // 按字符串長度排序 
    });
    console.log(result); // ["cctv", "baidu", "xiaomi", "tengxu", "alibaba"]

    var result = _.sortBy([
        {'age':30},
        {'age':8,'name':'百度'},
        {'age':50,'name':'阿里'}
    ], function( item ){ 
        return  item.age; 
    });
    console.log(result) // [{'age':8,'name':'百度'},{'age':30},{'age':50,'name':'阿里'}] 
    
    var result = _.sortBy([ 5, 0, 2, -1, -3, 4, -17, 6], function( item ){ 
        return Math.abs( num ); // 按絕對值 的大小 排列數據 
    });
console.log( result ); // [0, -1, 2, -3, 4, 5, 6, -17]

groupBy

groupBy(list, iteratee, [context])
功能：把一個集合根據條件分組成多個集合。條件做爲鍵，知足條件的項，做爲值( 數組 )
返回值：返回一個對象
參數：同上

var result = _.groupBy([1.3, 2.1, 2.4, 8.3], function( item ){ 
        return Math.floor( item ); 
    });
    console.log( result,123 ); // { 1:[ 1.3 ], 2:[ 2.1, 2.4 ] }
    
    // 使用屬性，做爲條件
    var result = _.groupBy(['one', 'two', 'three'], 'length');
    console.log( result ); // { 2:[ "one", "two" ], 5:[ "three" ] }
    // 使用函數，做爲條件
    var result = _.groupBy(['one', 'two', 'three'], function( value, key ){
        return value.length; 
    });
    console.log( result ); // { 2:[ "one", "two" ], 5:[ "three" ] }

indexBy

indexBy(list, iteratee, [context])
功能：和 groupBy 相似，以某一指定的屬性名或條件做爲鍵，知足條件的項做爲值，必須保證指定的條件惟一，若是重複會被覆蓋；

//以鍵名爲條件
     var result = _.indexBy([
        { name: 'moe', age: 40 }, 
        { name: 'larry', age: 50 }, 
        { name: 'curly', age: 60},
    ],'age'); 
    console.log( result ); //{ 40 : { name : "moe", age : 40}, 50 : { name : "larry", age : 50 }, 60 : { name : "curly", age : 60 } }
    
    // 以函數爲條件
    var result = _.indexBy([
        { name: 'moe', age: 40 }, 
        { name: 'larry', age: 50 }, 
        { name: 'curly', age: 60},
    ],function( item, key ){
        return item.age;
    });
    console.log( result ); //' {40 : { name : "moe", age : 40}, 50 : { name : "larry", age : 50 }, 60 : { name : "curly", age : 60 } }

countBy

countBy(list, iteratee, [context])
功能：實現計數功能，知足某一條件的數量
返回值：以指定鍵和數量組成的對象
參數：同上

var result = _.countBy([1, 2, 3, 4, 5], function( item ) {
        return item % 2 == 0 ? 'even': 'odd'; // 計算奇數偶數的個數，並以指定的鍵值返回
    });
    console.log( result ); // { odd : 3, even : 2 }

shuffle

shuffle( list )
功能：打亂指定的數組
返回值：返回打亂後的數組副本
參數：list,集合；

var result = _.shuffle([1, 2, 3, 4, 5, 6]);
    console.log( result ); // 重新組合的數組

sample

sample(list, [n])
功能：從 list中產生一個隨機樣本。
返回值：返回樣本數組
參數：list，集合；n，可選，指定樣本的長度。不傳則返回長度爲 1 的樣本。

var result = _.sample([1, 2, 3, 4, 5, 6]);
    console.log( result );

toArray

toArray(list)
功能：將類素組轉成數組
返回值：數組
參數：list，類數組

var result = (function(){ 
        return _.toArray(arguments).slice(1); 
    })(1, 2, 3, 4);
    console.log( result ); // [2, 3, 4]

size

size(list)
功能：獲取 list 長度
返回值：list的長度。
參數：list，集合

var result = _.size( { one: 1, two: 2, three: 3} );
    console.log( result ); // 3

partition

partition(array, predicate)
功能：拆分一個數組（array）爲兩個數組。第一個數組其元素都知足 predicate 迭代函數，而第二個的全部元素均不能知足 predicate 迭代函數。
返回值：二維數組
參數：array，數組；predicate，條件；

var result = _.partition([0, 1, 2, 3, 4, 5], function( item ){
        return item % 2 == 0;
    });
    console.log( result ); // [[0, 2, 4],[1, 3, 5]]

數組(Arrays)

first

first(array, [n]) 別名： head, take
功能：獲取元素的前 n 個元素，默認獲取第一個元素
返回值：返回新數組或第一個元素值
參數：array,數組；n 可選，不傳默認爲1

var result = _.first([5, 4, 3, 2, 1]);
console.log( result ); // 5
var result = _.first([5, 4, 3, 2, 1],3);
console.log( result ); // [5, 4, 3]

var result = _.first([{name:'name'},{age:'age'},{sex:'sex'}]);
console.log( result ); // { name:'name' }

initial

initial(array, [n])
功能：獲取去除數組中最後 n 個元素後的元素，默認去除最後一個元素
返回值：新數組
參數：array,數組；n 可選，不傳默認爲1

var result = _.initial([5, 4, 3, 2, 1]);
    console.log( result ); // [5, 4, 3, 2]
    
    var result = _.initial([5, 4, 3, 2, 1],3);
    console.log( result ); // [5, 4]

last

last(array, [n])
功能：獲取數組中的最後 n 個元素，默認返回最後一個元素
返回值：返回新數組或最後一個元素
參數：array,數組；n 可選，不傳默認爲 1

var result = _.last([5, 4, 3, 2, 1]);
    console.log( result ); // 1
    
    var result = _.last([5, 4, 3, 2, 1],2);
    console.log( result ); // [2,1]

rest

rest(array, [n])
功能：獲取去除數組前 n 個元素的元素，默認去除第一個元素
返回值：返回新數組
參數：array,數組；n 可選，不傳默認爲 1

var result = _.rest( [5, 4, 3, 2, 1] );
    console.log( result ); // [4, 3, 2, 1]
    
    var result = _.rest( [5, 4, 3, 2, 1], 3 );
    console.log( result ); // [2, 1]

compact

compact(array) ( 翻譯：緊縮 )
功能：去除數組中的falsy值，在javascript中, false, null, 0, "", undefined 和 NaN 都是false值
返回值：返回新數組
參數：array,數組

var result = _.compact( [0, 1, false, 2, '', 3, 'xyz', undefined, null ] );
    console.log( result ); // [1, 2, 3, "xyz"]

flatten

flatten(array, [shallow])( 翻譯：使...變平 )
功能：將多維數組轉換成一維數組，或者將多維數組減小一維
返回值：返回新數組
參數：array,多維數組；shallow，可選不傳默認轉換成一維，不然將數組減小一維

var result = _.flatten([1, [2], [3, [[4]]]]);
    console.log( result ); // [1, 2, 3, 4] 
    
    var result = _.flatten([1, [2], [3, [[4]]]],true);
    console.log( result ); //' [1,2,3,[[4]]]

without

without(array, *values)
功能：去除指定的數組元素
返回值：返回新數組
參數：array,數組；*value，指定的元素值

var result = _.without([1, 2, 1, 0, 3, 1, 4], 0, 1);
    console.log( result ); // [2,3,4]

union

union(*arrays) (翻譯：聯盟，聯合)
功能：獲取數組並集
返回值：返回新數組
參數：*array,數組，參數若是不是數組會被忽略；

var result = _.union([1, 2, 3], [101, 2, 1, 10], [2, 1]); 
    console.log( result ); // [1, 2, 3, 101, 10]

intersection

intersection(*arrays) (翻譯：交集)
功能：獲取數組交集
返回值：返回新數組
參數：*array，數組

var result = _.intersection([1, 2, 3], [101, 2, 1, 10], [2, 1]);
    console.log( result ); // [1,2]

difference

difference(array, *array) (翻譯：差異，差別)
功能：獲取數組中與其餘數組不一樣的元素
返回值：返回新數組
參數：array，數組；*array，數組

var result = _.difference( [1, 2, 3, 4, 5], [5, 2, 10], [1] );
    console.log( result ); // [3,4]

uniq

uniq(array, [isSorted], [iteratee])
功能：獲取去重後的元素
返回值：返回新數組
參數：array，數組；isSorted，是否已經排序，若果已經排序會執行更優的算法，提升性能。iteratee，回調函數

var result = _.uniq([1, 2, 1, 3, 1, 4]);
    console.log( result ); //
    var result = _.uniq([{name:1},{name:2},{name:3},{name:4},{name:3},{name:2}],function( key, value ){
        return key.name;
    });
    console.log( result ); // [{name:1},{name:2},{name:3},{name:4}]

zip

zip(*arrays)
功能：將每個數組中的每一項的元素一一對應，組成一個新的數組
返回值：返回一個二維數組
參數：*arrays，數組

var result = _.zip(["moe", "larry", "curly"], [30, 40, 50], [true, false,false]);
    console.log( result ); // [["moe", 30, true], ["larry", 40, false], ["curly", 50, false]]

object

object(list, [values])
功能：將數組轉換爲對象
返回值：對象
參數：list 的每一項爲對象的key,values的每一項爲對象的value，list中的每一項與values中的每一項一一對應。

var result = _.object(['moe', 'larry', 'curly'], [30, 40, 50]);
    console.log( result ); // { moe : 30, larry : 40, curly : 50 }
    
    var result = _.object([ [ 'xxxx', 30 ], [ 'yyyy', 40 ], [ 'zzzz', 50 ] ]);
    console.log( result ); // {xxxx: 30, yyyy: 40, zzzz: 50}

indexOf

indexOf(array, value, [isSorted])
功能：獲取指定元素的索引
返回值：返回元素的索引值，若是元素不存在返回 -1
參數：array,數組；value,元素；isSorted，同上。

var result = _.indexOf([1, 2, 3], 2);
    console.log( result ); // 1

lastIndexOf

lastIndexOf(array, value, [fromIndex])
功能：獲取指定元素的索引，從後向前搜索。
返回值：返回元素的索引值，若是元素不存在返回 -1
參數：array,數組；value,元素；fromIndex，將從給定的索引值開始向前搜索。

var result = _.lastIndexOf([1, 2, 3, 1, 2, 3], 1);
    console.log( result ); // 3
    
    var result = _.lastIndexOf([1, 2, 3, 1, 2, 3], 2, 4);
    console.log( result ); // 4

sortedIndex

sortedIndex(list, value, [iteratee], [context])
功能：獲取元素在已經排序後的位置，即索引
返回值：返回索引值
參數：list,數組；value元素；iteratee,回調函數，做爲排序的依據，context做用域，主要針對this指向

var arr = [10, 20, 30, 40, 50];
    var result = _.sortedIndex( arr, 35);
    arr.splice(result,0,35);
    console.log( arr ); // [10, 20, 30, 35, 40, 50]
    
    var result = _.sortedIndex([
            {name: 'moe', age: 40}, 
            {name: 'curly', age: 60}
        ], {name: 'larry', age: 50}, 'age');
    console.log( result ); // 1

findIndex

findIndex(array, predicate, [context])
功能：獲取數組中某一元素的索引，功能與lastIndexOf類似，但功能更強大
返回值：返回索引值，找到即返回，不存在返回 -1
參數：array,數組；predicate條件檢測；context做用域，主要針對this指向

var result = _.findIndex([4, 6, 8, 12], 12); 
    console.log(result);

findLastIndex

findLastIndex(array, predicate, [context])
功能：獲取指定元素的索引，從後向前搜索。功能與indexOf類似，但功能更強大
返回值：返回索引值，找到即返回，不存在返回 -1
參數：同上

range

range([start], stop, [step])
功能：建立一個數組列表
返回值：返回一個從 start 到 stop 的整數的列表。
參數：start，起始值，若不傳默認是從 0 開始；stop，終止值，step，可選，指定步長，默認步長爲 1;默認爲爲升序，若是須要設置降序，須要指定步長爲負，起始值大於終止值

var result = _.range( 0, -10, -1 );
    console.log( result ); // [0, -1, -2, -3, -4, -5, -6, -7, -8, -9]
    
    var result = _.range(10);
    console.log( result ); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
    
    var result = _.range(0,10,2);
    console.log( result ); // [0, 2, 4, 6, 8]

函數(Functions)

bind

bind(function, object, *arguments)
功能：改變this指向，並將this指向指定的對象
返回值：改變指針後的函數
參數：function，須要改變this指向的函數；object，對象，即this指針指向的對象；

*arguments，參數列表，函數參數列表，即參數function的列表jquery

var func = function(greeting){ 
    return greeting + ":"  + this.name 
};
var func = _.bind(func, {"name": "moe"}, "hi");
console.log( func() ); // hi: moe

bindAll

bindAll(object, *methodNames)
功能：將方法綁定到指定對象，即方法中的 this 始終指向 object。
參數：object，須要綁定的對象；*methodNames，指定須要綁定的方法

var buttonView = {
    label  : 'underscore',
    onClick: function(){ 
        alert( 'clicked: ' + this.label ); 
    },
    onHover: function(){ 
        console.log('hovering: ' + this.label ); 
    }
};
_.bindAll(buttonView, 'onClick', 'onHover');
$('button').click(buttonView.onClick); // 使 this 始終指向被綁定的對象，避免this指針指向當前對象

partial

partial(function, *arguments)
功能：將某個函數與參數綁定，而後做爲一個新函數返回。
返回值：返回一個已經綁定了參數的函數。
參數：function，待處理的函數；*arguments，須要給函數綁定的參數

var add = function(a, b, c ) { 
        return a / b + c; 
    };
    add5 = _.partial(add, 5);
    add10 = _.partial(add5, 10);
    console.log( add10( 2 ) ); // 2.5

memoize

memoize(function, [hashFunction])
功能：緩存函數執行的結果，對於耗時較長的計算是頗有幫助的。
返回值：返回一個已經綁定了參數的函數。
參數：function，待執行的函數；
若是傳遞了 hashFunction 參數，就用 hashFunction 的返回值做爲key存儲函數的計算結果

var fibonacci = _.memoize(function(n) {
        return n < 2 ? n : fibonacci( n - 1 ) + fibonacci( n - 2 );
    });
    var result = fibonacci( 10 );
    console.log( result ); // 55
    // 能夠經過下面的方式獲取已經計算過的值
    console.log( fibonacci( 9 ) ); // 34
    console.log( fibonacci.cache[9] ); // 34

delay

delay(function, wait, *arguments)
功能：相似setTimeout，等待wait毫秒後調用function
返回值：返回定時器ID
參數：function，回調函數；wait，延時時間；*arguments，回調函數的參數列表

var log = _.bind(console.log, console); // 固定 this 指針指向
    var result = _.delay(log, 1000, "logged later"); // 1s以後打印 logged later
    console.log( result ); // 返回定時器id

defer

defer(function, *arguments)
功能：延遲調用 function 直到當前調用棧清空爲止，相似使用延時爲 0 的 setTimeout 方法
返回值：定時器ID
參數：function，回調函數；*arguments，回調函數的參數列表

_.defer(function(a,b){ 
    console.log(a,b,a); // 10 undefined 10    
},"10");

throttle

throttle(function, wait, [options])
功能：建立並返回一個像節流閥同樣的函數，當重複調用函數的時候，最多每隔 wait毫秒調用一次該函數。
返回值：返回函數自己(throttle)
參數：function，執行頻繁的函數；wait，下一次執行的時間；options，對象，可選。
若是你想禁用第一次首先執行的話，傳遞{leading: false}，還有若是你想禁用最後一次執行的話，傳遞{trailing: false}。es6
```
var throttled = _.throttle(function(a,b){}, 100);
 $(window).scroll(throttled); // 滾動事件觸發頻繁，節流提升性能
```

debounce

debounce(function, wait, [immediate])
功能：將延遲函數的執行(真正的執行)在函數最後一次調用時刻的 wait 毫秒以後，防止屢次被執行，尤爲在交互中很是有用
返回值：函數
參數：function，待執行的函數；wait，下一次執行的時間，即間隔時間；immediate，可選,爲true在指定的時間內執行

var lazyLayout = _.debounce(function(){
        console.log(123);
    }, 3000);
    $('input').click(lazyLayout); // 每次都會在三秒以後調用該函數，防止重複執行

once

once(function)
功能：建立一個只能調用一次的函數。重複調用改進的方法也沒有效果，只會返回第一次執行時的結果。
返回值：函數
參數：function，函數

function lg( a, b ){
        return a + b;
    };
    var initialize = _.once( lg );
    console.log( initialize(1,2) ); // 3

after

after(count, function)
功能：建立一個函數, 只有在運行了 count 次以後纔有效果。

在處理同組異步請求返回結果時, 若是你要確保同組裏全部異步請求完成以後才執行這個函數, 這將很是有用。算法

返回值：函數
參數：count，執行的次數；function，待處理的函數

var renderNotes = _.after(3, function(){ // 在執行三次以後，執行回調函數

    });
    _.each(notes, function(note) {
         note.asyncSave({success: renderNotes});
    });

before

before(count, function)
功能：建立一個函數,調用不超過count 次。
返回值：函數
參數：count，次數；function，回調函數

var monthlyMeeting = _.before(3, function( a, b ){
        return a + b;
    });
    console.log( monthlyMeeting( 10, 20 ) ); // 30
    console.log( monthlyMeeting( 10, 40 ) ); // 50
    console.log( monthlyMeeting( 10, 40 ) ); // 50
    console.log( monthlyMeeting( 10, 40 ) ); // 50

wrap

wrap(function, wrapper)
功能：將第一個函數 function 封裝到函數 wrapper 裏面, 並把函數 function 做爲第一個參數傳給 wrapper，

控制已知函數的執行順序數組

返回值：函數
參數：function，函數引用；wrapper，回調函數

var hello = function( name ) { 
        return "hello: " + name; 
    };
    hello = _.wrap( hello, function( func ) { // 函數重載
        return "before, " + func( "moe" ) + ", after";
    });
    console.log( hello() ); // before, hello: moe, after

negate

negate(predicate)
功能：返回一個新的 predicate 函數的否認版本。
返回值：函數
參數：函數或者基本類型，如: Number, String, Boolean

var isFalsy = _.negate(Number);
    var result = _.find( [-2, 'true', null, 0, 1, 2], isFalsy );
    console.log( result ); // null

compose

compose(*functions)
功能：複合調用函數，相似數學中的複合函數 f(g(h()))
返回值：函數執行後的結果
參數：*functions，函數列表，參數執行是從後向前執行，逐級向左執行。

var greet    = function(name){ 
        return "hi: " + name; 
    };
    var exclaim  = function(statement){ 
        return statement.toUpperCase() + "!"; 
    };
    var test = function( a ){
        return ' ' + a + '   tttt';
    };
    console.log(_.compose(greet,exclaim,test)('alibaba')); // hi:  ALIBABA   TTTT!

對象(Objects)

相關標籤/搜索

underscorejs

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。