当然ES6 +必须有一种方法将两个javascript对象合并在一起,它是什么?

bal*_*ton 134 javascript ecmascript-6

我厌倦了总是不得不写这样的代码:

function shallowExtend(obj1,obj2){
  var key;
  for ( key in obj2 ) {
    if ( obj2.hasOwnProperty(key) === false )  continue;
    obj1[key] = obj2[key]
  }
}
Run Code Online (Sandbox Code Playgroud)

或者,如果我不想自己编写代码,请实现一个已经完成的代码库.当然ES6 +即将救援上,这将提供给我们的东西,如一个Object.prototype.extend(obj2...)Object.extend(obj1,obj2...)

那么ES6 +提供这样的功能呢?如果还没有,那么这样的功能是否有计划?如果没有计划,为什么不呢?

Jac*_*ack 199

您可以使用Object.assign在ES6中进行浅合并/扩展/分配:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

句法:

Object.assign(target,... sources);

其中... sources表示源对象.

注意:不要将语法定义中的...源与ES6扩展运算符混淆.

例:

var obj1 = {name: 'Daisy', age: 30};
var obj2 = {name: 'Casey'};

Object.assign(obj1, obj2);

console.log(obj1.name === 'Casey' && obj1.age === 30);
// true
Run Code Online (Sandbox Code Playgroud)

  • 一个小注释:Object.assign会改变目标.如果那不是你想要的,你可以用一个空对象来调用它:`let merged = Object.assign({},source1,source2);` (61认同)
  • 请注意这是一个浅扩展...嵌套对象不合并 (19认同)

Thi*_*man 149

您可以使用对象休息/传播:

const merged = {...obj1, ...obj2}
Run Code Online (Sandbox Code Playgroud)

ECMAScript 提案目前处于第3阶段,并通过使用阶段3预设在Babel中启用.

  • 这不是解构,它正在传播 - 不,对于对象它不是ES6的一部分.你应该在你的babel中禁用实验性的ES7草稿. (9认同)
  • 那不是ES6. (4认同)
  • 注意:当“obj1”和“obj2”中存在相同的属性时,最右边(后一个)对象的值优先(“obj2”) (4认同)
  • 现在还没有正式名称为ES2015:P从何时解构不是ES6的一部分?https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment运行babel-node:```const ob1 = {foo:123}; const ob2 = {bar:234}; const merged = {... ob1,... ob2}; console.log(merged)```输出:```{foo:123,bar:234}``` (3认同)
  • 啊,原谅我 你是对的。目前,这是通天塔第二阶段的功能。https://github.com/sebmarkbage/ecmascript-rest-spread我从未意识到,因为我从babel开始就一直在使用它,并且默认情况下已启用它。但是由于您仍然需要进行转换,并且对象传播是一件非常简单的事情,因此我还是建议您这样做。我喜欢它。 (2认同)
  • "默认情况下启用阶段2或以上的提案".https://babeljs.io/docs/usage/experimental/ (2认同)

Sal*_*kar 12

我知道这是一个老问题,但ES2015/ES6中最简单的解决方案实际上非常简单,使用Object.assign(),

希望这有帮助,这也是DEEP合并:

/**
 * Simple is object check.
 * @param item
 * @returns {boolean}
 */
export function isObject(item) {
  return (item && typeof item === 'object' && !Array.isArray(item) && item !== null);
}

/**
 * Deep merge two objects.
 * @param target
 * @param source
 */
export function mergeDeep(target, source) {
  if (isObject(target) && isObject(source)) {
    for (const key in source) {
      if (isObject(source[key])) {
        if (!target[key]) Object.assign(target, { [key]: {} });
        mergeDeep(target[key], source[key]);
      } else {
        Object.assign(target, { [key]: source[key] });
      }
    }
  }
  return target;
}
Run Code Online (Sandbox Code Playgroud)

用法示例:

mergeDeep(this, { a: { b: { c: 123 } } });
// or
const merged = mergeDeep({a: 1}, { b : { c: { d: { e: 12345}}}});  
console.dir(merged); // { a: 1, b: { c: { d: [Object] } } }
Run Code Online (Sandbox Code Playgroud)


Nat*_*all 7

Object.mixin目前正在讨论照顾你所要求的行为.https://mail.mozilla.org/pipermail/es-discuss/2012-December/027037.html

虽然它还没有进入ES6草案,但似乎有很多支持,所以我认为它很快就会出现在草稿中.

  • [`.mixin`已被删除](https://github.com/rwaldron/tc39-notes/blob/master/es6/2013-11/nov-20.md#consensusresolution-2)由TC39提供. (13认同)
  • **警告** - 这个答案不再正确,请参阅杰克的答案,以获得正确和有效的方法. (5认同)

Abd*_*UMI 6

ES6

Object.assign(o1,o2) ; 
Object.assign({},o1,o2) ; //safe inheritance
var copy=Object.assign({},o1); // clone o1
//------Transform array of objects to one object---
var subjects_assess=[{maths:92},{phy:75},{sport:99}];
Object.assign(...subjects_assess); // {maths:92,phy:75,sport:99}
Run Code Online (Sandbox Code Playgroud)

ES7或Babel

{...o1,...o2} // inheritance
 var copy= {...o1};
Run Code Online (Sandbox Code Playgroud)


Rob*_*obG 5

也许ES5 Object.defineProperties方法可以完成这项工作吗?

例如

var a = {name:'fred'};
var b = {age: {value: 37, writeable: true}};

Object.defineProperties(a, b);

alert(a.age); // 37
Run Code Online (Sandbox Code Playgroud)

MDN文档:https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperties

  • 好的建议,虽然不是真正的延伸,因为它更多的是定义属性应该如何表现...做一个简单的Object.defineProperties(obj1,obj2)会导致意想不到的结果. (2认同)