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


How can I add a key/value pair to a JavaScript object?

这是我的对象文本：

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

如何将{key3: value3}添加到对象中？

相关讨论

向对象添加新属性有两种方法：

1
2
3
4
var obj = {
    key1: value1,
    key2: value2
};

使用点符号：

1
obj.key3 ="value3";

使用方括号表示法：

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

当您知道属性的名称时，将使用第一个窗体。当动态确定属性名称时，将使用第二个窗体。如本例所示：

1
2
3
4
5
6
7
var getProperty = function (propertyName) {
    return obj[propertyName];
};

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

一个真正的javascript数组可以使用以下任何一种方法构建：

数组文字符号：

1
var arr = [];

数组构造函数表示法：

1
var arr = new Array();
相关讨论

2017年答案：Object.assign()。

对象。assign(dest，src1，src2，…)合并对象。

它用源对象的属性和值(无论多个)覆盖dest，然后返回dest。

The Object.assign() method is used to copy the values of all enumerable own properties from one or more source objects to a target object. It will return the target object.

活生生的例子

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

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

2018年答案：目标传播运营商{...}。

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

来自MDN：

It copies own enumerable properties from a provided object onto a new object.

Shallow-cloning (excluding prototype) or merging of objects is now possible using a shorter syntax than Object.assign().

Note that Object.assign() triggers setters whereas spread syntax doesn’t.

活生生的例子

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

1
2
3
4
5
var obj = {key1:"value1", key2:"value2"};
var pair = {key3:"value3"};
obj = {...obj, ...pair};

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

2019年答案

对象分配操作符+=：

1
obj += {key3:"value3"};

哎呀…我被迷住了。从未来走私信息是违法的。真的被遮蔽了！

相关讨论

当我写大型项目时，我越来越喜欢lodash/下划线。

由obj['key']或obj.key添加的内容都是纯javascript的可靠答案。然而，当处理对象和数组时，lodash和underline库都提供了许多额外的方便功能。

.push()用于数组，而不是对象。

根据您的需求，有两种特定的功能可以很好地利用，并提供类似于arr.push()的功能。有关更多信息，请查看文档，它们有一些很好的示例。

_.合并(仅限Lodash)

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

1
2
3
4
5
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/分配

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

1
2
3
4
5
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值。

1
2
3
4
5
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，它的功能类似于uumerge，如果您已经在使用jquery，它可能是更好的选择。

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

1
2
3
4
5
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对象.assign，它的功能类似于uumerge，如果您已经在使用es6/es2015 polyfill(如babel)，如果您想自己进行polyfill，它可能是最佳选择。

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

1
2
3
4
5
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}
相关讨论

您可以使用这两个键中的任何一个(前提是键3是您要使用的Acutal键)

1
arr[ 'key3' ] = value3;

或

1
arr.key3 = value3;

如果key3是变量，则应执行以下操作：

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

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

相关讨论

1
arr.key3 = value3;

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

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

但还是不对。实际上应该是：

1
var arr = [{key: key1, value: value1}, {key: key2, value: value2}];
1
2
3
var employees = [];
employees.push({id:100,name:'Yashwant',age:30});
employees.push({id:200,name:'Mahesh',age:35});
相关讨论

我知道已经有一个可以接受的答案，但我想我会把我的想法记录在某个地方。请[人们]自由地在这个想法上打洞，因为我不确定它是否是最好的解决方案…但几分钟前我刚刚把这个放在一起：

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

您可以这样使用它：

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

因为原型函数返回this，所以可以继续将.push链接到obj变量的末尾：obj.push(...).push(...).push(...);。

另一个特性是，可以将数组或其他对象作为push函数参数中的值传递。有关工作示例，请参阅我的小提琴：http://jsfiddle.net/7teme/

相关讨论

你可以用@ionu的答案创建一个类？G.斯坦

1
2
3
4
5
6
7
function obj(){
    obj=new Object();
    this.add=function(key,value){
        obj[""+key+""]=value;
    }
    this.obj=obj
}

使用最后一个类创建新对象：

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

打印对象

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

打印密钥

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

我是javascript的新手，欢迎评论。为我工作。

