Как работать с объектами и массивами в JavaScript? (rest, spread)

Question

const orderIds = [4, 2, 1, 3]

const people = [
    { id: 3, name: 'Tom'},
    { id: 2, name: 'Bill'},
    { id: 1, name: 'Jack'},
    { id: 4, name: 'Bob'}
]
// Bob Bill Jack Tom

Нужно вынести в консоль данные из объекта в порядке указанном в массиве. То есть, поменять в объекте ключи id в том порядке, которые указан в массиве.

Answer 1

Коллега, подобный мелкий саботаж учебных заданий дорого обойдется при трудоустройстве. Сокращенный синтаксис управления объектами как множеством полей недвусмысленно сокращает время написания кода, его нужно знать!

const orderIds = [4, 2, 1, 3]

const people = [
    { id: 3, name: 'Tom'},
    { id: 2, name: 'Bill'},
    { id: 1, name: 'Jack'},
    { id: 4, name: 'Bob'}
]

const peopleMap = people.reduce((acm, cur) => ({...acm, [cur.id]: cur.name}), {});
console.log(...orderIds.map((id) => peopleMap[id]));

Answer 2

const orderIds = [4, 2, 1, 3]

const people = [
    { id: 3, name: 'Tom'},
    { id: 2, name: 'Bill'},
    { id: 1, name: 'Jack'},
    { id: 4, name: 'Bob'}
]

let result = orderIds.map(el => people.filter(item => item.id == el)[0].name)
console.log(...result)

Answer 3

Без возможных потерь данных (если помимо name в объектах будут еще свойства):

const orderIds = [4, 2, 1, 3];
const people = [
  { id: 3, name: 'Tom'},
  { id: 2, name: 'Bill'},
  { id: 1, name: 'Jack'},
  { id: 4, name: 'Bob'},
];

(
  ppl => console.log(...orderIds.map(id => ppl[id].name))  // 2. вывод данных, два прохода
)(
  Object.fromEntries(people.map(     // 1. преобразование из массива в объект, два прохода
    ({ id, ...rest }) => [id, { ...rest }]
  ))
);

Конструкции вида Object.fromEntries(arr) и ...arr.map() содержат "скрытые" циклы - вместо них можно использовать reduce или процедурный цикл, в каждом таком случае получив один проход по данным вместо двух.
Таким образом, это примерно среднее по эффективности решение. Более скоростная комбинация редьюсов/форов и IIFE выглядела бы уж чересчур эзотерично :)

Кстати об IIFE, оно здесь только чтобы веселее было (это по сути делает хэштаблицу автоосвобождаемой, готовой к GC сразу после выполнения выражения) - так делать совсем не обязательно, под хранение ХТ можно и переменную ввести. Показываю только потому что на собеседованиях такие трюки иногда добавляют "звездочек".

А вложенные циклы (перепоиск/перефильтровка элементов на каждой итерации, как в принятом ответе) == зло: такие решения наименее производительны, плюс иногда приводят к гейзенбагам ?. Минздрав предупреждает.

БЛОГ НА HUSL

Как работать с объектами и массивами в JavaScript? (rest, spread)

Ответы (3 шт):