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

 

本系列包括：

 

● lodash用法系列(1),數組集合操做
● lodash用法系列(2),處理對象 
● lodash用法系列(3),使用函數 
● lodash用法系列(4),使用Map/Reduce轉換  
● lodash用法系列(5),鏈式 
● lodash用法系列(6),函數種種 

 

■ 類型隱式轉換

true == 1;//右邊的1會根據左邊的true進行隱式轉換
true === 1; //不會隱式轉換

 

■ 判斷參數是不是對象

 

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

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

 

■ 判斷計算結果

在Javascript中：

 

1/0；//Infinity
1+ '';//NaN

lodash中提供了isFinite, isNumber, isNaN方法。

 

var operand1 = 2/0
    operand2 = NaN,
    results = [];
    
_.forEach([operand1, operand2], function(op){
    if(_.isFinite(op)){
        results.push('結果無窮盡');
    } else {
        if(!_.isNumber(op) || _.isNaN(op)){
            results.push('結果不是數字');
        } else {
            results.push('結果不正確');
        }
    }
}); 

console.log(results);

 

■ 判斷對象是不是函數

 

var _ = require('lodash');

var o = {
    a: function(){return 'hi'},
    b: []
};

//hi
console.log(_.isFunction(o.a) && o.a());

//false
console.log(_.isFunction(o.b) && o.b());

 

■ 給對象添加字段，相同字段值重寫

 

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

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

 

若是新添加的字段已經存在，會把該字段的值重寫掉。

■ 給對象添加字段，合併字段值

若是新添加對象的字段存在，是否能夠不把該字段的值重寫掉呢？
--lodash提供了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。

■ 給對象添加字段，保持原來字段的值

 

var o = {
    name: 'a'
};

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

 

■ 根據對象的值尋找鍵,findKey方法接受匿名函數

 

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

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

//name
console.log(result);

 

又好比。

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

 

■ 根據對象的值尋找鍵，findkey方法接受對象

 

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

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

//a
console.log(result);

 

■ 查詢對象

 

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

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

 

■ 遍歷對象的字段

 

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

var result = [];

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

console.log(result);

 

可見，forOwn方法與forEach方法的不一樣之處在於匿名函數的第二個參數是鍵，不是索引。

■ 遍歷對象的字段，對象有父對象

 

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只遍歷當前對象的字段。

■ 獲取對象的全部字段

 

var o1 = {
    occupation: '',
    last:'',
    first:''
};

var result1 = _.sortBy(_.keys(o1));

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

 

■ 獲取對象的全部字段，而後據此獲取字段值

 

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

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

 

■ 獲取對象的全部字段值

 

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

 

■ 當不肯定對象某個字段是不是函數或其它時使用result方法

 

var o1 = {name: 'a'},
    o2 = {name: function(){return 'b';}},
    o3 = {};

console.log(_.result(o1,'name','darren'));//a
console.log(_.result(o2, 'name','darren'));//b
console.log(_.result(o3, 'name', 'darren'));//darren

 

■ 獲取一個對象的全部方法名

 

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'));
console.log(result);

 

■ 把對象的鍵值對轉換成數組元素

 

function format(label, value){
    return label + ': ' + value;
}

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

var pairsResult = _.pairs(o);

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

_.forEach(pairsResult, function(item){
    result += format.apply(null, item) + '\n';
});

//first: darren
//last: ji
//age: 33
console.log(result);

 

■ 選擇對象中的某些字段

 

var o1 = {
    name: 'a',
    occupation:'b'
},
o2 = {
    spcecialty: 'c',
    employer: 'd'
};

//pick對象的字段
var o2pick = _.pick(o2, 'spcecialty');
//{ spcecialty: 'c' }
console.log(o2pick);

var result = _.assign(o1, o2pick);
//{ name: 'a', occupation: 'b', spcecialty: 'c' }
console.log(result);

■ 去除對象中的某些字段

 

_.omit(o2, 'employer');

 

去除字段值爲bool,o, null的字段。

 

var o = {
    name: 'a',
    age:0,
    occupation:null,
    enabled: true
};

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

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

 

■ 顛倒對象的鍵和值

 

unction sortValues(object){
    return _.values(object).sort();
}

var o1 = {
    first: 'a',
    last: 'b'
},
o2 = {
    first: 'c',
    last: 'd'
};

//[ 'a', 'b' ]
console.log(sortValues(o1));

[ 'first', 'last' ]
console.log(sortValues(_.invert(o2)));

 

■ 建立對象

 

unction Person() {
}

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

var arr = [
    {first: 'aa', last: 'bb'},
    {first: 'cc', last: 'dd'},
    {first: 'ee', last: 'ff'},
],
    people = [];

_.forEach(arr, function(item){
   people.push(_.create(Person.prototype, item));
});

//[ 'aa bb', 'cc dd', 'ee ff' ]
console.log(_.invoke(people, 'name'));

 

以上，能夠吧Person看做是一個接口或抽象類，經過prototype屬性動態添加name方法。經過create方法動態把實例和Person.prototype綁定上。最後，經過invoke方法觸發數組內Person元素的name方法。

■ 拷貝對象

 

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

var o1 = {
    first: 'darren',
    last: 'ji'
},
o2 = new Person('jack','chen'),
clone1 = _.clone(o1),
clone2 = _.clone(o2);

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

//jack
console.log(clone2.first);

 

參考資料：lodash in essential

 

未完待續~~