只需添加属性：

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

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

    • 那么我们用哪一个呢？

    点运算符是更干净的语法，应该用作默认值(IMO)。但是，点运算符不能向对象添加动态键，这在某些情况下非常有用。下面是一个例子：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    const obj = {
      prop1: 1
    }

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

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

    console.log(obj);

    合并对象：

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

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

    • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    const object1 = {
      a: 1,
      b: 2,
    };

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

    console.log(object2);

  • 目标扩散算子...。

    • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    const obj = {
      prop1: 1,
      prop2: 2
    }

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

    console.log(newObj);

    我们用哪一个？

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

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

    10

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

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

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

    您的示例显示一个对象，而不是一个数组。在这种情况下，向对象添加字段的首选方法是只分配给对象，如：

    1
    arr.key3 = value3;

    如果在一个对象中有多个匿名对象文本，并且想要添加另一个包含键/值对的对象，请执行以下操作：

    Firebug的对象：

    1
    console.log(Comicbook);

    返回：

    < Buff行情>

    [对象name="spiderman"，value="11

    相关讨论

    无论是obj['key3'] = value3还是obj.key3 = value3都会将新的一对添加到obj中。

    但是，我知道没有提到jquery，但是如果您使用它，您可以通过$.extend(obj,{key3: 'value3'})添加对象。例如。：

    1
    2
    3
    4
    5
    6
    var obj = {key1: 'value1', key2: 'value2'};
    $('#ini').append(JSON.stringify(obj));

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

    $('#ext').append(JSON.stringify(obj));
    1
    2
    3
    4
    5
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
    <p id="ini">Initial:
    </p>
    <p id="ext">Extended:
    </p>

    extend(target[，object1][，objectn])将两个或多个对象的内容合并到第一个对象中。

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    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));
    1
    2
    3
    4
    5
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
    <p id="ini">Initial:
    </p>
    <p id="ext">Extended:
    </p>

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

    例1

    1
    2
    3
    4
    5
    6
    7
    let my_object = {};

    // now i want to add something in it  

    my_object.red ="this is red color";

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

    例2

    1
    2
    3
    4
    5
    6
    7
    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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    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"
    //            }  
    //       }

    根据ECMA-262(http://www.ecma-international.org/publications/files/ecma-st/ecma-262.pdf，p67)中定义的属性访问器，有两种方法可以为现有对象添加属性。所有这两种方法，JavaScript引擎都将对它们进行相同的处理。

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

    1
    obj.key3 = value3;

    但是这样，您应该在点符号之后使用一个标识符名称。

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

    1
    obj["key3"] = value3;

    另一种形式：

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

    这样，就可以在括号表示法中使用表达式(包括IdentifierName)。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    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);
        });

    输出如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    [ { 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 } ]

    您可以这样添加：

    1
    arr['key3'] = value3;

    或者这样：

    1
    arr.key3 = value3;

    只有当key3的值为'key3'时，建议输入变量key3的对象的答案才有效。

    我们也可以这样做。

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

    下一个javascript规范(候选阶段3)中的一个简短而优雅的方法是：

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

    更深入的讨论可以在object spread vs object.assign和Axel Rauschmayers博士的网站上找到。

    自8.6.0版以来，它已经在node.js中运行。

    最新版本的vivaldi、chrome、opera和firefox也知道这一功能，但mirosoft直到今天才知道，无论是在Internet Explorer中还是在Edge中。

    为了预先将键值对附加到对象上，以便for in与该元素一起使用，请首先执行以下操作：

    1
    2
    3
    4
    5
        var nwrow = {'newkey': 'value' };
        for(var column in row){
            nwrow[column] = row[column];
        }
        row = nwrow;

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

    1
    2
    3
    4
    5
    6
    7
    function getKey(key) {
      return `${key}`;
    }

    var obj = {key1:"value1", key2:"value2", [getKey('key3')]:"value3"};

    //console.log(obj);

    因为这是一个过去的问题，而现在的问题。建议另一个解决方案：只需将键和值传递给函数，就可以得到一个映射对象。

    1
    2
    3
    4
    5
    var map = {};
    function addValueToMap(key, value) {
    map[key] = map[key] || [];
    map[key].push(value);
    }
    相关讨论

    1
    arr.push({key3: value3});
    相关讨论