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

这是我的对象字面量:

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

如何将字段key3value3添加到对象?

3641515 次浏览

您可以使用其中任何一个(假设key3是您要使用的绝对密钥)

arr[ 'key3' ] = value3;

arr.key3 = value3;

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

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

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

有两种方法可以将new属性添加到对象:

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();
arr.key3 = value3;

因为你的arr不是一个真正的数组……它是一个原型对象。真正的数组是:

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

但还是不对,应该是:

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

你的示例显示了一个对象,而不是数组。在这种情况下,向对象添加字段的首选方法是直接分配给它,如下所示:

arr.key3 = value3;

你可以这样添加它:

arr['key3'] = value3;

或者这样:

arr.key3 = value3;

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

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

Firebug对象:

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"}添加到Comicbook对象

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

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/

根据ECMA-262(http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf, P67)中定义的属性访问器,您可以通过两种方式向存在对象添加属性。所有这两种方式,Javascript引擎都会对它们进行相同的处理。

第一种方法是使用点符号:

obj.key3 = value3;

但是这样,您应该在点符号之后使用用户名

第二种方法是使用括号表示法:

obj["key3"] = value3;

另一种形式:

var key3 = "key3";obj[key3] = value3;

这样,您可以在括号符号中使用表情(包括用户名)。

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

您可以创建一个答案为@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的新手,欢迎评论。为我工作。

在编写更大的项目时,我越来越喜欢LoDash/下划线

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

#0用于数组,不是对象

根据您正在寻找的内容,有两个特定的函数可能很适合使用并提供类似于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"}

_/_

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

$.扩展

此外,值得一提的是jQuery.extend,它的功能类似于_合并,如果您已经在使用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/ES2015Object.assign,它的功能类似于_合并,如果您已经在使用ES6/ES2015的聚填料,如巴别塔,如果您想要填充自己,它可能是最佳选择。

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

obj['key3'] = value3obj.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。扩展(目标[,对象1][,对象N])将两个或多个对象的内容合并到第一个对象中。

它还允许使用$.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>

为了前面一个对象的键值对,所以对于在首先使用该元素,这样做:

    var nwrow = {'newkey': 'value' };for(var column in row){nwrow[column] = row[column];}row = nwrow;

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

obj.key3 = "value3";
obj["key3"] = "value3";

定义属性的另一种方法是使用Object.defineProperty()

Object.defineProperty(obj, 'key3', {value: "value3",       // undefined by defaultenumerable: true,      // false by defaultconfigurable: true,    // false by defaultwritable: true         // false by default});

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

我们也可以这样做。

var myMap = new Map();myMap.set(0, 'my value1');myMap.set(1, 'my value2');for (var [key, value] of myMap) {console.log(key + ' = ' + value);}

2017年答案:Object.assign()

Object.assign(est, 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, scalar};

MDN

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

浅克隆(不包括原型)或对象合并现在可以使用比#0更短的语法。

请注意,#0触发setters,而扩展语法不会。

直播示例

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

var obj = {key1: "value1", key2: "value2"};var pair = {key3: "value3"};var scalar = "value4"obj = {...obj, ...pair, scalar};
document.body.innerHTML = JSON.stringify(obj);

2019年答案

对象赋值操作符+=

obj += {key3: "value3"};

哎呀…我被冲昏了头脑。从未来走私信息是非法的。完全模糊!

实现这一目标的最佳方法如下:

function getKey(key) {return `${key}`;}
var obj = {key1: "value1", key2: "value2", [getKey('key3')]: "value3"};
//console.log(obj);

下一个Javascript规范(候选阶段3)中的一种简短而优雅的方式是:

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

更深入的讨论可以在对象传播vsObject.assignAxel Rauschmayers博士网站中找到。

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

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

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 objectinjectKeyValueInArray(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 } ]

因为这是过去的问题,但现在的问题。建议还有一个解决方案:只需将键和值传递给函数,您将获得一个map对象。

var map = {};function addValueToMap(key, value) {map[key] = map[key] || [];map[key].push(value);}

简单地添加属性:

我们想将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);

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

const obj = {prop1: 1,prop2: 2}
const newObj = {...obj,prop3: 3,prop4: 4}
console.log(newObj);

我们用哪一个?

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

大多数浏览器都支持,它检查对象键是否可用,如果可用覆盖现有键值和它没有加值键

例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"//            }//       }

性能

今天2020.01.14我在Chromev78.0.0、Safariv13.0.4和Firefox v71.0.0上对MacO HighSierra 10.13.6进行测试,以确定所选的解决方案。我将解决方案分为可变(第一个字母M)和不可变(第一个字母I)。我还提供了一些尚未发布的不可变解决方案(IB、IC、ID/IE)来回答这个问题

结论

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

在此处输入图片描述

详情

在下面的代码片段中,有预先测试的解决方案,您可以在您的机器上进行测试这里(2022年更新:我非常感谢Josh DeLong重写了jspref.com的测试,该测试停止jsbench.me)

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 defaultenumerable: true,      // false by defaultconfigurable: true,    // false by defaultwritable: 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!

enter image description here

您可以使用{[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

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

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

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

扩展语法对于将对象上的属性和方法组合成一个新对象很有用:

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

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() //