如何在另一个对象中复制对象属性？

Question

鉴于对象:

var firstObject = {
    key1 : 'value1',
    key2 : 'value2'
};

如何将属性复制到另一个对象(secondObject)中,如下所示:

var secondObject = {
    key1 : 'value1',
    key2 : 'value2',
    key3 : 'value3',
    key4 : 'value4'
};

使用参考firstObject？像这样的东西:

var secondObject = {
    firstObject,
    key3 : 'value3',
    key4 : 'value4'
};

(这不起作用......我只是为了显示我想要构建代码的大行.)

没有使用任何JavaScript框架,是否可以实现解决方案？

Answer 1

for(var k in firstObject) secondObject[k]=firstObject[k];

Answer 2

从@Bardzuśny的答案中得到启示,ES6提供了一个原生解决方案:Object.assign()功能!

用法很简单:

Object.assign(secondObject, firstObject);

而已!

现在的支持显然很差; 只有Firefox(34+)支持它开箱即用,而Chrome(45+)和Opera(32+)需要设置'实验标志'.

支持正在改进,最新版本的Chrome,Firefox,Opera,Safari和Edge支持它(IE显然没有支持.)也可以使用像Babel和Traceur这样的运营商.有关详细信息,请参见此处

Answer 3

循环遍历第一个对象的属性并将它们分配给第二个对象,如下所示:

var firstObject = {
    key1 : 'value1',
    key2 : 'value2'
};

var secondObject = {
    key3 : 'value3',
    key4 : 'value4'
};

for (var prop in firstObject) {
    if (firstObject.hasOwnProperty(prop)) {
        secondObject[prop] = firstObject[prop];
    }
}

本for- in环是不够的; 你需要hasOwnProperty.有关原因的详细说明,请参见http://bonsaiden.github.com/JavaScript-Garden/#object.forinloop.

Answer 4

每ES6 - 传播语法:

你可以简单地使用:

const thirdObject = {
   ...firstObject,
   ...secondObject   
}

这避免了通过引用传递这些对象的问题

Answer 5

在这里扮演死灵法师,因为ES5带来了我们Object.keys(),有可能使我们免于所有这些.hasOwnProperty()检查.

Object.keys(firstObject).forEach(function(key) {
  secondObject[key] = firstObject[key];
});

或者,将其包装成一个函数(lodash的有限"副本" _.assign()):

function assign(object, source) {
  Object.keys(source).forEach(function(key) {
    object[key] = source[key];
  });
}

assign(secondObject, firstObject); // assign firstObject properties to secondObject

Object.keys()是一种相对较新的方法,最值得注意的是:在IE <9中不可用.对于.forEach()数组方法实际上也是如此,我用它来代替常规for循环.

幸运的是,这些古老的浏览器可以使用es5-shim,这将填充许多ES5功能(包括那两个).

(我全都是使用polyfill而不是使用酷炫的新语言功能.)

Answer 6

Necro'ing所以人们可以使用hasOwnProperty和实际对象检查找到深度复制方法:

var extend = function (original, context, key) {
  for (key in context)
    if (context.hasOwnProperty(key))
      if (Object.prototype.toString.call(context[key]) === '[object Object]')
        original[key] = extend(original[key] || {}, context[key]);
      else
        original[key] = context[key];
  return original;
};

Answer 7

可以使用Object.assign组合对象.它将从右到左组合并覆盖公共属性,即左侧的相同属性将被右侧覆盖.

并且在第一个中提供空对象以避免改变源对象是很重要的.源对象应该保持干净,Object.assign()因为它本身会返回一个新对象.

希望这可以帮助!

var firstObject = {
    key1 : 'value1',
    key2 : 'value2'
};

var secondObject = {
    key3 : 'value3',
    key4 : 'value4'
};

var finalObject = Object.assign({}, firstObject, secondObject)

console.log(finalObject)

Answer 8

kingPuppy想法和 OP 想法的改进（浅拷贝） - 我只在 OP“示例”中添加了 3 个点:)

var secondObject = {
    ...firstObject,
    key3 : 'value3',
    key4 : 'value4'
};

var secondObject = {
    ...firstObject,
    key3 : 'value3',
    key4 : 'value4'
};

Answer 9

这应该可行，在这里测试过。

var secondObject = {
    firstObject: JSON.parse(JSON.stringify(firstObject)),
    key3 : 'value3',
    key4 : 'value4'
};

注意：这不会复制firstObject
注释 2的方法：为了在旧版浏览器中使用，您需要一个json 解析器。
注意 3：通过引用分配是一个可行的选项，特别是在firstObject包含方法的情况下。相应地调整了给定的 jsfiddle 示例

Answer 10

使用属性扩展符号。它是在 ES2018 中添加的（数组/迭代的扩展更早，ES2015），{...firstObject} 将所有可枚举属性作为离散属性扩展。

let secondObject = {
      ...firstObject,
      key3 : 'value3',
      key4 : 'value4'
    }