underscorejs之 _.indexBy(list, iteratee, [context])

语法

_.indexBy(list, iteratee, [context])

说明

给定一个list,和 一个用来返回一个在列表中的每个元素键 的iterator 函数(或属性名), 返回一个每一项索引的对象。和groupBy非常像,但是当你知道list的key是唯一的时候可以使用indexBy**。

什么时候用_.indexBy?

api都会给我们返回类似下面这样子的数据,现在我们要写一个方法。传入id,返回相对应的name或是其他。

var data = [{
    id: 1,
    name: ‘Jon Doe‘,
    birthdate: ‘1/1/1991‘,
    height: ‘5 11‘
}, {
    id: 2,
    name: ‘Jane Smith‘,
    birthdate: ‘1/1/1981‘,
    height: ‘5 6‘
}, {
    id: 3,
    name: ‘Rockin Joe‘,
    birthdate: ‘4/4/1994‘,
    height: ‘6 1‘
}, {
    id: 4,
    name: ‘Jane Blane‘,
    birthdate: ‘1/1/1971‘,
    height: ‘5 9‘
}];

function getUserInfoById(id){
    //写一些代码,可能是这样子的
    return _.find(data, function(element, index, list){
        return  element.id == id;
    });
}

console.log(getUserInfoById(1)); //=> Object {id: 1, name: "Jon Doe", birthdate: "1/1/1991", height: "5 11"}
console.log(getUserInfoById(3)); //=>Object {id: 3, name: "Rockin Joe", birthdate: "4/4/1994", height: "6 1"}

//但是你很快发现,每次都遍历data里面的数据,如果频繁的取用户信息,应该把data的数据重组一下。

//这时候_.indexBy就华丽的上场了。
var dataClone = _.indexBy(data, ‘id‘);

//这样子好多了。
console.log(dataClone[1]); //=> Object {id: 1, name: "Jon Doe", birthdate: "1/1/1991", height: "5 11"}
console.log(dataClone[3]); //=>Object {id: 3, name: "Rockin Joe", birthdate: "4/4/1994", height: "6 1"}

代码示例

示例一:list可以是数组、对象、字符串、arguments等

var result1 = _.indexBy(‘1234‘);
var result2 = _.indexBy([1, 2, 3, 4]);
var result3 = _.indexBy({a:1, b:2, c: 3});
var result4
(function(){
    result4 = _.indexBy(arguments);
}(1, 2, 3));

console.log(result1); //=> Object {1: "1", 2: "2", 3: "3", 4: "4"}
console.log(result2); //=> Object {1: 1, 2: 2, 3: 3, 4: 4}
console.log(result3); //=> Object {1: 1, 2: 2, 3: 3}
console.log(result4); //=> Object {1: 1, 2: 2, 3: 3}

示例二:iteratee的参数

var result1 = _.indexBy(‘1234‘, function(value, index, list){
    console.log(value, index, list);
});

示例三:和_.groupBy对比

var stooges = [{name: ‘moe‘, age: 40}, {name: ‘iori‘, age: 40},  {name: ‘larry‘, age: 50}];
var by1 = _.groupBy(stooges, ‘age‘);
var by2 = _.indexBy(stooges, ‘age‘);

console.log(by1);
//=> Object {"40": [{name: ‘moe‘, age: 40}, {name: ‘iori‘, age: 40}], "50": {name: ‘larry‘, age: 50}}
console.log(by2);
//=> Object {"40": {name: ‘iori‘, age: 40}, "50": {name: ‘larry‘, age: 50}}

示例四:context改成iteratee内的this

var stooges = [{name: ‘moe‘, age: 40}, {name: ‘iori‘, age: 40},  {name: ‘larry‘, age: 50}];
var by1 = _.groupBy(stooges, function(value, index, list){
    console.log(this);
}, {text : ‘text‘});
时间: 2024-10-17 05:19:53

underscorejs之 _.indexBy(list, iteratee, [context])的相关文章

underscorejs之_.countBy(list, iteratee, [context])

