Почему деконструкция JavaScript не работает inline

Question

В хэш-функции цвета я назначаю заголовок и рейтинг, деконструируя их из другого объекта, но вместо этого он назначает полноцветный объект, и если я разбиваю код на две строки (сначала деконструкция и назначение (реконструкция), то он работает нормально. Пожалуйста, объясните логику, стоящую за этим.

const colors = [{
    id: '-xekare',
    title: "rad red",
    rating: 3
}, {
    id: '-jbwsof',
    title: "big blue",
    rating: 2
}, {
    id: '-prigbj',
    title: "grizzly grey",
    rating: 5
}, {
    id: '-ryhbhsl',
    title: "banana",
    rating: 1
}]

hashcolor=colors.reduce((hash,color)=>{
    hash[color.id]={title,rating}=color
    return hash
},[])

console.log(hashcolor);

Answer 1

При деструктурировании вы создаете (или присваиваете) отдельные переменные - вы не создаете новый объект, поэтому hash[color.id] = { title, rating } на самом деле не работает. Вы могли бы написать (или скопировать) pick функцию, которая выполняет это, но в этом случае вы могли бы просто деструктурировать аргументы вместо этого.

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

const colors = [{
  id: '-xekare',
  title: "rad red",
  rating: 3
}, {
  id: '-jbwsof',
  title: "big blue",
  rating: 2
}, {
  id: '-prigbj',
  title: "grizzly grey",
  rating: 5
}, {
  id: '-ryhbhsl',
  title: "banana",
  rating: 1
}]

const hashcolor = colors.reduce((hash, { id, title, rating }) => {
  hash[id] = { title, rating };
  return hash;
}, {})

console.log(hashcolor);

Answer 2

Хотя это выглядит одинаково, на самом деле существует 2 этапа создания объекта из деструктурированных свойств:

1. Уничтожить и присвоить свойства переменным (или константам) - const { title, rating } = color.

2. Используйте сокращенные имена свойств для создания объекта const obj = { title, rating }.

В вашем случае вы можете перенести фазу деструктурирования на вызов функции:

const colors = [{"id":"-xekare","title":"rad red","rating":3},{"id":"-jbwsof","title":"big blue","rating":2},{"id":"-prigbj","title":"grizzly grey","rating":5},{"id":"-ryhbhsl","title":"banana","rating":1}]

const hashcolor = colors.reduce((hash, { id, title, rating }) => {
  hash[id] = { title, rating }
  return hash
}, {})

console.log(hashcolor);

И вы также можете использовать остальные объекты , чтобы создать объект:

const colors = [{"id":"-xekare","title":"rad red","rating":3},{"id":"-jbwsof","title":"big blue","rating":2},{"id":"-prigbj","title":"grizzly grey","rating":5},{"id":"-ryhbhsl","title":"banana","rating":1}]

const hashcolor = colors.reduce((hash, { id, ...newColor }) => {
  hash[id] = newColor
  return hash
}, {})

console.log(hashcolor);