如何在JavaScript中join两个json对象,而不使用JQUERY
我有两个json对象obj1和obj2,我想合并它们并克里特一个单一的json对象。 得到的json应该包含obj2中的所有值和obj2中不存在的obj1中的值。
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" }
有几个不同的解决scheme来实现这一点:
1 – 原生javascript for-in循环 :
var result = {}; for(var key in obj1) result[key] = obj1[key]; for(var key in obj2) result[key] = obj2[key];
2 – Object.keys()
:
var 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:(Yes),Opera:32,Safari:9)
var result = Object.assign({},obj1, obj2);
4 – 解构作业 :
实现这一目标的新可能的解决scheme是使用解构分配 ,这是部分标准化的:
解构赋值语法是一个JavaScriptexpression式,可以将数组或对象中的数据提取到不同的variables中。
使用这个新的语法,你可以像这样将不同的对象合并/合并成一个对象:
var result = { ...obj1, ...obj2 };
5 – extend
jQuery
或lodash
function :
var result={}; // using jQuery extend $.extend(result, obj1, obj2); // using lodash _.extend(result, obj1, obj2);
6 – lodash的merge
function :
var result=_.merge(obj1, obj2);
更新1:
请记住,在原生JavaScript中使用for in
循环,需要根据基本JavaScript对象和全局数据types中可能的原型更改来了解自己的环境。 例如,如果你正在使用一个js库添加新的东西到Array.prototype
或Object.prototype
。
但是如果你愿意防止这些可能的添加东西污染你的对象for in
循环中,你可以这样做:
for(var key in obj1){ if(obj1.hasOwnProperty(key)){ result[key]=obj1[key]; } }
更新2:
我已经更新了我的答案,并添加了解决scheme编号4,这是一个新的JavaScriptfunction,但尚未完全标准化。 我正在和Babeljs一起使用它,它是编写下一代JavaScript的编译器。
工作的快乐
最简单的方法与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];
另一个使用underscore.js的解决scheme是:
_.extend({}, obj1, obj2);
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);
我已经使用这个函数合并了过去的对象,我使用它来添加或更新obj1
上的现有属性与来自obj2
值:
var _mergeRecursive = function(obj1, obj2) { //iterate over all the properties in the object which is being consumed for (var p in obj2) { // Property in destination object set; update its value. if ( obj2.hasOwnProperty(p) && typeof obj1[p] !== "undefined" ) { _mergeRecursive(obj1[p], obj2[p]); } else { //We don't have that level in the heirarchy so add it obj1[p] = obj2[p]; } } }
它将处理多层次的层次以及单层次的对象。 我将其用作操作JSON对象的实用程序库的一部分。 你可以在这里find它。
这个简单的函数recursion合并JSON对象,请注意,这个函数将所有的JSON合并到第一个参数( target
)中,如果你需要新的对象修改这个代码的话。
var mergeJSON = function (target, add) { function isObject(obj) { if (typeof obj == "object") { for (var key in obj) { if (obj.hasOwnProperty(key)) { return true; // search for first object prop } } } return false; } for (var key in add) { if (add.hasOwnProperty(key)) { if (target[key] && isObject(target[key]) && isObject(add[key])) { this.mergeJSON(target[key], add[key]); } else { target[key] = add[key]; } } } return target; };
顺便说一句,而不是isObject()
函数可能会使用像这样的条件:
JSON.stringify(add[key])[0] == "{"
但这不是一个好的解决scheme,因为如果我们有大型的JSON对象,将会花费大量的资源。