ES6 деструктуризация в декларации возврата

Можно ли разрушить объект при его возврате в одно и то же время? Например, чтобы изменить этот код:

const mapStateToProps = ({ newItem }) =>{
  const { id, name, price } = newItem;
  return { id, name, price };
}

Чтобы что-то вроде этого:

const mapStateToProps = ({ newItem }) =>{
  return { id, name, price } = newItem;
}

4 ответа

Решение

Нет, это невозможно.

(Отказ от ответственности: ваш синтаксис работает и выполняет и деструктурирование, и возврат, но он эквивалентен

({ id, name, price } = newItem); // assigns global variables
return newItem;

что, вероятно, не то, что вы хотели)

Чтобы сделать то, что вы хотите (я предполагаю, что это создание нового объекта), вам нужно использовать литерал объекта (потенциально с сокращенной нотацией свойства). Смотрите также One-liner для получения некоторых свойств от объекта в ES 6:

const mapStateToProps = ({newItem: {id, name, price}}) => ({id, name, price});

В ES6 вы также можете сделать следующее, если вы хотите передать все newItem ключи

const mapStateToProps = ({ newItem }) => ({ ...newItem });

Есть способ делать то, что вы хотите, без этого повторения.

Но для этого требуется использование запрещенной функции js; и это больше не деструктуризация.

Так что я бы не рекомендовал это вообще.

      const mapStateToProps = ({ newItem }) =>{
  with (newItem) {
   return { id, name, price };
  }
}

Я бы рекомендовал другой подход для достижения того же результата.

      const mapStateToProps = ({ newItem }) =>{
  return {
    id: newItem.id,
    name: newItem.name,
    price: newItem.price
  };
}

Или короче:

      const mapStateToProps = ({ newItem: i }) =>{
  return {
    id: i.id,
    name: i.name,
    price: i.price
  };
}

Или еще короче:

      const mapStateToProps = ({newItem: i}) => ({
  id: i.id, name: i.name, price: i.price
})

Вот несколько причин, почему это было бы лучше:

  • Он имеет дополнительную гибкость, позволяющую легко переименовывать свойства, если это необходимо.
  • Это коротко и просто. Довольно легко читается.
  • Он имеет лучшую производительность по сравнению с деструктурированием, по крайней мере, в некоторых браузерах: https://www.measurethat.net/Benchmarks/Show/22226/0/creating-a-partial-object-destructuring-vs-property-pic .
Другие вопросы по тегам