如何连接来自多个JavaScript对象的属性
我正在寻找“添加”多个JavaScript对象(关联数组)的最佳方式。
例如,给出:
a = { "one" : 1, "two" : 2 }; b = { "three" : 3 }; c = { "four" : 4, "five" : 5 };
什么是最好的计算方法:
{ "one" : 1, "two" : 2, "three" : 3, "four" : 4, "five" : 5 }
ECMAscript 6引入了Object.assign()
来在Javascript中实现这个本地化。
Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。 它会返回目标对象。
Object.assign()的MDN文档
var o1 = { a: 1 }; var o2 = { b: 2 }; var o3 = { c: 3 }; var obj = Object.assign({}, o1, o2, o3); console.log(obj); // { a: 1, b: 2, c: 3 }
许多现代浏览器都支持Object.assign
,但还不是全部。 使用像Babel和Traceur这样的转译器来生成向后兼容的ES5 JavaScript。
jQuery有这样做的好方法。
这应该做到这一点:
function collect() { var ret = {}; var len = arguments.length; for (var i=0; i<len; i++) { for (p in arguments[i]) { if (arguments[i].hasOwnProperty(p)) { ret[p] = arguments[i][p]; } } } return ret; }
input:
a = { "one" : 1, "two" : 2 }; b = { "three" : 3 }; c = { "four" : 4, "five" : 5 }; d = collect(a, b, c); console.log(d);
输出:
Object one=1 two=2 three=3 four=4 five=5
下划线的方法很less,
1. _.extend(目的地,*来源)
将源对象中的所有属性复制到目标对象,然后返回目标对象。
_.extend(a, _.extend(b, c)); => {"one" : 1, "two" : 2, "three" : 3, "four" : 4, "five" : 5 }
要么
_.extend(a, b); => {"one" : 1, "two" : 2, "three" : 3} _.extend(a, c); => {"one" : 1, "two" : 2, "three" : 3, "four" : 4, "five" : 5 }
2. _.defaults(object,* defaults)
使用默认对象中的值填充对象中未定义的属性,并返回对象 。
_.defaults(a, _.defaults(b, c)); => {"one" : 1, "two" : 2, "three" : 3, "four" : 4, "five" : 5 }
要么
_.defaults(a, b); => {"one" : 1, "two" : 2, "three" : 3} _.defaults(a, c); => {"one" : 1, "two" : 2, "three" : 3, "four" : 4, "five" : 5 }
function Collect(a, b, c) { for (property in b) a[property] = b[property]; for (property in c) a[property] = c[property]; return a; }
注意:以前对象中的现有属性将被覆盖。
为什么这个函数应该被限制在3个参数? 另外,检查hasOwnProperty
。
function Collect() { var o={}; for(var i=0;i<arguments.length;i++) { var arg=arguments[i]; if(typeof arg != "object") continue; for(var p in arg) { if(arg.hasOwnProperty(p)) o[p] = arg[p]; } } return o; }
ECMAScript 6已经传播运营商 。 现在你可以做到这一点:
const obj1 = {1: 11, 2: 22} const obj2 = {3: 33, 4: 44} const obj3 = {...obj1, ...obj2} console.log(obj3) // {1: 11, 2: 22, 3: 33, 4: 44}
function collect(a, b, c){ var d = {}; for(p in a){ d[p] = a[p]; } for(p in b){ d[p] = b[p]; } for(p in c){ d[p] = c[p]; } return d; }
也许最快,最有效,最通用的方式是(你可以合并任意数量的对象,甚至复制到第一个 – > assign):
function object_merge(){ for (var i=1; i<arguments.length; i++) for (var a in arguments[i]) arguments[0][a] = arguments[i][a]; return arguments[0]; }
它也允许你修改第一个对象,因为它通过引用传递。 如果你不想要这个,但想要一个全新的对象包含所有的属性,那么你可以通过{}作为第一个参数。
var object1={a:1,b:2}; var object2={c:3,d:4}; var object3={d:5,e:6}; var combined_object=object_merge(object1,object2,object3);
combined_object和object1都包含object1,object2,object3的属性。
var object1={a:1,b:2}; var object2={c:3,d:4}; var object3={d:5,e:6}; var combined_object=object_merge({},object1,object2,object3);
在这种情况下,combined_object包含object1,object2,object3的属性,但object1不会被修改。
在这里检查: https : //jsfiddle.net/ppwovxey/1/
注意:JavaScript对象是通过引用传递的。
我也写了这个对象合并可重用组件,它也依赖于Object.assign
来合并多个对象而不用改变它们,并且可以重复使用而不需要重复
例:
const o1 = { a: 1 }; const o2 = { b: 2 }; const o3 = { c: 3 }; const obj = merge(o1, o2, o3); console.log(obj); // { a: 1, b: 2, c: 3 } console.log(o1); // { a: 1 } does not mutate objects
(还增加了testing)。