如何将键/值对添加到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");

甲真实 JavaScript数组可使用任一构造:

数组文字表示法:

var arr = [];

Array构造函数表示法:

var arr = new Array();

Answer 2

2017年答案: Object.assign()

Object.assign(dest,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

我越来越喜欢了的LoDash/下划线写较大的项目时.

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

.push()适用于数组,不适用于对象.

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

_.merge(仅限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,如果你想使用像Babel这样的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是你想要使用的实际键)

arr[ 'key3' ] = value3;

要么

arr.key3 = value3;

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

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

在此之后,请求arr.a_key将返回value3文字的值3.

Answer 5

表现

今天 2020.01.14 我在 Chrome v78.0.0、Safari v13.0.4 和 Firefox v71.0.0 上对 MacOs HighSierra 10.13.6 进行测试，以获取选定的解决方案。我将解决方案分为可变（第一个字母 M）和不可变（第一个字母 I）。我还提供了一些尚未在此问题的答案中发布的不可变解决方案（IB、IC、ID/IE）

结论

• 最快的可变解决方案比最快的不可变解决方案（> 10 倍）快得多
• 像obj.key3 = "abc"(MA,MB)这样的经典可变方法是最快的
• 对于不可变解决方案，{...obj, key3:'abc'}和Object.assign(IA,IB) 是最快的
• 令人惊讶的是，对于 chrome (MC-IA) 和 safari (MD-IB)，不可变解决方案比一些可变解决方案更快

细节

在下面的代码段中，有预先测试的解决方案，您可以在这里在您的机器上进行测试

var o = {
    key1: true,
    key2: 3,
};

var log= (s,f)=> console.log(`${s} --> ${JSON.stringify(f({...o}))}`);



function MA(obj) {
  obj.key3 = "abc";
  return obj;
}

function MB(obj) {
  obj['key3'] = "abc";
  return obj;
}

function MC(obj) {
  Object.assign(obj, {key3:'abc'});
  return obj;
}

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

function IA(obj) {
  return {...obj, key3:'abc'};
}

function IB(obj) {
  return Object.assign({key3:'abc'}, obj);
}

function IC(obj) {
  let ob= JSON.parse(JSON.stringify(obj))
  ob.key3 = 'abc';
  return ob;
}


function ID(obj) {
	let ob= Object.fromEntries(Object.entries(obj));
  ob.key3 = 'abc';
  return ob;
}

function IE(obj) {
	return Object.fromEntries(Object.entries(obj).concat([['key3','abc']]))
}



log('MA',MA);
log('MB',MB);
log('MC',MC);
log('MD',MD);
log('IA',IA);
log('IB',IB);
log('IC',IC);
log('ID',ID);
log('IE',IE);

This snippet only presents code - it not perform tests itself!

Answer 6

arr.key3 = value3;

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

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

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

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

Answer 7

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

Answer 8

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

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/

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

合并对象:

当我们想要合并2个对象的属性时,这些是最方便的选项:

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

我们使用哪一个？

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

Answer 10

您可以使用@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的新手,欢迎发表评论.适合我.

Answer 11

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

arr.key3 = value3;

Answer 12

您可以这样添加：

arr['key3'] = value3;

或者这样：

arr.key3 = value3;

建议使用变量键入对象的答案key3仅在 的值为 时才key3有效'key3'。

Answer 13

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

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 14

下一个 Javascript 规范（候选阶段 3）中的一个简短而优雅的方法是：

obj = { ... obj, ... { key3 : value3 } }

可以在Object spread vs Object.assign和Dr. Axel Rauschmayers 站点上找到更深入的讨论。

自 8.6.0 版以来，它已经在 node.js 中工作。

最新版本中的 Vivaldi、Chrome、Opera 和 Firefox 也知道此功能，但 Mirosoft 直到今天才知道，无论是 Internet Explorer 还是 Edge。

Answer 15

var arrOfObj = [{name: 'eve'},{name:'john'},{name:'jane'}];
    var injectObj = {isActive:true, timestamp:new Date()};

    // function to inject key values in all object of json array

    function injectKeyValueInArray (array, keyValues){
        return new Promise((resolve, reject) => {
            if (!array.length)
                return resolve(array);

            array.forEach((object) => {
                for (let key in keyValues) {
                    object[key] = keyValues[key]
                }
            });
            resolve(array);
        })
    };

//call function to inject json key value in all array object
    injectKeyValueInArray(arrOfObj,injectObj).then((newArrOfObj)=>{
        console.log(newArrOfObj);
    });

输出如下：-

[ { name: 'eve',
    isActive: true,
    timestamp: 2017-12-16T16:03:53.083Z },
  { name: 'john',
    isActive: true,
    timestamp: 2017-12-16T16:03:53.083Z },
  { name: 'jane',
    isActive: true,
    timestamp: 2017-12-16T16:03:53.083Z } ]

Answer 16

大多数浏览器都支持，它会检查您是否要添加对象键是否可用，如果可用，它会覆盖现有的键值，不可用时，它会添加带值的键

示例 1

let my_object = {};

// now i want to add something in it  

my_object.red = "this is red color";

// { red : "this is red color"}

例子2

let my_object = { inside_object : { car : "maruti" }}

// now i want to add something inside object of my object 

my_object.inside_object.plane = "JetKing";

// { inside_object : { car : "maruti" , plane : "JetKing"} }

例3

let my_object = { inside_object : { name : "abhishek" }}

// now i want to add something inside object with new keys birth , gender 

my_object.inside_object.birth = "8 Aug";
my_object.inside_object.gender = "Male";


    // { inside_object : 
//             { name : "abhishek",
//               birth : "8 Aug",
//               gender : "Male" 
//            }   
//       }

Answer 17

您可以使用以下{[key]: value}语法创建一个新对象：

const foo = {
  a: 'key',
  b: 'value'
}

const bar = {
  [foo.a]: foo.b
}

console.log(bar); // {key: 'value'}
console.log(bar.key); // value

const baz = {
  ['key2']: 'value2'
}

console.log(baz); // {key2: 'value2'}
console.log(baz.key2); // value2

使用之前的语法，您现在可以使用扩展语法{...foo, ...bar}来添加新对象，而无需更改旧值：

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

const bar = {...foo, ...{['c']: 3}};

console.log(bar); // {a: 1, b: 2, c: 3}
console.log(bar.c); // 3

Answer 18

展开运算符是一种有用且快速的语法，可用于将项添加到数组、组合数组或对象以及将数组展开为函数的参数。现在，ES2018 为对象字面量提供了扩展属性。它将自己的可枚举属性从提供的对象复制到新对象上。

spread 语法对于将对象上的属性和方法组合到一个新对象中很有用：

您可以在这样的对象中添加属性

const obj1 = {hello: ""};
const obj2 = {...obj1, laugh: "" };
console.log('obj1', obj1)
console.log('obj2', obj2)

你也可以像这样组合对象

const objectOne = {hello: ""}
const objectTwo = {world: ""}
const objectThree = {...objectOne, ...objectTwo, laugh: ""}
console.log(objectThree) // Object { hello: "", world: "", laugh: "" }
const objectFour = {...objectOne, ...objectTwo, laugh: () => {console.log("".repeat(5))}}
objectFour.laugh() // 

Answer 19

如果您在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"}到漫画对象

Answer 20

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

但是,我知道jQuery没有被提及,但是如果你正在使用它,你可以添加对象$.extend(obj,{key3: 'value3'}).例如:

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>

jQuery的.extend(target [,object1] [,objectN])将两个或多个对象的内容合并到第一个对象中.

它还允许递归添加/修改$.extend(true,object1,object2);:

var object1 = {
  apple: 0,
  banana: { weight: 52, price: 100 },
  cherry: 97
};
var object2 = {
  banana: { price: 200 },
  durian: 100
};
$("#ini").append(JSON.stringify(object1));    

$.extend( true, object1, object2 );
 
$("#ext").append(JSON.stringify(object1));

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

Answer 21

我们可以通过多种方式向 JavaScript 对象添加键/值对...

案例 - 1：扩展一个对象
使用这个我们可以key: value同时向对象添加多个。

const rectangle = { width: 4, height: 6 };
const cube = {...rectangle, length: 7};
const cube2 = {...rectangle, length: 7, stroke: 2};
  console.log("Cube2: ", cube2);
  console.log("Cube: ", cube);
  console.log("Rectangle: ", rectangle);

案例 - 2：使用dot符号

var rectangle = { width: 4, height: 6 };
rectangle.length = 7;
console.log(rectangle);

案例 - 3：使用[square]符号

var rectangle = { width: 4, height: 6 };
    rectangle["length"] = 7;
    console.log(rectangle);