Фильтрация с использованием двух массивов объектов с использованием JavaScript

Question

У меня есть массив, как показано:

var arrOne = [{id: 3},{id: 8},{id: 12}];

И еще один массив, как показано:

var arrTwo = [
  {id: 1, val: 'Adam'},
  {id: 3, val: 'Bailey'},
  {id: 8, val: 'Cathy'},
  {id: 12, val: 'David'},
  {id: 15, val: 'Earl'}
];

Я хочу перебрать arrTwo на основе arrOne и получить значения val из arrTwo. Таким образом, результат должен быть:

var result = ['Bailey', 'cathy', 'David'];

Попытка конкатенации .map с .filter:

arrOne.map(arOne => arrTwo.filter(artwo => {
    if(arOne.id === artwo.id) {
      return artwo.val
    } else {
      return false;
    }
}));

Но это дает мне все, и там, где оно ложно, оно добавляет ложь, что я не хочу Будут оценены любые идеи, где я иду не так.

Редактирование в соответствии с ответом norbitrial:

const arrOne = [{id: 3},{id: 8},{id: 12}];
const arrTwo = [
                 {id: 1, val: 'Adam'}, 
                 {id: 3, val: 'Bailey'}, 
                 {id: 8,    val: 'Cathy'}, 
                 {id: 12, val: 'David'}, 
                 {id: 15, val: 'Earl'}
               ];

const result = arrOne.map(({id}) => arrTwo.find(e => {
  const someCond = someConditionaEval();
  if(someCond && e.id === id) {
     return e;
  } else {
     return false;
  }
}).val); //this breaks

Answer 1

Используя .map() и .find() комбинацию:

const arrOne = [{id: 3},{id: 8},{id: 12}];
const arrTwo = [{id: 1, val: 'Adam'}, {id: 3, val: 'Bailey'}, {id: 8, val: 'Cathy'}, {id: 12, val: 'David'}, {id: 15, val: 'Earl'}];

const result = arrOne.map(({id}) => arrTwo.find(e => e.id === id).val);

console.log(result);

Надеюсь, это поможет!

Answer 2

1. Создание объекта из arrTwo для сбора значений val за одну итерацию.
2. использование map для arrOne и получение значения val из объекта выше.

const update = (arr1, arr2) => {
  const all = Object.fromEntries(arr2.map(({ id, val }) => [id, val]));
  return arr1.map(({ id }) => all[id]);
};

var arrOne = [{ id: 3 }, { id: 8 }, { id: 12 }];

var arrTwo = [
  { id: 1, val: "Adam" },
  { id: 3, val: "Bailey" },
  { id: 8, val: "Cathy" },
  { id: 12, val: "David" },
  { id: 15, val: "Earl" }
];

console.log(update(arrOne, arrTwo));

Answer 3

Вы можете взять объект со значениями, а затем отобразить нужные значения.

var arrOne = [{ id: 3 }, { id: 8 }, { id: 12 }],
    arrTwo = [{ id: 1, val: 'Adam' }, { id: 3, val: 'Bailey' }, { id: 8, val: 'Cathy' }, { id: 12, val: 'David' }, { id: 15, val: 'Earl' }],
    values = arrTwo.reduce((r, { id, val }) => (r[id] = val, r), {}),
    result = arrOne.map(({ id }) => values[id]);

console.log(result);

Answer 4

Создайте карту val на id из arrTwo, затем карту arrOne и извлеките val из карты, используя id.

Почему я предпочитаю создание карты / словаря (объекта) вместо использования Array.map() с Array.find()?

Из-за сложности - Array.map() с Array.find(), например, равно O (n * m), тогда как создание карты с последующим использованием Array.map() для получения значений равно O (n + m). Однако, если у вас есть два небольших массива, это не должно повлиять на реальную производительность.

const arrOne = [{id: 3},{id: 8},{id: 12}];
const arrTwo = [{id: 1, val: 'Adam'}, {id: 3, val: 'Bailey'}, {id: 8, val: 'Cathy'}, {id: 12, val: 'David'}, {id: 15, val: 'Earl'}];

const valById = new Map(arrTwo.map(({ id, val }) => [id, val]));

const result = arrOne.map(o => valById.get(o.id));

console.log(result);

Answer 5

Вы можете использовать .filter() метод на arrTwo, а затем с помощью метода .includes() получить отфильтрованные объекты из arrTwo и, наконец, использовать .map() получает только значения свойств val от каждого фильтруемого объекта, например:

var arrOne = [{id: 3},{id: 8},{id: 12}];
var arrTwo = [{id:1,val:"Adam"},{id:3,val:"Bailey"},{id:8,val:"Cathy"},{id:12,val:"David"},{id:15,val:"Earl"}];
             
var result = arrTwo.filter(a => arrOne.map(o=>o.id).includes(a.id)).map(o=>o.val)
console.log( result )