星空网 > 软件开发 > Java

lodash用法系列,使用Map/Reduce转换

 

Lodash用来操作对象和集合,比Underscore拥有更多的功能和更好的性能。

官网:https://lodash.com/
引用:<script src='/images/loading.gif' data-original="http://www.cnblogs.com///cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
安装:npm install lodash

首先通过npm安装lodash:
npm i --save lodash

在js文件中引用lodash:
var _ = require('lodash');

 

本系列包括:

 

● lodash用法系列(1),数组集合操作
● lodash用法系列(2),处理对象 
● lodash用法系列(3),使用函数 
● lodash用法系列(4),使用Map/Reduce转换  
● lodash用法系列(5),链式 
● lodash用法系列(6),函数种种 

 

 

■ 对象的集合,留下对象中某个字段的集合

 

var collection = [  {name: '', age:45}];_.pluck(collection, 'age');

 

也可以这样写:

_.map(collection, 'age');

 

■ 对象的集合,留下想要的字段们

 

var collection = [  {frist:'',last:'',age:23},  ...];_.map(collection, function(item){  return _.pick(item, ['first','last']);})

 


■ 对象的集合,排除不想要的字段们,不想要的字段作为参数传递

 

var collection = [  {first:'',last:'',age:19},  ...];_.map(collection, function(item){  return _.omit(item, 'first');})

 

■ 对象的集合,排除不想要的字段们,通过函数

 

var collection = [  {first:'',last:'',age:19},  ...];//key 字段名称//value 字段对应的值function invalidAge(value, key){  return key === 'age' && value < 40;}_.map(collection, function(item){  reutrn _.omit(item, invalidAge);});

 

■ 对象的集合,给对象元素添加新的字段,根据现有字段计算而得

 

var collection = [  { name: 'Valerie', jqueryYears: 4, cssYears: 3 },  { name: 'Alonzo', jqueryYears: 1, cssYears: 5 },  { name: 'Claire', jqueryYears: 3, cssYears: 1 },  { name: 'Duane', jqueryYears: 2, cssYears: 0 }];var result = _.map(collection, function(item){  return _.extend({    experience: item.jqueryYears + item.cssYears,    speciality: item.jqueryYears >= item.cssYears ? 'jQuery' : 'CSS'  }, item);});//[ { experience: 7,speciality: 'jQuery',name: 'Valerie',jqueryYears: 4,cssYears: 3 },...]console.log(result);

 

■ 使用map方法一个不易发现的错误

 

var app = {},  collection = [    { name: 'Cameron', supervisor: false },    { name: 'Lindsey', supervisor: true },    { name: 'Kenneth', supervisor: false },    { name: 'Caroline', supervisor: true }  ];app.supervisor = _.find(collection, {supervisor:true});//{ supervisor: { name: 'Lindsey', supervisor: true } }console.log(app);_.map(collection, function(item){  return _.extend(item, {supervisor: false});});//{ supervisor: { name: 'Lindsey', supervisor: false } }console.log(app);

 


以上,使用map对collection集合操作,重写supervisor字段的值,居然也把app对象的supervisor字段值也重写了。

■ map方法使用内置函数,计算每一个集合元素的大小

 

var collection=[  [1,2],  [1,2,3],  {first:1, second:2},  {first:1, second:2,third:3}];var result = _.map(collection, _.size);//[ 2, 3, 2, 3 ]console.log(result);

 

■ map方法使用内置函数,获取每个集合元素中的最小值

 

