有两种方法可以向对象添加新属性 :
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();
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);
{...}
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);
对象赋值运算符 +=
:
obj += {key3: "value3"};
哎呀... 我被带走了。来自未来的走私信息是非法的。适当地模糊了!
通过obj['key']
或obj.key
都是纯粹的纯 JavaScript 答案。但是,在处理对象和数组时,LoDash 和 Underscore 库都提供了许多其他方便的功能。
.push()
适用于数组 ,不适用于对象 。
根据您的需求,有两个特定的功能可能很好用,并提供类似于arr.push()
。有关更多信息,请查看文档,他们在那里有一些很好的例子。
第二个对象将覆盖或添加到基础对象。未复制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,它的功能类似于_.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"}
可能值得一提的是 ES6 / ES2015 Object.assign,它的功能类似于_.merge,如果你想使用像Babel这样的 ES6 / ES2015 polyfill,如果你想自己填充,可能是最好的选择。
第二个对象将覆盖或添加到基础对象。 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}