码迷，mamicode.com
首页 > 其他好文 > 详细

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

时间：2015-12-01 22:59:19      阅读：237      评论：0      收藏：0      [点我收藏+]

标签：

 

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

官网：https://lodash.com/
引用：<script src="//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-1
console.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);
//6144
console.log(result1);

var result2 = _.reduce(collection, function(result, item){
    return result+item.storage;
},0);
//12288
console.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);//15

var 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.08
console.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 ji
console.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.30
console.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);

//167
console.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用法系列(4),使用Map/Reduce转换

标签：

原文地址：http://www.cnblogs.com/darrenji/p/5011448.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！