原生js实现复制对象、扩展对象 类似jquery中的extend()方法

实现复制对象可以使用Object.assign()方法或者扩展运算符(...)；实现扩展对象可以自己实现一个extend()方法。

复制对象

使用Object.assign()方法

Object.assign()方法可以将源对象的属性，复制到目标对象中。

语法

Object.assign(target, ...sources)

参数

• target：目标对象，在这个对象上复制源对象的属性。如果不提供目标对象，则以空对象{}为默认值。
• sources：一个或多个源对象。这些对象的属性将被复制到目标对象中。

示例

// 复制对象
const obj1 = {a: 1, b: 2};
const obj2 = Object.assign({}, obj1);
console.log(obj2); //{a: 1, b: 2}

// 修改目标对象
const obj1 = {a: 1, b: 2};
const obj2 = {b: 3, c: 4};
const obj3 = Object.assign({}, obj1, obj2);
console.log(obj3); //{a: 1, b: 3, c: 4}

使用扩展运算符(...)

扩展运算符(...)可以用来展开数组或对象。在对象中使用时，相当于将一个对象的属性“拍扁”到目标对象中。

示例

// 复制对象
const obj1 = {a: 1, b: 2};
const obj2 = {...obj1};
console.log(obj2); //{a: 1, b: 2}

// 修改目标对象
const obj1 = {a: 1, b: 2};
const obj2 = {b: 3, c: 4};
const obj3 = {...obj1, ...obj2};
console.log(obj3); //{a: 1, b: 3, c: 4}

扩展对象

实现一个extend()方法

自己实现一个extend()方法可以用来扩展一个对象。这个方法接收任意数量的对象作为参数，将它们的属性合并到第一个参数对象中，并返回合并后的对象。

示例

function extend(target, ...sources) {
  sources.forEach(source => {
    Object.keys(source).forEach(key => {
      target[key] = source[key];
    });
  });
  return target;
}

// 扩展对象
const obj1 = {a: 1, b: 2};
const obj2 = {b: 3, c: 4};
const obj3 = extend({}, obj1, obj2);
console.log(obj3); //{a: 1, b: 3, c: 4}

以上就是原生js实现复制对象、扩展对象的完整攻略，使用Object.assign()方法、扩展运算符(...)或者自己实现一个extend()方法都可以实现这个功能。