天天看點

js/javascript 操作對象【全】(含常用的操作對象的lodash)

建立對象

通常使用字面量建立 

let obj1 = {username: 'smyhvae', age: 26};      

周遊對象 for in

var obj = {
    name: "smyhvae",
    age: 26,
    gender: "男",
    address: "shenzhen"
};

//枚舉對象中的屬性
for (var n in obj) {
    console.log("屬性名:" + n);
    console.log("屬性值:" + obj[n]); // 注意,因為這裡的屬性名 n 是變量,是以,如果想擷取屬性值,不能寫成 obj.n,而是要寫成 obj[n]
}      

使用lodash

_.forInRight為反向周遊

function Foo() {
  this.a = 1;
  this.b = 2;
}
 
Foo.prototype.c = 3;
 
_.forIn(new Foo, function(value, key) {
  console.log(key);
});
// => Logs 'a', 'b', then 'c' (無法保證周遊的順序)。      

操作屬性 

當屬性名不能使用.運算符時(如123,變量等),隻能使用 [] 操作屬性

判斷是否存在指定屬性

屬性名 in 對象名      

用 in 檢查對象中是否含有某個屬性時,如果對象中沒有但是原型中有,也會傳回true。

使用對象的hasOwnProperty()來檢查對象自身中是否含有該屬性。

使用lodash

  • _.has判斷是否是對象的直接屬性
  • _.hasIn 判斷是否是對象的直接或繼承屬性。
var object = { 'a': { 'b': 2 } };
var other = _.create({ 'a': _.create({ 'b': 2 }) });
 
_.has(object, 'a');
// => true
 
_.has(object, 'a.b');
// => true
 
_.has(object, ['a', 'b']);
// => true
 
_.has(other, 'a');
// => false      

擷取屬性

如果擷取對象中沒有的屬性,不會報錯而是傳回undefined。 

let name = 對象名.屬性名
// 或
 let name = 對象名[屬性名]      

添加屬性

對象名.屬性名 = 屬性值
// 或
對象名[屬性名] = 屬性值      

修改屬性

對象名.屬性名 = 新的屬性值 
// 或
對象名[屬性名] = 新的屬性值      

删除屬性

delete 對象名.屬性名
//或
delete 對象名[屬性名]      

擷取屬性名構成的數組 keys()【需Lodash】

function Foo() {
  this.a = 1;
  this.b = 2;
}
 
Foo.prototype.c = 3;
 
_.keys(new Foo);
// => ['a', 'b'] (iteration order is not guaranteed)
 
_.keys('hi');
// => ['0', '1']      

擷取屬性值構成的數組 values()【需Lodash】

function Foo() {
  this.a = 1;
  this.b = 2;
}
 
Foo.prototype.c = 3;
 
_.values(new Foo);
// => [1, 2] (無法保證周遊的順序)
 
_.values('hi');
// => ['h', 'i']      

批量修改屬性名【需Lodash】

_.mapKeys({ 'a': 1, 'b': 2 }, function(value, key) {
  return key + value;
});
// => { 'a1': 1, 'b2': 2 }      

批量修改屬性值【需Lodash】

var users = {
  'fred':    { 'user': 'fred',    'age': 40 },
  'pebbles': { 'user': 'pebbles', 'age': 1 }
};
 
_.mapValues(users, function(o) { return o.age; });
// => { 'fred': 40, 'pebbles': 1 } (iteration order is not guaranteed)
 
// The `_.property` iteratee shorthand.
_.mapValues(users, 'age');
// => { 'fred': 40, 'pebbles': 1 } (iteration order is not guaranteed)      

擷取滿足條件的屬性名【需Lodash】

_.findLastKey 為反向周遊查找 

var users = {
  'barney':  { 'age': 36, 'active': true },
  'fred':    { 'age': 40, 'active': false },
  'pebbles': { 'age': 1,  'active': true }
};
 
_.findKey(users, function(o) { return o.age < 40; });
// => 'barney' (iteration order is not guaranteed)
 
// The `_.matches` iteratee shorthand.
_.findKey(users, { 'age': 1, 'active': true });
// => 'pebbles'
 
// The `_.matchesProperty` iteratee shorthand.
_.findKey(users, ['active', false]);
// => 'fred'
 
// The `_.property` iteratee shorthand.
_.findKey(users, 'active');
// => 'barney'      

擷取對象屬性的個數【需Lodash】

_.size({ 'a': 1, 'b': 2 });
// => 2      

對象深拷貝

内含 JSON.parse(JSON.stringify(obj)) 的缺陷​

對象合并 assign

Object.assign(目标對象, 源對象1, 源對象2...)

作用: 将多個對象合并為一個新的對象(将源對象的屬性追加到目标對象上,如果對象裡屬性名相同,會被覆寫。)

let obj1 = { name: 'smyhvae', age: 26 };
        let obj2 = { city: 'shenzhen' };
        let obj3 = {};

        Object.assign(obj3, obj1, obj2); // 将obj1和obj2的屬性複制給obj3      

對象過濾【需Lodash】

var object = { 'a': 1, 'b': '2', 'c': 3 };
 
_.pick(object, ['a', 'c']);
// => { 'a': 1, 'c': 3 }      
var object = { 'a': 1, 'b': '2', 'c': 3 };
 
_.omit(object, ['a', 'c']);
// => { 'b': '2' }      

對象倒置 invert【需Lodash】

var object = { 'a': 1, 'b': 2, 'c': 1 };
 
_.invert(object);
// => { '1': 'c', '2': 'b' }