var source = _.range(1000),  collection=[    //sample从集合中获取一个或n个元素    _.sample(source,50),    _.sample(source,100),    _.sample(source,150)  ];//[ 12, 44, 0 ]console.log(_.map(collection, _.min));

 

■ map方法使用内置函数,针对集合元素依次调用多个方法

 

var collection = [  [ 'Evan', 'Veronica', 'Dana' ],  [ 'Lila', 'Ronald', 'Dwayne' ],  [ 'Ivan', 'Alfred', 'Doug' ],  [ 'Penny', 'Lynne', 'Andy' ]];var result = _.map(collection, _.flowRight(_.first, function(item){  return _.sortBy(item);}));//[ 'Dana', 'Dwayne', 'Alfred', 'Andy' ]console.log(result);

 


以上,flowRight方**依次调用其参数方法,先给每个一个元素内的元素排序,然后取出元素中的元素中的第一个。

■ 对集合元素依次使用多个方法

 

var collection = [  { name: 'Karl', enabled: true },  { name: 'Sophie', enabled: true },  { name: 'Jerald', enabled: false },  { name: 'Angie', enabled: false }];var result = _.flowRight(  _.partialRight(_.map, 'name'),  _.partialRight(_.filter, 'enabled'))(collection);//[ 'Karl', 'Sophie' ]console.log(result);

 


以上,对集合依次使用了filter和map方法。

■ 获取对象的所有键值

 

var object = {  first: 'Ronald',  last: 'Walters',  employer: 'Packt'};var result = _.map(_.sortBy(_.keys(object)), function(item){  return object[item];})//[ 'Packt', 'Ronald', 'Walters' ]console.log(result);

 

以上,_.keys(object)获取对象的所有键,_.sortBy(_.keys(object))对所有键排序,然后根据键获取所有元素。

■ 创建唯一的自增编号

 

var result = _.uniqueId('user-');var result2 = _.uniqueId('user-');console.log(result);//user-1console.log(result2);//user-2

 

以上,通过_.uniqueId('user-');创建的编号是唯一、自增的。

■ 从两个具有相同键、相同键数量的对象中,取出对应的键、键值合并成一个新的对象,新的对象作为数组元素

 

ar users = {},  prefereces = {};_.each(_.range(100), function () {  var id = _.uniqueId('user-');  users[id] = {type: 'user'};  prefereces[id] = {email: !!(_.random())}});//users:{ 'user-1': { type: 'user' },'user-2': { type: 'user' },...}//preference:{ 'user-1': { email: false }, 'user-2': { email: true }...}//users和preference的键是一样的,键对应的值都是对象,键的数量也是一样的var result = _.map(users, function (value, key) {  return _.extend({id: key}, prefereces[key]);});//[ { id: 'user-1', email: false },{ id: 'user-2', email: true },...]console.log(result);

 

■ 对象中键值包含值或函数,取出对象的所有键值对方到一个数组中,键值是函数的执行该函数

var obj = {  first: 'a',  last: 'b',  name: function () {    return this.first + ' ' + this.last;  },  age: 22,  retirement: 65,  working: function () {    return this.retirement - this.age;  }};var result1 = _.map(obj, function (value, key) {  var item = {};  item[key] = _.isFunction(value) ? obj[key]() : value;  return item;});//[ { first: 'a' },//  { last: 'b' },//  { name: 'a b' },//  { age: 22 },//  { retirement: 65 },//  { working: 43 } ]console.log(result1);//[ { first: 'a' },//  { last: 'b' },//  { name: 'a b' },//  { age: 22 },//  { retirement: 65 },//  { working: 43 } ]var result2=_.map(obj, function(value, key){  var item={};  item[key]= _.result(obj,key);  return item;});console.log(result2);

 

以上,一个是通过isFunction来判断键值是否是函数,一个直接调用result来执行键值函数。

■ 根据键取出一个对象中间对应的函数

 

var object = {  'user': 'fred',  'greet': function(greeting, punctuation) {    return greeting + ' ' + this.user + punctuation;  }};var bound = _.bindKey(object, 'greet','hi');//hi fred!console.log(bound('!'));

 

以上,bindKey,根据键greet这个键把它对应的函数取出来。

■ 把对象中的函数取出来放到一个数组中,再invoke它们

 

var obj={  firstName: 'a',  lastName: 'b',  first: function(){    return this.firstName;  },  last: function(){    return this.lastName;  }};var methods =_.map(_.functions(obj),function(item){  return [_.bindKey(obj, item)];});console.log(methods);//[ 'a', 'b' ]console.log(_.invoke(methods,0));

 

■ 把一个对象中的所有值取出来

 

var _ = require('lodash');var obj = {  first: 'a',  last: 'b',  age:50};var result = _.map(_.filter(_.values(obj), _.isString), function(item){  return '<strong>' + item + '</strong>';});//[ '<strong>a</strong>', '<strong>b</strong>' ]console.log(result);

 

不仅通过values把对象的值取出来,还用filter进行了排序,最后还把值包裹到html元素中。

■ 把对象的键值转换成数组元素,再放到更大的数组中去

 

//把首字母转换成大写function capitalize(s){  return s.charAt(0).toUpperCase() + s.slice(1);}//label接受对象的key//value接受对象的键值function format(label, value) {  return '<label>' + capitalize(label) + ':</label>' +    '<strong>' + value + '</strong>';}var object = {  first: 'Julian',  last: 'Ramos',  age: 43};var tempParis =_.pairs(object);//[ [ 'first', 'Julian' ], [ 'last', 'Ramos' ], [ 'age', 43 ] ]console.log(tempParis);var result = _.map(tempParis, function(pair){  return format.apply(undefined, pair);});

 

以上,pairs方法把对象的键值作为数组的元素,比如[ 'first', 'Julian' ],再把[ 'first', 'Julian' ]放到一个更大的数组中:[ [ 'first', 'Julian' ], ...]


■ 对象的集合,计算某个字段的和,累加的初始值是数字

 

var collection = [  { ram: 1024, storage: 2048 },  { ram: 2048, storage: 4096 },  { ram: 1024, storage: 2048 },  { ram: 2048, storage: 4096 }];var result1 = _.reduce(collection, function(result, item){  return result+item.ram;},0);//6144console.log(result1);var result2 = _.reduce(collection, function(result, item){  return result+item.storage;},0);//12288console.log(result2);

 

以上,0是累加的初始值。

■ 对象的集合,计算某个字段的和, 累加的初始值是对象,类加后的结果也是对象

 

var collection = [  {hits: 2, misses: 4},  {hits: 5, misses: 1},  {hits: 3, misses: 8},  {hits: 7, misses: 3}];var result = _.reduce(collection, function(result, item) {  return {    hits: result.hits + item.hits,    misses: result.misses + item.misses  };}, { hits: 0, misses: 0 });//{ hits: 17, misses: 16 }console.log(result);

 

■ 自定义累加的算法

 

function add(a,b){  return a+b;}var collection =[  {wins:34, loses:21},  {wins:58, loses:12},  {wins:34, loses:23},  {wins:40, loses:15},];var result1 = _.reduce(_.range(1,6),add);//[ 1, 2, 3, 4, 5 ]console.log(result1);//15var result2 =_.reduce(_.pluck(collection,'wins'),add);console.log(result2);//166

 


■ 对象的集合,先过滤,然后自定义求和算法

 

var collection = [  { name: 'Gina', age: 34, enabled: true },  { name: 'Trevor', age: 45, enabled: false },  { name: 'Judy', age: 71, enabled: true },  { name: 'Preston', age: 19, enabled: false }];var result = _.reduce(_.filter(collection, 'enabled'), function(result, item){  result.names.push(item.name);  result.years+= item.age;  return result;},{names:[], years:0});//{ names: [ 'Gina', 'Judy' ], years: 105 }console.log(result);

 


■ 对象的集合,自定义求和算法,并在算法中过滤

 

var collection = [  { name: 'Melissa', age: 28, enabled: true },  { name: 'Kristy', age: 22, enabled: true },  { name: 'Kerry', age: 31, enabled: false },  { name: 'Damon', age: 36, enabled: false }];var result = _.reduce(collection, function(result, item) {  if (item.enabled) {    result.names.push(item.name);    result.years += item.age;  }  return result;}, { names: [], years: 0 });//{ names: [ 'Melissa', 'Kristy' ], years: 50 }console.log(result);

 


■ 对象集合,对象元素中有一个字段是整型数组,这些数组元素相加,把和最小所在的对象打印出来

 

//对象中的一个字段是数值数组var collection = [  { name: 'Madeline', scores: [ 88, 45, 83 ] },  { name: 'Susan', scores: [ 79, 82, 78 ] },  { name: 'Hugo', scores: [ 90, 84, 85 ] },  { name: 'Thomas', scores: [ 74, 69, 78 ] }];//对对象item的scores字段所代表的数组数组求和function score(item) {  return _.reduce(item.scores, function(result, score) {    return result + score;  });}var result = _.min(collection, score);//{ name: 'Madeline', scores: [ 88, 45, 83 ] }console.log(result);

 

如果求最大,那就是:

 

var result = _.max(collection, score);

 

■ 对象的集合,对象元素中有个字段是整型号数组,求出每个对象元素整型数组的平均值,放在一个数组中,再求这个数组的平均值

 

function average(items){  return _.reduce(items, function(result, item){    return result + item;  }) / items.length;}var collection = [  { name: 'Anthony', scores: [ 89, 59, 78 ] },  { name: 'Wendy', scores: [ 84, 80, 81 ] },  { name: 'Marie', scores: [ 58, 67, 63 ] },  { name: 'Joshua', scores: [ 76, 68, 74 ] }];//result表示累加之和//item表示集合中的元素//index表示集合元素索引//coll表示集合var result = _.reduce(collection, function(result, item, index, coll){  var ave = average(item.scores);  result.push(ave);  //如果当前元素的索引是集合中的最后一个元素  if(index === (coll.length - 1)){    return average(result);  }  return result;},[]).toFixed(2);//73.08console.log(result);

 

■ 删除某个对象中的某些键值对

 

var object = {  first: 'a',  last: 'b',  age: 41},allowed = ['first','last'];var result = _.reduce(object,function(result, value, key){  if(_.contains(allowed, key)){    result[key] = value;  }  return result;},{});//{ first: 'a', last: 'b' }console.log(result);var result2 = _.pick(object, allowed);//{ first: 'a', last: 'b' }console.log(result2);

 

以上,分别通过reduce和pick的方式把对象中的不需要的字段剔除了。


■ 剔除对象中不需要的键值对,并对某些键值进行转换

 

var object = {  first: '&lt;strong&gt;Nicole&lt;/strong&gt;',  last: '&lt;strong&gt;Russel&lt;/strong&gt;',  age: 26};var result = _.transform(object, function(result, value, key) {  if (_.isString(value)) {    result[key] = _.unescape(value);  }});//{ first: '<strong>Nicole</strong>',//  last: '<strong>Russel</strong>' }console.log(result);

 

以上,unescape是把键值转换成html元素。

■ 对对象的键值进行转换,再调用对象的原型方法

 

function Person(first, last){  this.first = first;  this.last = last;}Person.prototype.name = function name(){  return this.first + ' ' + this.last;}var darren = new Person('Darren','ji');var result = _.transform(darren, function(result, value,key){  if(_.isString(value)){    result[key] = value.toString();  }}).name();//Darren jiconsole.log(result);

 

■ 对象集合,根据对象元素的某个字段进行分组

 

var collection = [  { id: _.uniqueId('id-'), position: 'absolute', top: 12 },  { id: _.uniqueId('id-'), position: 'relative', top: 20 },  { id: _.uniqueId('id-'), position: 'absolute', top: 12 },  { id: _.uniqueId('id-'), position: 'relative', top: 20 }];var result = _.groupBy(collection, 'position');//{ absolute://  [ { id: 'id-1', position: 'absolute', top: 12 },//    { id: 'id-3', position: 'absolute', top: 12 } ],//    relative://  [ { id: 'id-2', position: 'relative', top: 20 },//    { id: 'id-4', position: 'relative', top: 20 } ] }console.log(result);var result2 = _.indexBy(collection, 'id');//{ 'id-1': { id: 'id-1', position: 'absolute', top: 12 },//  'id-2': { id: 'id-2', position: 'relative', top: 20 },//  'id-3': { id: 'id-3', position: 'absolute', top: 12 },//  'id-4': { id: 'id-4', position: 'relative', top: 20 } }console.log(result2);

 

■ 为map方法绑定上下文

 

var app = {  states: [    'running',    'off',    'paused'  ],  machines: [    { id: _.uniqueId(), state: 1 },    { id: _.uniqueId(), state: 0 },    { id: _.uniqueId(), state: 0 },    { id: _.uniqueId(), state: 2 }  ]};var mapStates = _.partialRight(_.map, function(item){  return _.extend({state: this.states[item.state]}, _.pick(item,'id'));},app);var result = mapStates(app.machines);//[ { state: 'off', id: '1' },//  { state: 'running', id: '2' },//  { state: 'running', id: '3' },//  { state: 'paused', id: '4' } ]console.log(result);

 

以上,partialRight方法的第三个参数app是map方法的上下文。

■ 为reduce方法绑定上下文

 

var collection = [ 12, 34, 53, 43 ],  settings = { tax: 1.15 },  applyTax = _.partialRight(_.reduce, function(result, item) {    return result + item * this.tax;  }, 0, settings);//163.30console.log(applyTax(collection).toFixed(2));

 

■ 对象集合,更改对象某个字段的值,类似泛型

 

//this作为上下文对象有prop和value字段//this的prop键值决定哪个字段需要实施加法//item在这里会传入集合元素function add(item){  var result = _.clone(item);  result[this.prop] += this.value;  return result;}function upper(item){  var result = _.clone(item);  result[this.prop]=result[this.prop].toUpperCase();  return result;}var collection = [  { name: 'Gerard', balance: 100 },  { name: 'Jean', balance: 150 },  { name: 'Suzanne', balance: 200 },  { name: 'Darrell', balance: 250 }];var mapAdd = _.partial(_.map, collection, add),  mapUpper = _.partial(_.map, collection, upper);//[ { name: 'Gerard', balance: 150 },//  { name: 'Jean', balance: 200 },//  { name: 'Suzanne', balance: 250 },//  { name: 'Darrell', balance: 300 } ]console.log(mapAdd({ prop: 'balance', value: 50 }));//[ { name: 'GERARD', balance: 100 },//  { name: 'JEAN', balance: 150 },//  { name: 'SUZANNE', balance: 200 },//  { name: 'DARRELL', balance: 250 } ]console.log(mapUpper({ prop: 'name'}));

 


■ 对象集合,对某个字段求和,类似泛型

 

function sum(a,b){  return a+b[this.prop];}var collection = [  { low: 40, high: 70 },  { low: 43, high: 83 },  { low: 39, high: 79 },  { low: 45, high: 74 }];var reduceSum = _.partial(_.reduce, collection, sum, 0);//167console.log(reduceSum({ prop: 'low' }));

 

■ 对象集合,先为对象元素增加一个字段,再对所有对象求和,求和自定义算法

 

var collection = [  { name: 'Wade', balance: 100 },  { name: 'Donna', balance: 125 },  { name: 'Glenn', balance: 90 },  { name: 'Floyd', balance: 110 }], bonus = 25;//为每个集合元素增加了一个bonus字段var mapped = _.map(collection, function(item) {  return _.extend({    bonus: item.balance + bonus  }, item);});//求和//item是集合中的元素//index是集合中元素的索引//coll是集合//result是累计结果var result = _.reduce(mapped, function(result, item, index, coll) {    result += (item.bonus - item.balance) / item.bonus;    //如果累加到最后一个集合元素    if (index === (coll.length - 1)) {      result = result / coll.length * 100;    }    return result;  }, 0).toFixed(2) + '%';//19.23%console.log(result);

 

参考资料:lodash essentials

 

未完待续~~

 




原标题:lodash用法系列,使用Map/Reduce转换

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

纯电池物流——锂电池的分类:https://www.goluckyvip.com/news/5394.html
助力卖家冲刺,Lazada官方客服双十一在线时间延长!:https://www.goluckyvip.com/news/5395.html
锂电池产品发国外的要求——物流百科:https://www.goluckyvip.com/news/5396.html
VNLIN合联中东电商物流:https://www.goluckyvip.com/news/5397.html
MercadoLibre美客多12月起提高仓储费和提货费:https://www.goluckyvip.com/news/5398.html
TikTok运营真的能赚钱?聊点有关TK运营的深度干货!:https://www.goluckyvip.com/news/5399.html
长治婚庆女司仪和主持人:https://www.vstour.cn/a/366176.html
北京丰台区水上乐园哪家好玩?:https://www.vstour.cn/a/366177.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流