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


Posted in Javascript onJuly 10, 2017

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]
Javascript 相关文章推荐
css把超出的部分显示为省略号的方法兼容火狐
Jul 23 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
Apr 11 Javascript
js左侧三级菜单导航实例代码
Sep 13 Javascript
JS字符串截取函数实例
Dec 27 Javascript
jquery 隐藏与显示tr标签示例代码
Jun 06 Javascript
DOM基础教程之使用DOM控制表单
Jan 20 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
Mar 27 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
May 20 Javascript
AngularJS优雅的自定义指令
Jul 01 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
Apr 27 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
Jul 25 Javascript
原生JavaScript实现的无缝滚动功能详解
Jan 17 Javascript
Angular.js组件之input mask对input输入进行格式化详解
Jul 10 #Javascript
underscore之Chaining_动力节点Java学院整理
Jul 10 #Javascript
Vue 2.0的数据依赖实现原理代码简析
Jul 10 #Javascript
Vue实现virtual-dom的原理简析
Jul 10 #Javascript
Vue2路由动画效果的实现代码
Jul 10 #Javascript
深入浅析Node.js单线程模型
Jul 10 #Javascript
require.js中的define函数详解
Jul 10 #Javascript
You might like
ThinkPHP之用户注册登录留言完整实例
2014/07/22 PHP
php封装的连接Mysql类及用法分析
2015/12/10 PHP
PHP排序算法之冒泡排序(Bubble Sort)实现方法详解
2018/04/20 PHP
PHP通过curl获取接口URL的数据方法
2018/05/31 PHP
PHP中单例模式的使用场景与使用方法讲解
2019/03/18 PHP
jquery validate使用攻略 第四步
2010/07/01 Javascript
通过js获取div的background-image属性
2013/10/15 Javascript
JavaScript获取function所有参数名的方法
2015/10/30 Javascript
动态加载js、css的简单实现代码
2016/05/26 Javascript
js制作网站首页图片轮播特效代码
2016/08/30 Javascript
JS+HTML5实现图片在线预览功能
2017/07/22 Javascript
Express + Session 实现登录验证功能
2017/09/08 Javascript
js登录滑动验证的实现(不滑动无法登陆)
2018/01/03 Javascript
vue-cli3 karma单元测试的实现
2019/01/18 Javascript
亲自动手实现vue日历控件
2019/06/26 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
2020/09/11 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
2020/12/04 Vue.js
[49:54]Ti4 循环赛第三日 LGD vs Titan
2014/07/12 DOTA
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
从零学Python之入门(二)基本数据类型
2014/05/25 Python
Python中有趣在__call__函数
2015/06/21 Python
Python实现爬取逐浪小说的方法
2015/07/07 Python
Python删除windows垃圾文件的方法
2015/07/14 Python
python对批量WAV音频进行等长分割的方法实现
2020/09/25 Python
英国度假别墅预订:Sykes Cottages
2017/06/12 全球购物
Pat McGrath Labs官网:世界上最有影响力的化妆师推出的彩妆品牌
2018/01/07 全球购物
JD Sports芬兰:英国领先的运动鞋和运动服饰零售商
2018/11/16 全球购物
贝尔帐篷精品店:Bell Tent Boutique
2019/06/12 全球购物
毕业实习个人鉴定范文
2013/12/10 职场文书
教学器材管理制度
2014/01/26 职场文书
法律进学校实施方案
2014/03/15 职场文书
感恩小明星事迹材料
2014/05/23 职场文书
学习实践科学发展观心得体会
2014/09/10 职场文书
2015年招聘工作总结
2014/12/12 职场文书
八年级作文之感悟亲情
2019/11/20 职场文书
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
2021/04/29 HTML / CSS