underscore之Collections_动力节点Java学院整理

 更新时间:2017年07月10日 10:15:58   作者:liaoxuefeng  
underscore为集合类对象提供了一致的接口。集合类是指Array和Object,暂不支持Map和Set。下面通过本文给大家分享underscore之Collections的相关知识,需要的的朋友参考下吧

underscore为集合类对象提供了一致的接口。集合类是指Array和Object,暂不支持Map和Set。

map/filter

和Array的map()与filter()类似,但是underscore的map()和filter()可以作用于Object。当作用于Object时,传入的函数为function (value, key),第一个参数接收value,第二个参数接收key:

'use strict';
var obj = {
  name: 'bob',
  school: 'No.1 middle school',
  address: 'xueyuan road'
};
var upper = _.map(obj, function (value, key) {
  return value;
});
alert(JSON.stringify(upper));

你也许会想,为啥对Object作map()操作的返回结果是Array?应该是Object才合理啊!把_.map换成_.mapObject再试试。

every / some

当集合的所有元素都满足条件时,_.every()函数返回true,当集合的至少一个元素满足条件时,_.some()函数返回true:

'use strict';
// 所有元素都大于0?
_.every([1, 4, 7, -3, -9], (x) => x > 0); // false
// 至少一个元素大于0?
_.some([1, 4, 7, -3, -9], (x) => x > 0); // true

当集合是Object时,我们可以同时获得value和key:

'use strict';
var obj = {
  name: 'bob',
  school: 'No.1 middle school',
  address: 'xueyuan road'
};
// 判断key和value是否全部是小写:
var r1 = _.every(obj, function (value, key) {
  return value;
});
var r2 = _.some(obj, function (value, key) {
  return value;
});
alert('every key-value are lowercase: ' + r1 + '\nsome key-value are lowercase: ' + r2);

max / min

这两个函数直接返回集合中最大和最小的数:

'use strict';
var arr = [3, 5, 7, 9];
_.max(arr); // 9
_.min(arr); // 3
// 空集合会返回-Infinity和Infinity,所以要先判断集合不为空:
_.max([])
-Infinity
_.min([])
Infinity

注意,如果集合是Object,max()和min()只作用于value,忽略掉key:

'use strict';
_.max({ a: 1, b: 2, c: 3 }); // 3

groupBy

groupBy()把集合的元素按照key归类,key由传入的函数返回:

'use strict';
var scores = [20, 81, 75, 40, 91, 59, 77, 66, 72, 88, 99];
var groups = _.groupBy(scores, function (x) {
  if (x < 60) {
    return 'C';
  } else if (x < 80) {
    return 'B';
  } else {
    return 'A';
  }
});
// 结果:
// {
//  A: [81, 91, 88, 99],
//  B: [75, 77, 66, 72],
//  C: [20, 40, 59]
// }

可见groupBy()用来分组是非常方便的。

shuffle / sample

shuffle()用洗牌算法随机打乱一个集合:

'use strict';
// 注意每次结果都不一样:
_.shuffle([1, 2, 3, 4, 5, 6]); // [3, 5, 4, 6, 2, 1]
sample()则是随机选择一个或多个元素:
'use strict';
// 注意每次结果都不一样:
// 随机选1个:
_.sample([1, 2, 3, 4, 5, 6]); // 2
// 随机选3个:
_.sample([1, 2, 3, 4, 5, 6], 3); // [6, 1, 4]

相关文章

  • bootstrap和jQuery.Gantt的css冲突 如何解决

    bootstrap和jQuery.Gantt的css冲突 如何解决

    这篇文章主要介绍了bootstrap和jQuery.Gantt的css冲突,本文给出了解决冲突的解决方法,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • Javascript中判断一个值是否为undefined的方法详解

    Javascript中判断一个值是否为undefined的方法详解

    这篇文章给大家详细介绍了在Javascript中如何判断一个值是否为undefined,对大家的日常工作和学习很有帮助,下面来一起看看吧。
    2016-09-09
  • JavaScript中异步与回调的基本概念及回调地狱现象

    JavaScript中异步与回调的基本概念及回调地狱现象

    这篇文章主要介绍了JavaScript中异步与回调的基本概念,以及回调地狱现象,本文主要介绍了异步和回调的基本概念,二者是JavaScript的核心内容,需要所有热爱JS的小伙伴深入了解,需要的朋友可以参考下
    2022-07-07
  • 基于Web Audio API实现音频可视化效果

    基于Web Audio API实现音频可视化效果

    这篇文章主要介绍了基于Web Audio API实现音频可视化效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06
  • vscode使用Prettier Code插件的详细教程

    vscode使用Prettier Code插件的详细教程

    这篇文章主要介绍了vscode使用Prettier Code插件的详细教程,本文通过图文实例相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-09-09
  • 20个拿来就能用的JavaScript技巧分享

    20个拿来就能用的JavaScript技巧分享

    这篇文章主要来和大家一起探讨一下20 种 JavaScript 技巧和窍门,每种技巧和窍门都有通俗易懂的示例,让我们一起来提升你的 JavaScript 技能吧
    2023-10-10
  • 自己使用js/jquery写的一个定制对话框控件

    自己使用js/jquery写的一个定制对话框控件

    自己做一个通用的控件,虽然不是绝对通用啦,但在我这个项目里还是可以随意调用的,思想的话也可以借鉴到别的项目中
    2014-05-05
  • JS小游戏之象棋暗棋源码详解

    JS小游戏之象棋暗棋源码详解

    这篇文章主要介绍了JS小游戏之象棋暗棋源码详解,对游戏源码进行了较为详细的分析,并附带完整实例代码供大家学习参考,需要的朋友可以参考下
    2014-09-09
  • ThingJS粒子特效一键实现雨雪效果

    ThingJS粒子特效一键实现雨雪效果

    在做3D项目时,我们经常需要模拟下雨,下雪的天气,有时也会模拟喷泉、着火等效果。这些效果需要使用名为粒子系统(particle)的技术来实现。使用ThingJS可以快速编写粒子效果,本文就来看看如何实现
    2021-05-05
  • css+js完美控制图片大小

    css+js完美控制图片大小

    在做网站的时候,往往图片的处理很重要,固定尺寸容易变形拉伸,不固定又会有不可预知的问题,有可能撑开页面。
    2009-08-08

最新评论