如何使用最新的 Javascript 合并两个对象，使一个对象的键映射到另一个对象的值，而第二个对象没有额外的键？

Question

Object A :

 let form= {
      first_name: "",
      last_name: "",
      avatar: ""
}

Object B

 let profile {
      first_name: "John",
      last_name: "Doe",
      avatar: "https://image.cdn.com",
      ....100 other fields

}

Basically I should end up with:

newObject: {
      first_name: "John",
      last_name: "Doe",
      avatar: "https://image.cdn.com"
}

Without those extra items in the second object.

I tried this but it still returns the extra keys I don't want:

let profile= {
      first_name: "John",
      last_name: "Doe",
      avatar: "https://image.cdn.com",
      key1: 1,
      key2: 2,
      key: 3,

}
let form= {
      first_name: "",
      last_name: "",
      avatar: ""
}

console.log(_.merge(form, profile));

Answer 1

You can use Object.keys() and Array.reduce() to iterate over the object

 let form = { first_name: "", last_name: "", avatar: "" } let profile = { first_name: "John", last_name: "Doe", avatar: "https://image.cdn.com", dummy: 'Dummy' } let newObject = Object.keys(form).reduce((acc, key) => { acc[key] = profile[key]; return acc }, {}) console.log(newObject)

UPDATE:

With lodash you can do it as followings:

 let form = { first_name: "", last_name: "", avatar: "" } let profile = { first_name: "John", last_name: "Doe", avatar: "https://image.cdn.com", dummy: 'Dummy' } let intersection = _.intersection(Object.keys(form), Object.keys(profile)) console.log(intersection); intersection.forEach(key => form[key] = profile[key]) console.log(form);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>

Answer 2

You can grab the keys from one object using Object.keys() , then .map() these keys to an object, which uses the key from the map as the key for the object and the value from the other object for that given key as the value for the object. Then use Object.assign() to build an object from this array of objects:

 const form = { first_name: "", last_name: "", avatar: "" }; const profile = { first_name: "John", last_name: "Doe", avatar: "https://image.cdn.com", foo: 1, bar: 2, foobar: 3 }; const lift = (o1, o2) => Object.assign({}, ...Object.keys(o1).map(k => ({[k]: o2[k]}))); const res = lift(form, profile); console.log(res);

Or, since you're using lodash in your example, you can use lodash's _.pick() method with _.keys() like so:

 const form = { first_name: "", last_name: "", avatar: "" }; const profile = { first_name: "John", last_name: "Doe", avatar: "https://image.cdn.com", foo: 1, bar: 2, foobar: 3 }; const res = _.pick(profile, _.keys(form)); console.log(res);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>

Answer 3

You can use Object.assign() or ES6 spread operator to create a new object

 let profile= { first_name: "John", last_name: "Doe", avatar: "https://image.cdn.com", key1: 1, key2: 2, key: 3, } let form= { first_name: "", last_name: "", avatar: "" } let output = { ...form, ...profile }; console.log(output);

And if you want to don't want to override the values in source object if value is not falsy/empty then you can do something like

 let profile= { first_name: "John", last_name: "Doe", avatar: "https://image.cdn.com", key1: 1, key2: 2, key: 3, } let form= { first_name: "Adam", last_name: "", avatar: "" } const output = Object.keys(form).reduce((prev, key) => { prev[key] = form[key] || profile[key]; return prev; }, {}); console.log(output);

Answer 4

One simple solution is creating your own merging function (but to check your real need.. eg if on form variable an attributes is not empty.. which value will win ? but you can adjust my example according eg

function getOnlyExisting(aParam1, aParam2) {
    var vResult = Object.create(aParam1);
    for (var vAttributeName in aParam1) {
        if (aParam2.hasOwnProperty(vAttributeName)) {
            vResult[vAttributeName] = aParam2[vAttributeName];
        }
    }
    return vResult;
}

let profile = {
    first_name: "John",
    last_name: "Doe",
    avatar: "https://image.cdn.com",
    key1: 1,
    key2: 2,
    key: 3,

}
let form = {
    first_name: "",
    last_name: "",
    avatar: ""
}

console.log(getOnlyExisting(form, profile));