为现有的 js 对象添加多个属性答案

【问题标题】：Add multiple attributes to an existing js object为现有的 js 对象添加多个属性
【发布时间】：2013-05-07 19:46:40
【问题描述】：

我想将多个属性添加到具有现有属性的现有对象。有没有比每个新属性一行更简洁的方法？

myObject.name = 'don';
myObject.gender = 'male';

MDN 上的所有内容都展示了如何使用括号表示法创建新对象，而不是现有对象：https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Working_with_Objects

【问题讨论】：

您可以创建一个函数来接收您的对象和具有新道具/值的对象，并枚举新对象，更新旧对象。这样会简洁一些。 update(obj, {name:"don", gender:"male"})

标签： javascript oop object

【解决方案1】：

在 ES6/ES2015 中你可以使用 Object.assign 方法

let obj = {key1: true};
console.log('old obj: ', obj);
let newObj = {key2: false, key3: false};

Object.assign(obj, newObj);
console.log('modified obj: ', obj);

【讨论】：

【解决方案2】：

我不确定这是否有帮助，但是使用 JS ES6 扩展语法有一个技巧：

let obj = {a: 1, b: 2};
obj = {...obj, b: 3, c: 4};
console.log(obj); // {a: 1, b: 3, c: 4}

您可以尝试以某种方式使用它...一般来说，这是使用 js 解构方法添加或覆盖对象属性的单个衬里。

编辑：请注意，...obj 在新对象中的放置是至关重要的，因为将其放置在第一位将允许使用以下参数（在我的示例中为 b: 3, c: 4）覆盖它，并将其放置在最后将优先考虑已经在对象。

【讨论】：

您可以通过说明您的示例使用 JavaScript ES6 Spread Syntax 来改进您的答案。

【解决方案3】：

来自How can I merge properties of two JavaScript objects dynamically?

var obj2 = {name: 'don', gender: 'male'};
for (var attrname in myobject) { myobject[attrname] = obj2[attrname]; }

编辑

为了更清楚地了解如何扩展 Object 以使用此功能：

//Extend the protype so you can make calls on the instance
Object.prototype.merge = function(obj2) {
    for (var attrname in obj2) {
        this[attrname] = obj2[attrname];
    }
    //Returning this is optional and certainly up to your implementation.  
    //It allows for nice method chaining.
    return this;
};
//Append to the object constructor function so you can only make static calls
Object.merge2 = function(obj1, obj2) {
    for (var attrname in obj2) {
        obj1[attrname] = obj2[attrname];
    }
    //Returning obj1 is optional and certainly up to your implementation
    return obj1;
};

用法：

var myObject1 = { One: "One" };
myObject1.merge({ Two: "Two" }).merge({ Three: "Three" });
//myObject1 is { One: "One", Two: "Two", Three: "Three", merge: function }


var myObject2 = Object.merge2({ One: "One" }, { Two: "Two" });
Object.merge2(myObject2, { Three: "Three" });
//myObject2 is { One: "One", Two: "Two", Three: "Three" }

注意：您当然可以根据需要实施灵活的合并冲突策略。

【讨论】：

不错的答案，但这是一个 hack，ES6/ES2015 有一个更好的选择，如下所述。

【解决方案4】：

有时我会这样做：

var props = {
   name : 'don',
   gender : 'male',
   age : 12,
   other : false
};
for(var p in props) myObject[p] = props[p];

【讨论】：

【解决方案5】：

使用 jQuery 库

jQuery.extend(myObject, { name : 'don', gender : 'male' });

【讨论】：

很遗憾不能使用 jQuery。（好像很不幸）虽然这看起来超级干净......
此问题未标记jquery。

【解决方案6】：

在 ECMAscript 5 中，您可以将我们设为 defineProperties：

Object.defineProperties(myobject, {  
  name: {  
    value: 'don' 
  },  
  gender: {  
    value: 'male' 
  }  
});

【讨论】：

不幸的是，语法非常冗长，使得它比 OP 希望简化的原始语法更长。
是的，我想你是对的，当你想防止你的对象发生突变时，这更有用。呵呵，我总是这样...=P
我同意。这是一个不错的功能，只是有点笨重。
还值得检查 ECMAScript v5 浏览器的兼容性，具体取决于您的目标受众 - kangax.github.io/es5-compat-table - 在这种情况下，IE9 下没有任何内容。