有条件地向JavaScript对象添加属性

Question

有没有更简洁或可读的方式来做到这一点？

var foo={a:111,c:333, somePropertyThatShouldntBeAdded:'xxx'};
var myobj={x:1,y:2,z:3};
if(foo.a){myobj.a=foo.a;}
if(foo.b){myobj.b=foo.b;}
if(foo.c){myobj.c=foo.c;}

编辑。 我执行此操作的背景如下。

var obj={value:this.text,css:{color:'#929292',margin:'1px 0px'}};
if(this.width){obj.css.width=this.width;}
if(this.type){obj.type=this.type;}
if(this.id){obj.id=this.id;}
var input=$('<input/>',obj)

Answer 1

您可以使用基于循环的简单方法：

var foo={a:111,c:333, somePropertyThatShouldntBeAdded:'xxx'};
var myobj={x:1,y:2,z:3};

['a','b','c'].forEach(function(key) {
    if(key in foo) {
        myobj[key] = foo[key];
    }
});

注意我如何使用in关键字。 如果属性的值为（例如） false或0则您当前的解决方案将不起作用。

另外，为了获得更好的解决方案，请提供一些上下文：为什么要有条件地复制属性？ 也许您可以避免这种情况。

Answer 2

您可以像这样使用三元运算符：

myobj.a = foo.a ? foo.a : undefined;

尽管它与if语句并不完全相同，因为您将使用{a: undefined}而不是{} 。 如果您曾经枚举对象的键，则会显示出差异。

编辑：

@hindmost在评论中有很好的建议。 您可以使用underscore.js进一步改进它：

_.extend(myobj, _.pick(foo, ['a', 'b', 'c']));

Answer 3

您可以使用jQuery的extend ，然后delete不需要的属性：

function extendExcept(sourceObject, targetObject, except) {
    var target = $.extend(sourceObject, targetObject);
    except.forEach(function(key) {
        delete target[key];
    });
    return target;
}

您可以这样称呼它：

var foo={a:111,c:333, somePropertyThatShouldntBeAdded:'xxx'};
var myobj={x:1,y:2,z:3};
myobj = extendExcept(foo, myobj, ["somePropertyThatShouldntBeAdded"]);

工作实例

Answer 4

var foo = {
    a: 111, 
    c: 333, 
    somePropertyThatShouldntBeAdded: 'xxx'
}; 

var myObj = {
    x: 1, 
    y: 2, 
    z: 3
}; 

for(var key in foo) {
    if(key === 'somePropertyThatShouldntBeAdded') {
        continue; 
    }
    myObj[key] = foo[key]; 
}

Answer 5

随着ES2018中的点差运算符的引入，您可以执行以下操作。

const original = {
    first: null,
    second: 'truthy'
};

const conditionalObject = {
  ...( original.first && { first: original.first }),
  ...( original.second && { second: original.second })
};

在conditionalObject我们首先检查要从original属性添加的属性是否为真，如果是，则将该属性及其值传播到新对象中。

如果原始对象的属性是虚假的，则&&短路，并且该属性永远不会传播到新对象中。

您可以在此处阅读更详细的说明

新的conditionalObject将如下所示

{
    second: 'truthy'
}