如何向 JavaScript 对象添加键/值对？

Question

这是我的对象文字：

var obj = {key1: value1, key2: value2};

我怎样才能添加 {key3: value3} 到对象？

Answer 1

有两种方法来新的属性添加到对象：

var obj = {
    key1: value1,
    key2: value2
};

使用点符号：

obj.key3 = "value3";

使用方括号：

obj["key3"] = "value3";

当你知道属性的名称的第一种形式被使用。当被动态地确定的属性的名称时，使用第二形式。像在本实施例中：

var getProperty = function (propertyName) {
    return obj[propertyName];
};

getProperty("key1");
getProperty("key2");
getProperty("key3");

---

A 实可以使用构造JavaScript数组之一：

的阵列的文字符号：

var arr = [];

的Array构造符号：

var arr = new Array();

Answer 2

2017年答案： Object.assign()

对象.分配（目标，src1，src2，...） 合并对象。

它会覆盖 dest 具有（无论多少）源对象的属性和值，然后返回 dest.

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

实例

var obj = {key1: "value1", key2: "value2"};
Object.assign(obj, {key3: "value3"});

document.body.innerHTML = JSON.stringify(obj);

2018年答案：对象扩展运算符 {...}

obj = {...obj, ...pair};

从 MDN:

它将自己的可枚举属性从提供的对象复制到新对象上。

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

注意 Object.assign() 触发器 设定者 而扩展语法则不然。

实例

它适用于当前的 Chrome 和当前的 Firefox。他们说它在当前的 Edge 中不起作用。

var obj = {key1: "value1", key2: "value2"};
var pair = {key3: "value3"};
obj = {...obj, ...pair};

document.body.innerHTML = JSON.stringify(obj);

2019年答案

对象赋值运算符 +=:

obj += {key3: "value3"};

哎呀...我刚刚分心了。走私未来信息是非法的。妥妥的遮遮掩掩！

Answer 3

我越来越喜欢 洛达什 / 下划线 当编写较大的项目时。

添加方式 obj['key'] 或者 obj.key 都是可靠的纯 JavaScript 答案。然而，LoDash 和 Underscore 库在处理一般对象和数组时确实提供了许多额外的方便功能。

.push() 用于数组, ， 不是为了 物体.

根据您要寻找的内容，有两个特定的功能可能很好用，并且提供类似于感觉的功能 arr.push(). 。有关更多信息，请查看文档，他们有一些很棒的示例。

_。合并 （仅限洛达什）

第二个对象将覆盖或添加到基础对象。undefined 值不会被复制。

var obj = {key1: "value1", key2: "value2"};
var obj2 = {key2:"value4", key3: "value3", key4: undefined};
_.merge(obj, obj2);
console.log(obj);
// → {key1: "value1", key2: "value4", key3: "value3"} 

_.扩展/_.分配

第二个对象将覆盖或添加到基础对象。undefined 将被复制。

var obj = {key1: "value1", key2: "value2"};
var obj2 = {key2:"value4", key3: "value3", key4: undefined};
_.extend(obj, obj2);
console.log(obj);
// → {key1: "value1", key2: "value4", key3: "value3", key4: undefined}

_.默认值

第二个对象包含默认值，如果它们不存在，则将添加到基础对象中。undefined 如果键已经存在，则值将被复制。

var obj = {key3: "value3", key5: "value5"};
var obj2 = {key1: "value1", key2:"value2", key3: "valueDefault", key4: "valueDefault", key5: undefined};
_.defaults(obj, obj2);
console.log(obj);
// → {key3: "value3", key5: "value5", key1: "value1", key2: "value2", key4: "valueDefault"}

$.extend

此外，可能值得一提的是 jQuery.extend，它的功能类似于 _.merge，如果您已经在使用 jQuery，它可能是一个更好的选择。

第二个对象将覆盖或添加到基础对象。undefined 值不会被复制。

var obj = {key1: "value1", key2: "value2"};
var obj2 = {key2:"value4", key3: "value3", key4: undefined};
$.extend(obj, obj2); 
console.log(obj);
// → {key1: "value1", key2: "value4", key3: "value3"}

对象.分配()

可能值得一提的是 ES6/ES2015 Object.assign，它的功能与 _.merge 类似，如果您已经在使用 ES6/ES2015 polyfill，那么它可能是最好的选择 巴别塔 如果你想 填充你自己.

第二个对象将覆盖或添加到基础对象。undefined 将被复制。

var obj = {key1: "value1", key2: "value2"};
var obj2 = {key2:"value4", key3: "value3", key4: undefined};
Object.assign(obj, obj2); 
console.log(obj);
// → {key1: "value1", key2: "value4", key3: "value3", key4: undefined}

Answer 4

您可以使用这两种（前提KEY3是acutal关键要使用）

arr[ 'key3' ] = value3;

或

arr.key3 = value3;

如果KEY3是一个变量，那么你应该做的：

var key3 = 'a_key';
var value3 = 3;
arr[ key3 ] = value3;

在此之后，请求arr.a_key将返回value3的值，一个文字3。

Answer 5

