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

这是我的对象文字:

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

如何向对象添加{key3: value3}

答案

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

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 = [];

数组构造器符号:

var arr = new Array();

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

糟糕... 我被带走了。从未来走私信息是非法的。完全模糊!

我越来越喜欢了的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"}

$。扩展

此外,值得一提的是 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 填充。

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

您可以使用其中任何一个(提供的 key3 是您要使用的自动键)

arr[ 'key3' ] = value3;

要么

arr.key3 = value3;

如果 key3 是变量,则应该执行以下操作:

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

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

arr.key3 = value3;

因为您的 arr 并不是一个数组... 它是一个原型对象。真正的数组是:

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

但是还是不对实际上应该是:

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

我知道已经有一个可以接受的答案,但是我想我已经在某个地方记录了我的想法。请 [人们] 随意戳破这个想法,因为我不确定这是否是最佳解决方案... 但是我只是在几分钟前将其汇总:

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

您将以这种方式利用它:

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

由于原型函数正在返回this您可以继续将.pushobj变量的末尾: obj.push(...).push(...).push(...);

另一个功能是,您可以传递一个数组或另一个对象作为 push 函数参数中的值。请参阅我的小提琴以获取工作示例: http : //jsfiddle.net/7tEme/

只需添加属性:

我们想向该对象添加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);

我们使用哪一个?

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

您可以使用@ 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 新手,欢迎发表评论。为我工作。

您的示例显示一个对象,而不是数组。在这种情况下,将字段添加到对象的首选方法是将其分配给对象,如下所示:

arr.key3 = value3;