es6的一些操作对象的方法

assgin() 方法

/**
 * es6 中操作对象的常用方法
 *
 * Object.assign()
 * 
 * 用于对象的合并，如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。
 * 
 */

const obj = { a: 1 };

let citys = { name: "杭州" };

let container = { des: '你好,heelo' }


let last_obj = Object.assign(obj,citys,container)

console.log(last_obj);    // {a: 1, name: "杭州", des: "你好,heelo"}

let other = Object.assign({},obj,citys,container)

console.log(other);

/**
 * 注意点： Object.assign 方法实行的是浅拷贝
 */
var obj1 = {a: {b: 1}};
var obj2 = Object.assign({}, obj1);

obj1.a.b = 2;
obj2.a.b // 2


/**
 * 常见用途：
（1）为对象添加属性
 */
class Point {
  constructor(x, y) {
    Object.assign(this, {x, y});
  }
}

// （2）为对象添加方法

Object.assign(SomeClass.prototype, {
  someMethod(arg1, arg2) {
    ···
  },
  anotherMethod() {
    ···
  }
});

// 等同于下面的写法
SomeClass.prototype.someMethod = function (arg1, arg2) {
  ···
};
SomeClass.prototype.anotherMethod = function () {
  ···
};
 

// （3）克隆对象

function clone(origin) {
  return Object.assign({}, origin);
}
// 不过，采用这种方法克隆，只能克隆原始对象自身的值，不能克隆它继承的值。

// 想要保持继承链，可以采用下面的代码。

function clone(origin) {
  let originProto = Object.getPrototypeOf(origin);
  return Object.assign(Object.create(originProto), origin);
}
 

// （4）合并多个对象

const merge =
  (target, ...sources) => Object.assign(target, ...sources);
const merge =
  (...sources) => Object.assign({}, ...sources);
 

// （5）为属性指定默认值

const DEFAULTS = {
  logLevel: 0,
  outputFormat: 'html'
};

function processContent(options) {
  options = Object.assign({}, DEFAULTS, options);
  console.log(options);
  // ...
}
// 由于存在深拷贝的问题，DEFAULTS对象和options对象的所有属性的值，最好都是简单类型，不要指向另一个对象。

属性的遍历
ES6一共有5种方法可以遍历对象的属性。

（1）for…in

for…in循环遍历对象自身的和继承的可枚举属性（不含Symbol属性）。

（2）Object.keys(obj)

Object.keys返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含Symbol属性）。

（3）Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames返回一个数组，包含对象自身的所有属性（不含Symbol属性，但是包括不可枚举属性）。

（4）Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols返回一个数组，包含对象自身的所有Symbol属性。

（5）Reflect.ownKeys(obj)

Reflect.ownKeys返回一个数组，包含对象自身的所有属性，不管是属性名是Symbol或字符串，也不管是否可枚举。

（对象自身属性遍历）：

for (var i in data) {
  if (data.hasOwnProperty(i) === true) {
    console.log(data[i])
  }
}

Object.keys()，Object.values()，Object.entries()

// ES5 引入了Object.keys方法，返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键名。

var obj = { foo: 'bar', baz: 42 };
Object.keys(obj)

// ["foo", "baz"]
// ES2017 引入了跟Object.keys配套的Object.values和Object.entries，作为遍历一个对象的补充手段，供for...of循环使用。

var obj = { foo: 'bar', baz: 42 };
Object.values(obj)

es6的一些操作对象的方法

猜你喜欢