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 .