如何在不使用JQUERY的情况下加入两个JavaScript对象

Question

我有两个json对象obj1和obj2,我想合并它们并克里特一个json对象.结果json应该具有来自obj2的所有值和来自obj1的值,这些值在obj2中不存在.

Question:

var obj1 = {
    "name":"manu",
    "age":23,
    "occupation":"SE"
}

var obj2 = {
    "name":"manu",
    "age":23,
    "country":"india"
}

Expected:

var result = {
    "name":"manu",
    "age":23,
    "occupation":"SE",
    "country":"india"
}

Answer 1

有几种不同的解决方案可以实现这一目标:

1 - 原生javascript for-in循环:

const result = {};
let key;

for (key in obj1) {
  if(obj1.hasOwnProperty(key)){
    result[key] = obj1[key];
  }
}

for (key in obj2) {
  if(obj2.hasOwnProperty(key)){
    result[key] = obj2[key];
  }
}

2 -Object.keys():

const result = {};

Object.keys(obj1)
  .forEach(key => result[key] = obj1[key]);

Object.keys(obj2)
  .forEach(key => result[key] = obj2[key]);

3 -Object.assign() :(
浏览器兼容性:Chrome:45,Firefox(Gecko):34,Internet Explorer:不支持,Edge :(是),Opera:32,Safari:9)

const result = Object.assign({}, obj1, obj2);

4 - Spread Operator:
实现这一目标的新可能解决方案是使用Spread Operator,它已经从ECMAScript 2015(第6版,ECMA-262)标准化:

定义在规范的几个部分中:Array Initializer,Argument Lists

使用这种新语法,您可以将不同的对象连接/合并到一个对象中,如下所示:

const result = {
  ...obj1,
  ...obj2,
};

5 - 或的jQuery.extend(target, obj1, obj2)功能jQuery.extend(true, target, obj1, obj2)false:

const target = {};

$.extend(target, obj1, obj2);

6 - lodash的_.assignIn(object, [sources])功能:

const target = {};

$.extend(true, target, obj1, obj2);

lodash的合并功能与_.extend以下几个重要区别:

1-虽然它们都接收任意数量的对象,但是lodash的合并应用这些对象的深度合并但_.merge(object, [sources])只合并第一级.例如:

const result = {};

_.assignIn(result, obj1, obj2);

但:

const result = _.merge(obj1, obj2);

2-另一个区别与如何Object.assign和Object.assign解释Object.assign价值有关:

_.isEqual(_.merge({
  x: {
    y: { key1: 'value1' },
  },
}, {
  x: {
    y: { key2: 'value2' },
  },
}), {
  x: {
    y: {
      key1: 'value1',
      key2: 'value2',
    },
  },
}); // true

但:

const result = Object.assign({
  x: {
    y: { key1: 'value1' },
  },
}, {
  x: {
    y: { key2: 'value2' },
  },
});
_.isEqual(result, {
  x: {
    y: {
      key1: 'value1',
      key2: 'value2',
    },
  },
}); // false
// AND
_.isEqual(result, {
  x: {
    y: {
      key2: 'value2',
    },
  },
}); // true

更新1:

请记住,_.merge在本机JavaScript 中使用循环,需要根据基本JavaScript对象和全局数据类型中可能的原型更改来了解您的环境.例如,如果您使用的是一个js lib,它会向undefined或添加新内容for in.

但是如果你愿意阻止这些可能添加的东西在Array.prototype循环中污染你的对象,你可以这样做:

_.isEqual(_.merge({x: 1}, {x: undefined}), { x: 1 }) // false

更新2:

我已经更新了我的答案,并添加了解决方案编号4,这是一个新的JavaScript功能,但尚未完全标准化.我正在使用Babeljs,它是编写下一代JavaScript的编译器.

更新3:
我添加了Object.prototype和之间的区别object.hasOwnProperty(key).

Answer 2

工作时尚

Jquery最简单的方法 -

var finalObj = $.extend(obj1, obj2);

没有Jquery -

var finalobj={};
for(var _obj in obj1) finalobj[_obj ]=obj1[_obj];
for(var _obj in obj2) finalobj[_obj ]=obj2[_obj];

Answer 3

1)

var merged = {};
for(key in obj1)
    merged[key] = obj1[key];
for(key in obj2)
    merged[key] = obj2[key];

2)

var merged = {};
Object.keys(obj1).forEach(k => merged[k] = obj1[k]);
Object.keys(obj2).forEach(k => merged[k] = obj2[k]);

要么

Object.keys(obj1)
    .concat(Object.keys(obj2))
    .forEach(k => merged[k] = k in obj2 ? obj2[k] : obj1[k]);

3)最简单的方法:

var merged = {};
Object.assign(merged, obj1, obj2);

Answer 4

使用underscore.js的另一个解决方案:

_.extend({}, obj1, obj2);