underscorejs
模板 template
- template的简单使用方法介绍 框架提供了字符串模板,方便数据渲染 有两种数据渲染方式 1. 使用 _.template(tplStr,data),相关代码如下
<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), 相关代码如下
<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 文件,方便复用
集合 collections
集合,顾名思义处理数据集合的方法,在 javascript 中,集合主要指数组和对象,当然在 es6 中,涉及到 Set 和 Map 数据结构。关于 set 和 map 的数据结构的集合不在讨论范围。请查阅相关资料。在使用集合方法的时候,为了便于理解,把数组理解成特殊的对象,数组的索引是对象的键,数组的元素是对应的键值。
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 提供了同样的方法,方法名与功能相同,可以直接使用。
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 的列表
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}。
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!
复制代码
本文为作者原创文章,转载无需和我联系,但请注明转载链接。 【前端黑猫】