underscorejs-indexBy学习

时间:2023-02-24 17:20:10

2.19 indexBy

2.19.1 语法

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

2.19.2 说明

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

2.19.3 什么时候用_.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"}

2.19.4 代码示例

示例一: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'});

underscorejs-indexBy学习的更多相关文章

  1. 不学就吃亏的underscorejs类库学习示例 ——(集合篇)

    underscorejs是一个很不错的类库,我的很多项目都引用了这个类库,的确可以带来很多方便. 记得我当初学的时候,看underscorejs的api是看的一知半解的,甚至不明白api里的conte ...

  2. Yii 框架学习--01 框架入门

    Yii 是一个高性能的,适用于开发 WEB2.0 应用的 PHP 框架. Yii目前有两个主要的版本: 2.0 和 1.1.本文以YII 2.0.7为例. 环境需求 Yii2.0 框架有一些系统上的需 ...

  3. Backbone学习笔记一Backbone中的MVC

    原文章地址http://bigdots.github.io/2015/12/01/Backbone学习笔记(一)/#more Backbone.js为复杂WEB应用程序提供模型(models).集合( ...

  4. APPCAN学习笔记004---AppCan与Hybrid,appcan概述

    APPCAN学习笔记004---AppCan与Hybrid,appcan概述 技术qq交流群:JavaDream:251572072 本节讲了appcan的开发流程,和开发工具 笔记不做具体介绍了,以 ...

  5. Angularjs学习笔记《一》

    开始慢慢的学习新的框架,Angularjs,其中原理不知深浅,但有例子练习,慢慢熟知.看的英文文档一点点翻译学习. 第一个例子,写一个增加,选中,删除的例子, 首先要引进所用的框架源码,这样引进,下面 ...

  6. Underscore.js 源码学习笔记(上)

    版本 Underscore.js 1.9.1 一共 1693 行.注释我就删了,太长了… 整体是一个 (function() {...}());  这样的东西,我们应该知道这是一个 IIFE(立即执行 ...

  7. Backbone学习笔记 - View篇

    Backbone是一种Web端的MVC框架,这里纪录学习Model,View和Collection的笔记. 1 View initialize构造函数 Backbone.View 与jQuery库紧密 ...

  8. 作为一个新手的Oracle(DBA)学习笔记【转】

    一.Oracle的使用 1).启动 *DQL:数据查询语言 *DML:数据操作语言 *DDL:数据定义语言 DCL:数据控制语言 TPL:事务处理语言 CCL:指针控制语言 1.登录 Win+R—cm ...

  9. 从直播编程到直播教育:LiveEdu.tv开启多元化的在线学习直播时代

    2015年9月,一个叫Livecoding.tv的网站在互联网上引起了编程界的注意.缘于Pingwest品玩的一位编辑在上网时无意中发现了这个网站,并写了一篇文章<一个比直播睡觉更奇怪的网站:直 ...

  10. Angular2学习笔记(1)

    Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...

随机推荐

  1. WPF实现物理效果 拉一个小球

    一直以来都对物理效果有神秘感,完全不知道怎么实现的.直到看到了周银辉在老早前写的一篇博客:http://www.cnblogs.com/zhouyinhui/archive/2007/06/23/79 ...

  2. 习题:codevs 1519 过路费 解题报告

    今天拿了这道题目练练手,感觉自己代码能力又增强了不少: 我的思路跟别人可能不一样. 首先我们很容易就能看出,我们需要的边就是最小生成树算法kruskal算法求出来的边,其余的边都可以删掉,于是就有了这 ...

  3. 用wampserver 装的集成环境,命令行进不去提示mysql

    命令行进不去提示mysql 不是内部命令或外部命令. 解决办法,就是将mysql/bin路径加到path中去

  4. Android常用控件之Fragment仿Android4&period;0设置界面

    Fragment是Android3.0新增的概念,是碎片的意思,它和Activity很相像,用来在一个Activity中描述一些行为或部分用户界面:使用多个Fragment可以在一个单独的Activi ...

  5. revit融合

    解决了嵌入部分也会布置砖胎膜或土方问题 1.需根据板往相应方向拉伸,创建拉伸体(非实例) 2.根据轮廓创建融合体 3.将两个物体融合 //创建平面 //创建草图平面,文档必须是族文档 Plane pl ...

  6. Eclipse配置C&plus;&plus;时的三个关键环境变量

    ECLIPSE下载很简单,然后装上MinGW,安装就完成了,关键是要配置三个环境变量 include——C:\MinGW\include lib——C:\MinGW\lib path——C:\MinG ...

  7. linux 下隐藏进程的一种方法

    前言 本文所用到的工具在 https://github.com/gianlucaborello/libprocesshider 可以下载 思路就是利用 LD_PRELOAD 来实现系统函数的劫持 LD ...

  8. C语言中各个数据类型的取值范围

    因为CPU的差异,各系统中的数据类型所占的字节数(bytes)不同,二进制位数(bit)也不同.那么怎样才能知道自己系统的数据类型的字节数,位数呢? 授之以鱼不如授之以渔,大家可以自己从电脑里获取这些 ...

  9. browser-sync &amp&semi; http server

    browser-sync & http server browser-sync https://www.browsersync.io/ usage # step 1 $ npm install ...

  10. js调用父级frame中的方法

    父级frame中的方法: function hideOutline() { $("#outline").hide(); $("#content").attr(& ...