使用 .map() 复制属性 typescript

Question

I wanted to copy selected properties from one object to another based on a condition( key ).

//Code

var abc = [{"name":"John", "age":30, "state":"WS", "id": 1}, {"name":"Wille", "age":36, "state":"SFO", "id": 2}, {"name":"Rack", "age":18, "state":"NJ", "id": 3}]

var xyz = [{"weight":69, "height":180, "mobile":4457158, "id": 1}, {"weight":77, "height":178, "mobile":5896854, "id": 2}, {"weight":56, "height":140, "mobile":568574, "id": 3}]

I wanted to copy only the properties ( height , mobile ) from xyz to abc .

I tried,

const result = abc.map(x=> ({...x, ...xyz.find(y=> y.id === x.id)}));

Even in the above i couldn't copy the entire properties. What went wrong and how can i copy the selected one?

Answer 1

Maybe just do this in steps:

const result = abc.map((x) => {
  const { height, mobile } = xyz.find((y) => y.id === x.id) || {};
  return { ...x, height, mobile };
});

Answer 2

Your code works in js, but in typescript, find could return undefined which means the resulting array will have possibly undefined properties.

interface Person = {
  id: number;
  state: string;
  name: string;
  age: number;
};

interface Stats = {
  id: number;
  weight: number;
  height: number;
  mobile: number;
};

interface Merged extends Person, Stats {}

Consider using find() as Stats if you know the arrays contain the data or wish to ignore that the id may not be found.

Answer 3

A one liner and for the sake of the parentheses, you can create an IIFE wrapping the object:

abc.map(x => ({ ...x, ...(({ mobile, height }) => ({ mobile, height }))(xyz.find(y => x.id === y.id)) }));

Basically we spread x , which you're already doing, then spread an IIFE with destructured parameters to return only the data we want, passing our find() results as the arguments.

Answer 4

 var abc = [{ "name": "John", "age": 30, "state": "WS", "id": 1 }, { "name": "Wille", "age": 36, "state": "SFO", "id": 2 }, { "name": "Rack", "age": 18, "state": "NJ", "id": 3 }]; var xyz = [{ "weight": 69, "height": 180, "mobile": 4457158, "id": 1 }, { "weight": 77, "height": 178, "mobile": 5896854, "id": 2 }, { "weight": 56, "height": 140, "mobile": 568574, "id": 3 }]; function copy(from, to, keys) { const mapped = from.reduce((acc, el) => { return {...acc, [el.id]: el } }, {}); return to.map(el => { const extracted = keys.reduce((acc, k) => ({...acc, [k]: mapped[el.id][k] }), {}); return {...el, ...extracted }; }); } console.log(copy(xyz, abc, ['height', 'weight']));