首页 文章

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

提问于
浏览
1056

这是我的对象文字:

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

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

23 回答

  • 5

    实现相同目标的最佳方法如下:

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

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

    arr.key3 = value3;
    
  • 0

    既然它是过去的问题而是现在的问题 . 建议一个更多的解决方案:只需将键和值传递给函数,您将获得一个 Map 对象 .

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

    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()会触发setter,而spread语法则不会 .

    实例

    它适用于当前的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”};
    哎呀...我被带走了 . 来自未来的走私信息是非法的 . 正好模糊了!

  • 24
    arr.key3 = value3;
    

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

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

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

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

    根据ECMA-262(http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf,P67)中定义的属性访问器,有两种方法可以将属性添加到存在对象 . 所有这两种方式,Javascript引擎都将对待它们 .

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

    obj.key3 = value3;
    

    但是这样,你应该在点符号后使用IdentifierName .

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

    obj["key3"] = value3;
    

    和另一种形式:

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

    这样,您可以在括号表示法中使用表达式(包括IdentifierName) .

  • 1

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

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

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

  • 0

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

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

    可以在Object spread vs Object.assignDr. Axel Rauschmayers site找到更深入的讨论 .

    自8.6.0发布以来,它已在node.js中运行 .

    最新版本的Vivaldi,Chrome,Opera和Firefox也知道这个功能,但Mirosoft直到今天都没有,无论是在Internet Explorer还是在Edge中 .

  • 4

    为了 prepend 一个对象的键值对,所以 for in 使用该元素首先执行此操作:

    var nwrow = {'newkey': 'value' };
        for(var column in row){
            nwrow[column] = row[column];
        }
        row = nwrow;
    
  • 4
    var employees = []; 
    employees.push({id:100,name:'Yashwant',age:30});
    employees.push({id:200,name:'Mahesh',age:35});
    
  • 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);
     }
    
  • 9

    在编写大型项目时,我已经喜欢LoDash / Underscore .

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

    .push() is for Arrays,不适用于objects .

    根据您的需求,有两个特定的功能可能很好用,并提供类似于 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,它可能是最好的选择 . 如果你想polyfill yourself .

    第二个对象将覆盖或添加到基础对象 . 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}
    
  • 3
    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 } ]
    
  • 6

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

    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/

  • 1763

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

    Firebug' the Object:

    console.log(Comicbook);
    

    收益:

    [Object {name =“Spiderman”,value =“11”},Object {name =“Marsipulami”,value =“18”},Object {name =“Garfield”,value =“2”}]

    Code:

    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"} 添加到漫画对象中

  • 149

    只需添加属性:

    我们想要将 prop2 : 2 添加到此对象,这些是最方便的选项:

    • 点运算符: object.prop2 = 2;

    • 方括号: object['prop2'] = 2;

    So which one do we use then?

    点运算符语法更干净,应该用作默认值(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个对象的属性时,这些是最方便的选项:

    • Object.assign() ,将目标对象作为参数,以及一个或多个源对象,并将它们合并在一起 . 例如:
    const object1 = {
      a: 1,
      b: 2,
    };
    
    const object2 = Object.assign({
      c: 3,
      d: 4
    }, object1);
    
    console.log(object2);
    
    • 对象扩展运算符 ...
    const obj = {
      prop1: 1,
      prop2: 2
    }
    
    const newObj = {
      ...obj,
      prop3: 3,
      prop4: 4
    }
    
    console.log(newObj);
    

    Which one do we use?

    • 扩展语法不那么详细,应该用作默认的imo . 不要忘记将此语法转换为所有浏览器都支持的语法,因为它相对较新 .

    • Object.assign() 更具动态性,因为我们可以访问作为参数传入的所有对象,并且可以在将它们分配给新对象之前对其进行操作 .

  • 3

    大多数浏览器支持它,并检查是否可以添加对象键,如果 availableoverides existing key value 并且它 not availableadd key with value

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

    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.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>
    
  • 0

    您可以这样添加:

    arr['key3'] = value3;
    

    或者这样:

    arr.key3 = value3;
    

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

  • 64

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

    arr[ 'key3' ] = value3;
    

    要么

    arr.key3 = value3;
    

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

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

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

  • -15

    您可以使用@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的新手,欢迎提出意见 . 适合我 .

  • 0

    有两种方法可以将新的 properties 添加到对象:

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

相关问题