admin管理员组

文章数量:1133740

I'm sick & tired of always having to write code like this:

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

Or if I don't want to write the code myself, implement a library that does it already. Surely ES6+ is coming to the rescue on this will provide us with something like a Object.prototype.extend(obj2...) or Object.extend(obj1,obj2...)

So does ES6+ provide such functionality? If not already there, then is such functionality planned? If not planned, then why not?

I'm sick & tired of always having to write code like this:

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

Or if I don't want to write the code myself, implement a library that does it already. Surely ES6+ is coming to the rescue on this will provide us with something like a Object.prototype.extend(obj2...) or Object.extend(obj1,obj2...)

So does ES6+ provide such functionality? If not already there, then is such functionality planned? If not planned, then why not?

• javascript
• ecmascript-6

Share Improve this question Follow edited Oct 7, 2020 at 10:56 Junaid 4,92611 gold badge3636 silver badges4545 bronze badges asked Dec 13, 2012 at 4:16 baluptonbalupton 48.6k3232 gold badges134134 silver badges183183 bronze badges 4

• 3 So why haven't you added it to your library? – RobG Commented Dec 13, 2012 at 5:10
• 13 @RobG this question is about the hope that ES6 will remove us from having to need such boilerplate crap in the first place.For what it's worth: github.com/balupton/bal-util/blob/… – balupton Commented Dec 13, 2012 at 19:59
• I don't think there is a general way to copy the name/value pairs from one object to another. Do you only deal with own properties or those on the [[Prototype]] chain? Do you do "deep" or "shallow" copies? What about non–enumerable and non–writable properties? I think I'd rather have a small library function that does what I need, and mostly it's avoidable anyway. – RobG Commented Dec 13, 2012 at 23:23
• See also How can I merge properties of two JavaScript objects dynamically? for non-ES6 solutions – Bergi Commented Nov 28, 2021 at 1:17

Add a comment  | 

6 Answers 6

Sorted by: Reset to default 221

You will be able to do a shallow merge/extend/assign in ES6 by using Object.assign:

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

Syntax:

Object.assign(target, sources);

where ...sources represents the source object(s).

Example:

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

Object.assign(obj1, obj2);

console.log(obj1.name === 'Casey' && obj1.age === 30);
// true

You can use the object spread syntax for this:

const merged = {...obj1, ...obj2}

For arrays the spread operator was already part of ES6 (ES2015), but for objects it was added to the language spec at ES9 (ES2018). Its proposal as been enabled by default in tools like Babel long before that.

I know this is a bit of an old issue but the easiest solution in ES2015/ES6 is actually quite simple, using Object.assign(),

Hopefully this helps, this does DEEP merging as well:

/**
 * 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;
}

Example usage:

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] } } }

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}

ES7 or Babel

{...o1,...o2} // inheritance
 var copy= {...o1};

The addition of Object.mixin is currently being discussed to take care of the behavior you are asking for. https://mail.mozilla.org/pipermail/es-discuss/2012-December/027037.html

Although it is not in the ES6 draft yet, it seems like there is a lot of support for it, so I think it will show up in the drafts soon.

Perhaps the ES5 Object.defineProperties method will do the job?

e.g.

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

Object.defineProperties(a, b);

alert(a.age); // 37

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

本文标签： ecmascript 6How do I merge two javascript objects together in ES6Stack Overflow