lodash用法系列2: 处理对象

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');  

import * as _ from "lodash";

 目录：

1. 判断参数是否是对象 isPlainObject
2. 对象添加字段，相同字段值重写 assign
3. 对象添加字段，保持原来字段的值 defaults
4. 对象合并 merge
5. 对象：根据值，寻找键 findKey
6. 对象查询 find where
7. 对象查询：根据多个属性值，获取对象其他属性值 result findWhere
8. 遍历对象 forOwn
9. 遍历对象，对象有父对象 forIn
10. 获取对象的所有键 keys
11. 获取对象所有值 values at
12. 获取对象中的某些字段 pick
13. 删除对象中的某些字段 omit
14. 删除对象中的某些键值对 reduce pick
15. 对象的键值对转换成数组元素 pairs
16. 颠倒对象的键和值 invert
17. 拷贝对象 clone
18. 获取一个对象的所有方法名 functions
19. 从两个具有相同键、相同键数量的对象中，取出对应的键、键值合并成一个新的对象，新的对象作为数组元素 map
20. 对象中键值包含值或函数，取出对象的所有键值对方到一个数组中，键值是函数的执行该函数 rsult
21. 根据键取出一个对象中间对应的函数 bindKey
22. 把对象中的函数取出来放到一个数组中，再invoke它们  bindKey invoke

 

1. 判断参数是否是对象 isPlainObject(obj)

function hello(greeting, person){
    if(_.isPlainObject(greeting)){
        person = greeting;
        greeting = 'hi';
    }
    return greeting + person.name;
}

hello('hello',{name:''});
hello({name:''});

2. 对象添加字段，相同字段值重写  assign

var o = {
    name: '',
    age:22
};

_.assign(o, {occupation:''});

3. 对象添加字段，保持原来字段的值 defaults

var o = {
    name: 'a'
};

_.defaults(o, {
    name: 'b'
});

4. 对象合并 merge

var o1 = {
    states: {running: 'off'},
    names: ['a','b']
};

var o2 = {
    states: {off: 'on'},
    names: ['c','d']
};

var result = _.merge(o1, o2, function(dest, src){
    if(_.isArray(dest) && _.isArray(src)){
        return dest.concat(src);
    }
});

//{ states: { running: 'off', off: 'on' },names: [ 'a', 'b', 'c', 'd' ] }
console.log(result);

以上，o1和o2都有相同的字段，使用merge方法后会遍历o1与o2的所有字段，但可喜的是：如果o2和o1的字段相同，并没有进行简单的重写字段值，而是进行了合并。并且，还可以判断o1和o2的字段类型，如果是数组，就把两个数组concat。

5. 对象：根据值，寻找键 findKey

1. findkey方法接受对象

var obj = {
    a: {
        name: 'a',
        age:20
    },
    b: {
        description:''
    }
};

var result = _.findKey(obj, {name: 'a'});

//a
console.log(result);

2. findKey 方法接受匿名函数

var o = {
    name: 'a',
    age: 20
}

var result = _.findKey(o, function(value){
    return value === 'a';
});

//name
console.log(result);


// eg2:
var obj = {
    a: ['x','y'],
    b: ['m','n']
};

var search = 'x';

var result = _.findKey(obj, function(value){
    if(_.isArray(value)){
        return _.contains(value, search);
    } else {
        return value === search;
    }
});

//a
console.log(result);

6. 对象查询 find where

var o = {
    1: {
        first:'',
        enabled:false
    },
    2: {
        first: '',
        enabled:true
    }
};

var result = _.find(o, 'enabled');
var result = _.where(o, {first: ''});

 7. 对象查询：根据多个属性值，获取对象其他属性值 result  findWhere

ar users = [
  { ‘user‘: ‘barney‘, ‘age‘: 36, ‘active‘: true },
  { ‘user‘: ‘fred‘,   ‘age‘: 40, ‘active‘: false }
];

_.result(_.findWhere(users, { ‘age‘: 36, ‘active‘: true }), ‘user‘);  // => ‘barney‘

_.result(_.findWhere(users, { ‘age‘: 40, ‘active‘: false }), ‘user‘);  // => ‘fred‘

8. 遍历对象 forOwn

var o = {
    name: '',
    age:20,
    description:''
};

var result = [];

_.forOwn(o, function(value, key){
    result.push(key + ': ' + value);
});

console.log(result);