arr.key3 = value3;

由于您的改编是不是一个真正的数组......这是一个原型对象。真正的阵列将是：

var arr = [{key1: value1}, {key2: value2}];

但它仍然是不正确的。它实际上应该是：

var arr = [{key: key1, value: value1}, {key: key2, value: value2}];

Answer 6

var employees = []; 
employees.push({id:100,name:'Yashwant',age:30});
employees.push({id:200,name:'Mahesh',age:35});

Answer 7

我知道已经有这个公认的答案，但我想我的地方记录我的想法。请[人物]随意万佛洞这个想法，因为我不知道这是否是最好的解决办法......但我只是把这个在一起，几分钟前：

Object.prototype.push = function( key, value ){
   this[ key ] = value;
   return this;
}

您会利用它这种方式：

var obj = {key1: value1, key2: value2};
obj.push( "key3", "value3" );

由于，原型函数返回this可以继续链.push对您的obj变量的末尾：obj.push(...).push(...).push(...);

另一个特征是，可以通过阵列或另一个对象作为在推函数的参数值。见我的拨弄的作业例如： http://jsfiddle.net/7tEme/

Answer 8

可以创建具有的@约努茨G.斯坦

的回答一类

function obj(){
    obj=new Object();
    this.add=function(key,value){
        obj[""+key+""]=value;
    }
    this.obj=obj
}

创建一个新对象与最后一个类：

my_obj=new obj();
my_obj.add('key1', 'value1');
my_obj.add('key2', 'value2');
my_obj.add('key3','value3');

打印对象

console.log(my_obj.obj) // Return {key1: "value1", key2: "value2", key3: "value3"} 

打印键

console.log(my_obj.obj["key3"]) //Return value3

我在JavaScript的新手，评论欢迎。我的作品。

Answer 9

简单地添加属性：

我们想添加 prop2 : 2 对于这个对象，这些是最方便的选项：

1. 点运算符： object.prop2 = 2;
2. 方括号： object['prop2'] = 2;

那么我们该使用哪一种呢？

点运算符是更简洁的语法，应该用作默认值（imo）。但是，点运算符无法向对象添加动态键，这在某些情况下非常有用。这是一个例子：

const obj = {
  prop1: 1
}

const key = Math.random() > 0.5 ? 'key1' : 'key2';

obj[key] = 'this value has a dynamic key';

console.log(obj);

合并对象：

当我们想要合并两个对象的属性时，以下是最方便的选项：

1. Object.assign(), ，将目标对象作为参数，以及一个或多个源对象，并将它们合并在一起。例如：

const object1 = {
  a: 1,
  b: 2,
};

const object2 = Object.assign({
  c: 3,
  d: 4
}, object1);

console.log(object2);

2. 对象扩展运算符 ...

const obj = {
  prop1: 1,
  prop2: 2
}

const newObj = {
  ...obj,
  prop3: 3,
  prop4: 4
}

console.log(newObj);

我们使用哪一个？

• 扩展语法不太冗长，在我看来应该将其用作默认语法。不要忘记将此语法转换为所有浏览器都支持的语法，因为它相对较新。
• Object.assign() 更加动态，因为我们可以访问作为参数传入的所有对象，并且可以在将它们分配给新对象之前对其进行操作。

Answer 10

您示例显示了一个对象，而不是阵列。在这种情况下，将字段添加到对象的优选的方法是只分配给它，像这样：

arr.key3 = value3;

Answer 11

在大多数答案已经提到的两种最常用的方法

obj.key3 = "value3";

obj["key3"] = "value3";

另一种方式定义的属性，使用Object.defineProperty（）

Object.defineProperty(obj, 'key3', {
  value: "value3",       // undefined by default
  enumerable: true,      // false by default
  configurable: true,    // false by default
  writable: true         // false by default
});

当您希望有更多的控制，同时限定属性此方法非常有用。 定义的属性可以被设置为可枚举的，可配置的和可写的用户。

Answer 12

在的情况下你有一个对象内的多个匿名对象文字和想添加含有键/值对另一个对象，操作如下：

<强>萤火虫”对象：

console.log(Comicbook);

返回：

  

[对象名{= “蜘蛛侠”，值= “11”}，{对象名称= “Marsipulami”，   值= “18”}，{对象名称= “加菲猫”，值= “2”}]

<强>代码：

if (typeof Comicbook[3]=='undefined') {
    private_formArray[3] = new Object();
    private_formArray[3]["name"] = "Peanuts";
    private_formArray[3]["value"] = "12";
}

将添加Object {name="Peanuts", value="12"}到Comicbook对象

Answer 13

无论obj['key3'] = value3或obj.key3 = value3将新的对添加到obj。

不过，我知道jQuery的是没有提及，但如果你使用它，你可以通过添加$.extend(obj,{key3: 'value3'})对象。 E.g：

var obj = {key1: 'value1', key2: 'value2'};
$('#ini').append(JSON.stringify(obj));

$.extend(obj,{key3: 'value3'});

$('#ext').append(JSON.stringify(obj));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="ini">Initial: </p>
<p id="ext">Extended: </p>