如何连接多个 JavaScript 对象的属性

function Collect(a, b, c) {
for (property in b)
a[property] = b[property];


for (property in c)
a[property] = c[property];


return a;
}

注意: 以前对象中的现有属性将被覆盖。

这个应该可以:

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


let a = { "one" : 1, "two" : 2 };
let b = { "three" : 3 };
let c = { "four" : 4, "five" : 5 };


let d = collect(a, b, c);
console.log(d);

产出:

{
"one": 1,
"two": 2,
"three": 3,
"four": 4,
"five": 5
}

您可以这样使用 jquery 的 $.extend:

let a = { "one" : 1, "two" : 2 },
b = { "three" : 3 },
c = { "four" : 4, "five" : 5 };


let d = $.extend({}, a, b, c)


console.log(d)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

为什么函数应该限制为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;
}

强调 几乎没有这样做的方法;

1. 扩展(目的地，* 源)

将 来源对象中的所有属性复制到 目的地对象，并返回 目的地对象。

_.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(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 }

ECMAscript 6引入了 Object.assign()，以便在 Javascript 中实现这一点。

Object.sign ()方法用于将所有可枚举自身属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

Object.sign ()上的 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，但并非所有浏览器都支持 Object.assign。使用像 巴别塔和 Traceur这样的传输器生成向后兼容的 ES5JavaScript。

也许，最快、最有效和更通用的方法是这样的(你可以合并任意数量的对象，甚至可以复制到第一个对象-> 赋值) :

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);

Merge _ 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);

在这种情况下，merge _ object 包含 object1、 object2、 object3的属性，但是 object1没有被修改。

检查这里: https://jsfiddle.net/ppwovxey/1/

注意: JavaScript 对象是通过引用传递的。

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}

最简单的: 扩展运算符

var obj1 = {a: 1}
var obj2 = {b: 2}
var concat = { ...obj1, ...obj2 } // { a: 1, b: 2 }

ES6 + +

问题是将各种 与众不同对象添加到一个对象中。

let obj = {};
const obj1 = { foo: 'bar' };
const obj2 = { bar: 'foo' };
Object.assign(obj, obj1, obj2);
//output => {foo: 'bar', bar: 'foo'};

假设您有一个具有多个键的对象，这些键是对象:

let obj = {
foo: { bar: 'foo' },
bar: { foo: 'bar' }
}

这是我找到的解决方案(仍然必须面对:/)

let objAll = {};


Object.values(obj).forEach(o => {
objAll = {...objAll, ...o};
});

通过这样做，我们可以动态地将所有对象键添加到一个。

// Output => { bar: 'foo', foo: 'bar' }

现在可以使用比 Object.sign ()更短的语法进行浅克隆(不包括原型)或对象合并。

在 ECMAScript 2018中引入了 对象文字的扩展语法 :

const a = { "one": 1, "two": 2 };
const b = { "three": 3 };
const c = { "four": 4, "five": 5 };


const result = {...a, ...b, ...c};
// Object { "one": 1, "two": 2 , "three": 3, "four": 4, "five": 5 }

在 许多现代浏览器中支持扩展(...)操作符 ，但不是所有操作符都支持。

因此，建议使用类似 巴别塔的 翻译器将 ECMAScript 2015 + 代码转换为当前和更老的浏览器或环境中向后兼容的 JavaScript 版本。

这就是你的代码 巴别塔会产生:

"use strict";


var _extends = Object.assign || function(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};


var a = { "one": 1, "two": 2 };
var b = { "three": 3 };
var c = { "four": 4, "five": 5 };


var result = _extends({}, a, b, c);
// Object { "one": 1, "two": 2 , "three": 3, "four": 4, "five": 5 }

很容易在浏览器控制台中对对象使用 ES7传播操作员

({ name: "Alex", ...(true  ? { age: 19 } : { })}) // {name: "Alex", age: 19}
({ name: "Alex", ...(false ? { age: 19 } : { })}) // {name: "Alex",        }

要合并动态数量的对象，我们可以使用 Object.assign和 传播语法。

const mergeObjs = (...objs) => Object.assign({}, ...objs);

上面的函数接受任意数量的对象，将它们的所有属性合并到一个新对象中，并使用后续对象的属性覆盖前面对象的属性。

演示:

const mergeObjs = (...objs) => Object.assign({}, ...objs);
const a = {prop: 1, prop2: '2'},
b = {prop3: 3, prop4: [1,2,3,4]}
c = {prop5: 5},
d = {prop6: true, prop7: -1},
e = {prop1: 2};
const abcd = mergeObjs(a,b,c,d);
console.log("Merged a,b,c,d:", abcd);
const abd = mergeObjs(a,b,d);
console.log("Merged a,b,d:", abd);
const ae = mergeObjs(a,e);//prop1 from e will overwrite prop1 from a
console.log("Merged a,e:", ae);

若要合并对象数组，可以应用类似的方法。

const mergeArrayOfObjs = arr => Object.assign({}, ...arr);

演示:

const mergeArrayOfObjs = arr => Object.assign({}, ...arr);
const arr = [
{a: 1, b: 2},
{c:1, d:3},
{abcd: [1,2,3,4], d: 4}
];
const merged = mergeArrayOfObjs(arr);
console.log(merged);