题 如何将键/值对添加到JavaScript对象?


这是我的对象文字:

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

我该如何添加 {key3: value3} 对象?


979
2017-07-22 23:21


起源


好吧,JS中关联数组的整个问题很奇怪,因为你可以这样做...... dreaminginjavascript.wordpress.com/2008/06/27/... - Nosredna
@Nosredna - 重点是,javascript中没有关联数组这样的东西。在那篇文章中,他将对象属性添加到数组对象中,但这些属性并不是“数组”的一部分。 - UpTheCreek
有没有办法在未来的ES +实现中有条件地设置对象文字中的键:值对? - Con Antonakos


答案:


有两种方法可以添加新的 性能 到一个对象:

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

一个 真实 可以使用以下任一方法构造JavaScript数组:

数组文字表示法:

var arr = [];

Array构造函数表示法:

var arr = new Array();

1662
2017-07-22 23:25



obj是一个对象。大括号之间(包括)的部分是对象文字。 obj不是对象文字。 - Nosredna
如果密钥是一个数字怎么办? obj.123 = 456不起作用。 obj [123] = 456确实有效 - axel freudiger
@axelfreudiger确实,任何语法上不是有效变量标识符的东西都必须与括号表示法一起使用。 - Ionuț G. Stan
@KyleKhalaf Object.keys({"b": 1, "c": 3, "a": 2}).sort().forEach(console.log); - Ionuț G. Stan
这个答案已经不能接受了。 - Haroon Khan


2017年答案: Object.assign()

Object.assign(dest,src1,src2,...) 合并对象。

它会覆盖 dest 使用(但是很多)源对象的属性和值,然后返回 dest

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

实例

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


87
2017-11-04 23:51



obj + =听起来很棒 - Mehrdad Shokri
我会爱+ =:饿了:虽然很酷的答案!! doche - Haroon Khan


我越来越喜欢了 LoDash / 下划线 在写大型项目时。

添加 obj['key'] 要么 obj.key 都是纯粹的JavaScript答案。但是,在处理对象和数组时,LoDash和Underscore库都提供了许多其他方便的功能。

.push() 适用于阵列, 不是为了 对象

根据您的需求,有两个特定的功能可能很好用,并提供类似于感觉的功能 arr.push()。有关更多信息,请查看文档,他们在那里有一些很好的例子。

_。合并 (仅限Lodash)

第二个对象将覆盖或添加到基础对象。 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"} 

_.extend / _.assign

第二个对象将覆盖或添加到基础对象。 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}

_.defaults

第二个对象包含将添加到基础对象(如果它们不存在)的默认值。 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"}

Object.assign()

值得一提的是ES6 / ES2015 Object.assign,它的功能类似于_.merge,如果你已经在使用像ES6 / ES2015那样的polyfill,它可能是最好的选择。 巴别塔 如果你想 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}

77
2017-11-24 18:11



我相信_.merge现在是_.extend(目的地,其他) - A.D
啊,你说的没错, _.extend 由于下划线库仍在使用,因此是一个更通用的别名 extend 不 merge。我会更新我的答案。 - Sir.Nathan Stassen


你可以使用其中任何一个(假设key3是你想要使用的实际键)

arr[ 'key3' ] = value3;

要么

arr.key3 = value3;

如果key3是变量,那么你应该这样做:

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

在此之后,请求 arr.a_key 会返回值 value3一个文字 3


62
2017-07-22 23:22



这不是数组而是对象。 JS数组仅由整数索引。尝试做arr.length并返回0.更多关于此的解读: less-broken.com/blog/2010/12/... - DevAntoine
@ DevAntoine的链接无法访问。如果要获取此数组类型的“长度”,请使用:Object.keys(your_array).length有关此问题的更多信息,请参阅: stackoverflow.com/questions/21356880/array-length-returns-0 - Thế Anh Nguyễn
也可以简单地覆盖他们正在创建的数组的长度属性。设置var myarray [“length”] = numArrayFields为我解决了这个问题。假设您正在跟踪您以某种方式添加到阵列的字段数量。 - John Smith


arr.key3 = value3;

因为你的arr实际上不是一个数组......它是一个原型对象。真正的数组将是:

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

但它仍然不对。它应该是:

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

26
2017-07-22 23:25





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

23
2017-10-27 17:49



这适用于数组,而不是对象。 - Roly


我知道已经有一个公认的答案,但我想我会在某个地方记录我的想法。请[人们]随意挖掘这个想法的漏洞,因为我不确定它是否是最好的解决方案......但我只是在几分钟前将它们放在一起:

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

另一个特性是您可以将数组或其他对象作为push函数参数中的值传递。看一个工作示例的小提琴: http://jsfiddle.net/7tEme/


8
2018-06-26 18:34



也许这不是一个好的解决方案,我似乎在jquery1.9中遇到错误: TypeError: 'undefined' is not a function (evaluating 'U[a].exec(s)') 这很奇怪,因为即使使用jquery1.9它也可以在jsfiddle中运行 - sadmicrowave
你不应该扩展Object.prototype;这打破了JavaScript的“object-as-hashtables”功能(以及随后的许多库,例如Google Maps JS API)。见讨论: stackoverflow.com/questions/1827458/... - Justin R.


您可以使用答案创建一个类 @IonuţG。Stan

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的新手,欢迎提出意见。适合我。


8
2017-12-28 01:34





您的示例显示了一个Object,而不是一个Array。在这种情况下,向Object添加字段的首选方法是分配给它,如下所示:

arr.key3 = value3;

6
2017-07-22 23:25





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

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

当您希望在定义属性时拥有更多控制权时,此方法很有用。 定义的属性可以设置为可枚举,可由用户配置和写入。


6
2018-01-13 06:14





如果您在Object中有多个匿名对象文字并想要添加另一个包含键/值对的对象,请执行以下操作:

萤火虫'对象:

console.log(Comicbook);

收益:

[Object {name =“Spiderman”,value =“11”},Object {name =“Marsipulami”,   value =“18”},Object {name =“Garfield”,value =“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"} 到漫画对象


5
2017-08-01 14:28



很好地清楚地解释了其他选项,它更适合处理具有id或name属性的对象,然后在添加时分配它,好的。特别是当它有或将来可能有更多的道具相同的方法将适用只是放入另一个昏迷,它已准备好改变计划 - Avia Afer