Контекст

В процессе разработки мы часто сталкиваемся с ситуацией, когда нам приходится создавать экземпляры или изменять свойства объекта условно.

Допустим, мы ищем пользователя по электронной почте, фамилии и/или имени.

В большинстве случаев запрос со значением свойства falsy, таким как null или undefined, не вернет ничего хорошего, поэтому мы должны добавить их условно на основе о наличии аргумента.

Применение

// Add a property conditionally
let object = { ...(true && { key: "value" }) }; // { key: "value" };

// Override a property conditionally
object = { key: 1, ...(true && { key: 2 }) }; // { key: 2 };
object = { key: 1, ...(false && { key: 2 }) }; // { key: 1 };

Объяснение

const body = {};
const query = {};

if (body.email) {
  query.email = body.email;
}
if (body.lastname) {
  query.lastname = body.lastname;
}
if (body.firstname) {
  query.firstname = body.firstname;
}
// query = {}

Итак, вернемся к нашему примеру. Если мы хотим отфильтровать пользователей по нескольким параметрам, лучше применять только каждый фактически заданный параметр, чтобы избежать возврата каждого пользователя с определенной фамилией, которая также имеет null в качестве имя и адрес электронной почты, так как мы их не предоставили.

Для этого мы должны добавить каждый параметр в зависимости от их присутствия. Первый метод, который может прийти вам в голову, — это использовать простое условное выражение, подобное этому:

Но почему бы не воспользоваться одной из лучших функций ES6: Деструктуризация.

Для тех, кто не знает, как это работает, деструктуризация в основном позволяет извлекать элементы массива или объекта, поэтому в нашем случае допустим, что у нас есть поисковый запрос для пользователя с конкретная фамилия:

const body = {
  lastname: "Doe"
};

const query = {
  ...(body.email && { email: body.email }),
  ...(body.lastname && { lastname: body.lastname }),
  ...(body.firstname && { firstname: body.firstname }),
}; // { lastname: "Doe" }

Как видите, к объекту запроса добавляется только параметр lastname, что позволяет нам возвращать каждого пользователя с именем «Doe» в качестве фамилии и опускать условие, при котором имя и электронная почта являются нулевыми, так как есть ложные.

Заключение

Здесь у вас есть краткое решение для условного добавления свойств к объекту на основе любого условия, которое вы хотите, здесь мы просто пошли на их наличие.
Окончательный результат рефакторинга будет выглядеть так:

const query = {
  ...(email && { email }),
  ...(lastname && { lastname }),
  ...(firstname && { firstname }),
};

Первоначально опубликовано наhttps://blog.melvinvmegen.com/snippets/destructuring 15 мая 2023 г.