logo标签列表

如何向JavaScript对象添加键/值对？

javascriptobject-literal
1961

这是我的对象字面量：

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

如何向对象添加字段key3和值value3？

5
好的，JavaScript中关于关联数组的整个问题很奇怪，因为你可以这样做... http://dreaminginjavascript.wordpress.com/2008/06/27/how-weird-are-javascript-arrays/ - Nosredna
2
@Nosredna - 关键是，在JavaScript中没有关联数组这样的东西。在那篇文章中，他将对象属性添加到一个数组对象中，但这些属性并不真正属于“数组”。 - UpTheCreek
2
有没有一种方法可以在对象字面量中使用未来的ES+实现有条件地设置键值对？ - Con Antonakos
25个回答
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的新手，欢迎评论。对我来说可行。

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

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

arr.key3 = value3;
7

我们可以以多种方式向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);

CASE - 2 : 使用点号表示法

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

情况 - 3：使用[方括号]符号

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

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

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

示例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" 
//            }   
//       }
6
您可以通过以下方式进行添加：
arr['key3'] = value3;

或者这种方式：
arr.key3 = value3;

建议使用变量key3键入对象的答案仅在key3的值为'key3'时才有效。
6
根据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;

这样，您可以在括号表示法中使用一个表达式（包括IdentifierName）。
6
在下一个Javascript规范（候选阶段3）中，一个简短而优雅的方法是： obj = { ... obj, ... { key3 : value3 } } 在Object spread vs Object.assign和Dr. Axel Rauschmayers site上可以找到更深入的讨论。
它已经在node.js的8.6.0版本中实现了。
Vivaldi、Chrome、Opera和最新版本的Firefox也知道这个特性，但微软直到今天还没有，在Internet Explorer和Edge中都没有。
6

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接