可见，forOwn方法与forEach方法的不同之处在于匿名函数的第二个参数是键，不是索引。

9. 遍历对象，对象有父对象  forIn

unction Person(){
    this.full = function(){return this.first + ' ' + this.last;};
}

function Employee(first, last, occupation){
    this.first = first;
    this.last = last;
    this.occupation = occupation;
}

Employee.prototype = new Person();

var employee = new Employee('darren','ji','programmer'),
    resultOwn = [],
    resultIn = [];

_.forOwn(employee, function(value, key){
   resultOwn.push(key);
});

//[ 'first', 'last', 'occupation' ]
console.log(resultOwn);

_.forIn(employee, function(value, key){
   resultIn.push(key);
});

//[ 'first', 'last', 'occupation', 'full' ]
console.log(resultIn);

可见，forIn会遍历包括父对象的字段，forOwn只遍历当前对象的字段。

10. 获取对象的所有字段 keys

var o1 = {
    occupation: '',
    last:'',
    first:''
};
var o1Keys = _.keys(o1);   // 获取所有键

var result1 = _.sortBy(o1Keys);  //所有键排序

//[ 'first', 'last', 'occupation' ]
console.log(result1);

11. 获取对象所有值 values at

1. 直接获取所有值

var o = {};
_.values(o);

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

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);

3. 获取对象的所有key，然后据key或取值  at

var o2 = {
    occupation: 'manager',
    last: 'ji',
    first: 'darren'
};

//[ 'darren', 'ji', 'manager' ]
console.log(_.at(o2, _.sortBy(_.keys(o2))));

12. 获取对象中的某些字段  pick

var o1 = {
    name: 'a',
    occupation:'b'
},

console.log(_.pick(o2, 'spcecialty'));  //{ spcecialty: 'c' }

13. 删除对象中的某些字段 omit

// 去除值为 bool,o, null 的字段
var o = {
    name: 'a',
    age:0,
    occupation:null,
    enabled: true
};

var r = _.omit(o, function(value){
    return !(!_.isBoolean(value) && value);
});

console.log(r);  //{ name: 'a' }

1 4. 删除对象中的某些键值对 reduce pick 

1. reduce

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);

2. pick

var object = {
    first: 'a',
    last: 'b',
    age: 41
},
allowed = ['first','last'];

var result2 = _.pick(object, allowed);
//{ first: 'a', last: 'b' }
console.log(result2);

15. 对象的键值对转换成数组元素 pairs

var o = {
    first: 'darren',
    last: 'ji',
    age:33
};

console.log(_.pairs(o)); //[ [ 'first', 'darren' ], [ 'last', 'ji' ], [ 'age', 33 ] ]

15. 颠倒对象的键和值 invert

var o = {
    first: 'a',
    last: 'b'
}

console.log(_.invert(o));  //{ a: "first", b: "last"}

16. 拷贝对象  clone

var o = {
    first: 'darren',
    last: 'ji'
},
clone = _.clone(o),

console.log(clone.first);  //darren

17. 获取一个对象的所有方法名 functions

function Person(first, last){
    this.first = first;
    this.last = last;
}

Person.prototype.name = function(){
    return this.first + ' ' + this.last;
}

//[ 'name' ]
var result = _.functions(new Person('darren','ji'));

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

var users = {},
    prefereces = {};
_.each(_.range(10), 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);

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

VS1. 通过isFunction来判断键值是否是函数

// 通过isFunction来判断键值是否是函数
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);

VS2. 直接调用result来执行键值函数

// 通过isFunction来判断键值是否是函数
var obj = {
    first: 'a',
    last: 'b',
    name: function () {
        return this.first + ' ' + this.last;
    },
    age: 22,
    retirement: 65,
    working: function () {
        return this.retirement - this.age;
    }
};//[ { 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);

20.  根据键取出一个对象中间对应的函数 bindKey

// bindKey，根据键greet这个键把它对应的函数取出来。
var object = {
    'user': 'fred',
    'greet': function(greeting, punctuation) {
        return greeting + ' ' + this.user + punctuation;
    }
};

var bound = _.bindKey(object, 'greet','hi');  // _.bindKey(对象名称，属性名称，参数, 参数...)

//hi fred!
console.log(bound('!'));

21. 把对象中的函数取出来放到一个数组中，再invoke它们  bindKey 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));

 

参考: https://www.cnblogs.com/darrenji/p/5011370.html