使用地图查找和功能覆盖数组中的对象

Question

People,

I´m practicing .map and .find. I want to map arr1 and overwrite every object from this (arr1) with arr2 when the id matches.

<script>

const arr1 = [
  {id: '1', name: 'A', surName: 'A', age: 30},
  {id: '2', name: 'B', surName: 'B', age: 40},
  {id: '3', name: 'C', surName: 'C', age: 50}
];

const arr2 = [
  {id: '1', name: 'D', surName: 'D', age: 60, nickName: 'DD'},
  {id: '5', name: 'E', surName: 'E', age: 70, nickName: 'EE'},
  {id: '3', name: 'F', surName: 'F', age: 80, nickName: 'FF'}
];


let newArr = arr1.map(obj => arr2.find(o => o.id === obj.id) || obj);

console.log(newArr);

</script>

Result:

0: {…}
age: 60
id: "1"
name: "D"
nickName: "DD"
surName: "D"

1: {…}
age: 40
id: "2"
name: "B"
surName: "B"

2: {…}
age: 80
id: "3"
name: "F"
nickName: "FF"
surName: "F"

However, I would like to add the property nickName with value 'none' for unmatched ones like

1: {…}
age: 40
id: "2"
name: "B"
surName: "B"

for the resultant array: newArr

And I´m really stucked. I cannot find the way. As appremtice I will appreciate help. Thanks a lot

Answer 1

You can use coalescing to assign the default value of nickName when ID doesn't exist in another array.

 const arr1 = [{id: '1', name: 'A', surName: 'A', age: 30},{id: '2', name: 'B', surName: 'B', age: 40},{id: '3', name: 'C', surName: 'C', age: 50}], arr2 = [{id: '1', name: 'D', surName: 'D', age: 60, nickName: 'DD'},{id: '5', name: 'E', surName: 'E', age: 70, nickName: 'EE'},{id: '3', name: 'F', surName: 'F', age: 80, nickName: 'FF'}]; var result = arr1.map(o => { var {nickName} = arr2.find(({id}) => id === o.id) || {nickName: 'none'}; return Object.assign({}, o, {nickName}); }); console.log(result); 

Answer 2

for set nickName = none you need change the || for && . That's because in that operation you're asking about if those elements have a match or (||) the element obj exist. So, you need to change it or all your elements will pass the statements. I tried it doing something like this.

let newArr = arr1.map(obj => {
  let x = arr2.find(o => obj && (o.id === obj.id));

  if (x != null) {
    return x;
  }

  obj.nickName = 'none';
  return obj;

  }
);

Answer 3

 const arr1 = [ {id: '1', name: 'A', surName: 'A', age: 30}, {id: '2', name: 'B', surName: 'B', age: 40}, {id: '3', name: 'C', surName: 'C', age: 50} ]; const arr2 = [ {id: '1', name: 'D', surName: 'D', age: 60, nickName: 'DD'}, {id: '5', name: 'E', surName: 'E', age: 70, nickName: 'EE'}, {id: '3', name: 'F', surName: 'F', age: 80, nickName: 'FF'} ]; let newArr = arr1.map(obj => { const match = arr2.find(o => o.id === obj.id) return { ...obj, nickName: match ? match.nickName : 'none' } }); console.log(newArr); 

 <script src="https://codepen.io/synthet1c/pen/KyQQmL.js"></script>