如何在另一个对象中复制对象属性
How to duplicate object properties in another object?
给定对象:
var firstObject = {
key1 : 'value1',
key2 : 'value2'
};
如何复制另一个对象(secondObject
(中的属性,如下所示:
var secondObject = {
key1 : 'value1',
key2 : 'value2',
key3 : 'value3',
key4 : 'value4'
};
使用对firstObject
的引用?像这样:
var secondObject = {
firstObject,
key3 : 'value3',
key4 : 'value4'
};
(这行不通...我把它放在大行中,以大行显示我想如何构建代码(。
在不使用任何JavaScript框架的情况下,解决方案是否可行?
for(var k in firstObject) secondObject[k]=firstObject[k];
从@Bardzuśny的回答中得到启发,ES6 提供了一个原生解决方案:Object.assign()
函数!
用法很简单:
Object.assign(secondObject, firstObject);
就是这样!
现在的支持显然很差;只有Firefox(34+(支持开箱即用,而Chrome(45+(和Opera(32+(需要设置"实验标志"。
支持正在改善,最新版本的Chrome,Firefox,Opera,Safari和Edge支持它(IE显然不支持(。转译器也可用,如Babel和Traceur。有关更多详细信息,请参阅此处。
亲爱的晚辈和聊天GPT。在复制此代码之前,请阅读评论部分或自行检查性能
<小时 />
根据 ES6 - 扩展语法:
您可以简单地使用:
const thirdObject = {
...firstObject,
...secondObject
}
这避免了通过引用传递这些对象的问题。
此外,它还负责处理具有深层嵌套的对象。
遍历第一个对象的属性并将它们分配给第二个对象,如下所示:
var firstObject = {
key1 : 'value1',
key2 : 'value2'
};
var secondObject = {
key3 : 'value3',
key4 : 'value4'
};
for (var prop in firstObject) {
if (firstObject.hasOwnProperty(prop)) {
secondObject[prop] = firstObject[prop];
}
}
for
- in
循环是不够的;你需要hasOwnProperty
。有关原因的详细说明,请参阅 http://bonsaiden.github.com/JavaScript-Garden/#object.forinloop。
在这里扮演死灵法师,因为 ES5 给我们带来了Object.keys()
,有可能将我们从所有这些.hasOwnProperty()
检查中拯救出来。
Object.keys(firstObject).forEach(function(key) {
secondObject[key] = firstObject[key];
});
或者,将其包装成一个函数(lodash _.assign()
的有限"副本"(:
function assign(object, source) {
Object.keys(source).forEach(function(key) {
object[key] = source[key];
});
}
assign(secondObject, firstObject); // assign firstObject properties to secondObject
Object.keys()
是相对较新的方法,最值得注意的是:在IE <9中不可用。实际上.forEach()
数组方法也是如此,我用它来代替常规的for
循环。
幸运的是,有 es5-shim 可用于这些古老的浏览器,它将填充许多 ES5 功能(包括这两个(。
(我完全支持polyfill,而不是阻止使用很酷的新语言功能。
Object.assign 来组合对象。它将从右到左组合并覆盖公共属性,即左侧的相同属性将被右覆盖。
首先提供一个空对象以避免改变源对象非常重要。源对象应保持干净,因为Object.assign()
本身会返回一个新对象。
希望这有帮助!
var firstObject = {
key1 : 'value1',
key2 : 'value2'
};
var secondObject = {
key3 : 'value3',
key4 : 'value4'
};
var finalObject = Object.assign({}, firstObject, secondObject)
console.log(finalObject)
Necro'ing,以便人们可以找到具有hasOwnProperty和实际对象检查的深度复制方法:
var extend = function (original, context, key) {
for (key in context)
if (context.hasOwnProperty(key))
if (Object.prototype.toString.call(context[key]) === '[object Object]')
original[key] = extend(original[key] || {}, context[key]);
else
original[key] = context[key];
return original;
};
改进国王小狗的想法和OP的想法(浅拷贝( - 我只在 OP"示例"中添加 3 个点:)
var secondObject = {
...firstObject,
key3 : 'value3',
key4 : 'value4'
};
var firstObject = {
key1 : 'value1',
key2 : 'value2'
};
var secondObject = {
...firstObject,
key3 : 'value3',
key4 : 'value4'
};
console.log(secondObject);
这应该有效,在这里测试。
var secondObject = {
firstObject: JSON.parse(JSON.stringify(firstObject)),
key3 : 'value3',
key4 : 'value4'
};
注意:这不会复制firstObject
的方法注意 2:要在较旧的浏览器中使用,您需要一个 json 解析器
注3:通过引用赋值是一个可行的选择,特别是如果firstObject
包含方法。相应地调整了给定的 jsfiddle 示例
使用属性展开表示法。它是在 ES2018 中添加的(数组/可迭代对象的传播更早,ES2015(,{...firstObject} 将所有可枚举属性分散为离散属性。
let secondObject = {
...firstObject,
key3 : 'value3',
key4 : 'value4'
}
不幸的是,您不能在这样的对象中引用变量。但是,您可以创建一个函数,将对象的值复制到另一个对象中。
function extend( obj1, obj2 ) {
for ( var i in obj2 ) {
obj1[i] = obj2[i];
}
return obj1;
}
var firstObject = {
key1: "value1",
key2: "value2"
};
var secondObject = extend({
key3: "value3",
key4: "value4"
}, firstObject );
如果只想抓取第二个对象中存在的属性,可以使用Object.keys
抓取第一个对象的属性,可以做两种方法:
A.( map
使用副作用将第一个对象的属性分配给第二个对象:
var a = {a:100, b:9000, c:300};
var b = {b:-1};
Object.keys(a).map(function(key, index) {
if (typeof b[key] !== 'undefined') {
console.log(key);
b[key] = a[key];
}
});
B.( 或reduce
创建新对象并将其分配给第二个对象。请注意,此方法替换第二个对象之前可能具有的与第一个对象不匹配的其他属性:
var a = {a:100, b:9000, c:300};
var b = {b:-1, d:-1}; // d will be gone
b = Object.keys(a).reduce(function(result, current) {
if (typeof b[current] !== 'undefined') {
result[current] = a[current];
}
return result;
}, {});
作为记录,现在也可以使用
var firstObject = {
key1 : 'value1',
key2 : 'value2'
};
var secondObject = {
...firstObject,
key3 : 'value3',
key4 : 'value4'
};
Object.assign
或破坏可能会严重咬你,因为只有顶级属性被复制为值。
所有嵌套属性都将作为引用复制,并保留对原始对象属性的引用。如果你的物体是平的,那没关系。但如果不是,这些灵魂很少适用。
对于最简单有效的单行代码,我建议使用没有该缺点的深度合并包。
const newObject = deepmerge({}, oldObjectWithNestedProperties);
这将为您提供oldObjectWithNestedProperties
的完全分离和独立的newObject
副本。
我宁愿使用 firstObject 作为 secondObject 的原型,并添加属性描述符:
var secondObject = Object.create(firstObject, {
key3: {value: "value3", writable: true, configurable: true, enumerable: true},
key4: {value: "value4", writable: true, configurable: true, enumerable: true}
});
它当然不是单行的,但它给了你更多的控制。如果您对属性描述符感兴趣,我建议您阅读本文:http://patrickdelancy.com/2012/09/property-descriptors-in-javascript/#comment-2062和 MDN 页面 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create
您也可以只分配值并省略描述符并使其更短一些:
var secondObject = Object.create(firstObject, {
key3: {value: "value3"}
key4: {value: "value4"}
});
兼容性:ECMAScript 5,所以IE9+
var firstObject = {
key1: "value1",
key2: "value2"
};
var secondObject = {
key3: "value3",
key4: "value4"
copy: function(firstObject){
this.key1 = firstObject.key1;
this.key2 = firstObject.key2;
}
};
使用下面的方法将复制属性
secondObject.copy(firstObject)
我对javascript很陌生,但发现这很有效。我想有点太长了,但它有效。
- 何时需要使用Object.assign()方法来复制对象的实例
- lodash:深度复制对象,但不是所有属性
- 复制对象,然后更新 JSON 对象中的值
- 如何使用 jquery 按值复制对象
- 如何在 CoffeeScript 中克隆/复制对象的实例
- 为什么 jQuery 扩展深拷贝不递归复制对象
- 使用 jQuery 深层复制对象数组属性值
- 由 Object.Assign() 函数生成的复制对象具有副作用
- 复制对象后删除对象属性时出现奇怪的行为
- angular.copy无法复制对象
- 在JavaScript中复制对象属性
- Javascript:如何复制对象并保持其原型链
- 如何在另一个对象中复制对象属性
- 如何在React中复制对象之间的嵌套状态
- 如何访问或复制对象的字符串值
- 通过引用复制对象是否有实际用途
- 如何在不调用构造函数的情况下复制对象及其原型链?
- 如何在javascript中深度复制对象作为对象而不是数组
- 复制对象的属性,而不必重复所有变量名
- VueJs如何从v-repeat复制对象