如何添加或更新数组元素的属性：Javascript

Question

Let's suppose we have an array that has properties id, name, age. I want to add more properties to it like height if it is not in the existing array. And if it that property exists it should update the array element.

let array1 = [
    {
    id : 1,
    name : "Ravi",
    age : 29
    }
    {
    id : 2,
    name : "Nitin",
    age : 31,
    height : "5.5",
    }
    ]

let array2 = [
   {
   id : 1,
   height : "5.8",
   }
   {
   id : 2,
   height : "6.1",
   }
   ]

Created a function that could first check if ID exists then update the property if doesn't exists then create it. After that it should check it the property exists then it should update the property if not then property needs to be added to existing element having old properties.

updateorinsert(array, item) { 
            const i = array.findIndex(_item => _item.id === item.id);
            if (i !== -1) { 
               array[i] = item; 
                array.map((element, index) => {
                    let result = array[index].hasOwnProperty("height");   
                    if(result == true){
                        // update the property
                    }else{
                        // add that property
                    }
                });               
            }
            else { 
                array.push(item);              
            }
        }

//Calling the function :

updateorinsert(array1, {id : 1, height : "5.8",}) // this can be changes as {id : 2, height : "6.1",} 

output_array = [
    {
    id : 1,
    name : "Ravi",
    age : 29,
    height : "5.8",
    },
    {
    id : 2,
    name : "Nitin",
    age : 31,
    height : "6.1",
    }
    ]

Answer 1

You can easily achieve this result using map and spread syntax

 let array1 = [ { id: 1, name: "Ravi", age: 29 }, { id: 2, name: "Nitin", age: 31, height: "5.5" }, ]; let array2 = [ { id: 1, height: "5.8" }, { id: 2, height: "6.1" }, ]; const result = array1.map((o) => ({...o, ...array2.find((obj) => obj.id === o.id), })); console.log(result);

 .as-console-wrapper { max-height: 100%;important: top; 0; }

Answer 2

It's really unnecessary to specifically compute if a value needs to be inserted or added if all you really want to do is merge arrays and overwrite any value if it's seen later.

You can place all your arrays into an array and reduce them into a single array. First create a map by id to element values, then return the array of computed values.

The idea here is to continually spread in the values matched by the id property, if the property didn't exist previously it will now, and if it did it will be overwritten.

Note: This method avoids the O(n) id search complexity of the nested array.find by building a map for O(1) constant time lookups.

Object.values([/* ...arrays */].reduce((res, current) => {
  current.forEach(el => {
    res[el.id] = { ...res[el.id], ...el };
  });
  return res;
}, {}));

 const array1 = [ { id: 1, name: "Ravi", age: 29 }, { id: 2, name: "Nitin", age: 31, height: "5.5" }, ]; const array2 = [ { id: 1, height: "5.8" }, { id: 2, height: "6.1" }, ]; const res = Object.values([array1, array2].reduce((res, current) => { current.forEach(el => { res[el.id] = {...res[el.id], ...el }; }); return res; }, {})); console.log(res);