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

Question

Is there a more concise or readable way of doing this?

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

EDIT. Context why I am doing this is below.

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

You could use a simple loop-based approach:

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

Notice how I used the in keyword. Your current solution will not work if the value of a property is (eg) false or 0 .

Additionaly, to get better solutions, provide some context: why are you conditionally copying properties? Perhaps you can avoid this to begin with.

Answer 2

You can use the ternary operator like this:

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

Though its not exactly the same as the if statement you have, because you'll have {a: undefined} instead of {} . The difference would show up if you ever enumerated the keys of your object.

Edit:

@hindmost has a good suggestion in the comments. You could improve it further with underscore.js :

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

Answer 3

You could use jQuery's extend , then delete the properties you don't want:

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

You could call it like:

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

Working Example

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

With the introduction of the spread operator in ES2018 you can do something like this.

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

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

In the conditionalObject we first check if the property we want to add from the original is truthy, if it is we spread that property with its value into the new object.

If the property from the original object is falsy, the && short circuits and the property is never spread into the new object.

You can read a more detailed explanation here

The new conditionalObject will look like this

{
    second: 'truthy'
}