语法 _.countBy(list, iteratee, [context]) 说明 排序一个列表组成一个组,并且返回各组中的对象的数量的计数.类似groupBy,但是不是返回列表的值,而是返回在该组中值的数目.就像EXCEL里的分类统计 list为 遍历的集合,如数组.对象.字符串.arguments等. iteratee 迭代器,可以是一个function也可以字符串等. iteratee 有三个参数 (element, index, list) iteratee 需要有返回 context

underscorejs之_.map(list, iteratee, [context])

语法: _.map(list, iteratee, [context]) 说明: 对集合的每个成员依次进行某种操作,将返回的值依次存入一个新的数组.接收3个参数.list可理解为数据源iteratee迭代器可理解为回调方法;context执行上下文. list可以操作数组,对象,字符串和arguments iteratee 会传第三个参数(element, index, list)或(value, key, list) iteratee里面需要返回值. context可以改变iteratee内部

underscorejs类库之_.each(list, iteratee, [context])

语法: _.each(list, iteratee, [context]) 说明: 依次对集合的所有元素进行某种操作,原样返回list.接收3个参数,list集合可以理解为数据源:iteratee即迭代器可以理解为回调方法;context执行上下文. list可以为数组,对象,字符串和arguments iteratee 会传第三个参数(element, index, list)或(value, key, list) context可以改变iteratee内部的this 示例一:each可以循环

underscorejs之_.filter(list, predicate, [context])

语法: _.filter(list, predicate, [context]) 说明: 对list集合的每个成员依次进行匹配(根据predicate迭代函数检测),返回匹配成功的集合 list可以为数组,对象,字符串和arguments predicate会传第三个参数value, key, list(参数名可自定义) predicate函数需要返回值 context可以改变predicate函数内部的this 代码示例: 示例一:filter对数组,对象,字符串,arguments进行操作并

underscorejs之_.find(list, predicate, [context])

语法: _.find(list, predicate, [context]) 说明: 对list集合的每个成员依次进行匹配(根据predicate迭代函数检测),匹配成功则立即返回当前成员 list可以为数组,对象,字符串和arguments predicate会传第三个参数value, key, list(参数名可自定义) predicate函数需要返回值 context可以改变predicate函数内部的this 代码示例: 示例一:find对数组,对象,字符串,arguments进行操作并

浅谈 Underscorejs中 _.throttle 和 _.debounce 的差异和使用场景

通常的函数(或方法)调用过程分为三个部分:请求.执行和响应.(文中"请求"与"调用"同义,"响应"与"返回"同义,为了更好的表述,刻意采用请求和响应的说法.) 某些场景下,比如响应鼠标移动或者窗口大小调整的事件,触发频率比较高.若稍处理函数微复杂,需要较多的运算执行时间,响应速度跟不上触发频率,往往会出现延迟,导致假死或者卡顿感. 在运算资源不够的时候,最直观的解决办法就是升级硬件,诚然通过购买更好的硬件可以解决部分问题,但是

each_.each(list, iteratee, [context]) 别名: forEach

<!DOCTYPE html> <html> <meta charset="utf-8"> <head> <title></title> <script type="text/javascript" src="underscore.js"></script> </head> <script type="text/javasc

underscorejs之_.contains(list, item, fromIndex, guard)

语法: _.contains(list, item, fromIndex, guard) 说明: list集合包含指定的值则返回true,否则返回false list可以为数组,对象,字符串和arguments item是一个参数(contains会处理list中是否包含此参数),可以为数字,字符串 fromIndex是一个数字,根据此索引决定list开始检索的位置,可为正值,也可为负值:(负值不是真正的负值,而是list的倒数,下面会详细讲解):若非数字则fromIndex的索引从0开始 代码

underscore中文api (1.8.2)

Underscore一个JavaScript实用库,提供了一整套函数式编程的实用功能,但是没有扩展任何JavaScript内置对象.它是这个问题的答案:“如果我在一个空白的HTML页面前坐下, 并希望立即开始工作, 我需要什么?“...它弥补了部分jQuery没有实现的功能,同时又是Backbone.js必不可少的部分. (感谢@小邓子daj的翻译建议) Underscore提供了100多个函数,包括常用的: map, filter, invoke — 当然还有更多专业的辅助函数,如:函数绑定,