Как условно добавить в объект или массив в JavaScript

В ходе моей работы нередко мне нужно условно добавлять свойства к объектам или (вероятно, менее часто) значения в массивы. Давайте поговорим о том, как сделать оба. Это кусок кода, который я в конечном итоге использую в качестве примера:

const trueCondition = true;
const falseCondition = false;

const obj = {
  ...(trueCondition && { dogs: "woof" }),
  ...(falseCondition && { cats: "meow" }),
};

// { dogs: 'woof' }

const arr = [
  ...(trueCondition ? ["dog"] : []),
  ...(falseCondition ? ["cat"] : [])
];

// ['dog']

Во -первых, определение нескольких вещей.

Если вы знакомы с && Оператор, тройной оператор и синтаксис разброса, пропустите вперед.

Логический оператор && (и)

&& логический оператор. Логические операторы используются для «разума» о логиках. && Оператор является одним из трех доступных в JavaScript ( не материал здесь, но для полноты – эти два других – это (Или) оператор и ?? (Nullish Coalessing) Оператор Анкет

Применение

// expr1 && expr2

console.log(true && "hi");
// hi

console.log("abc" && "123");
// 123

console.log({} && "empty but valid");
// empty but valid

console.log(false && "bye");
// false

Если первое выражение (с левой стороны) – Правда («Считается правдой при столкновении в логическом контексте»), вернуть Второе выражение (на правой стороне).

Если первое выражение фальсификация («Считается ложным, когда встречается в логическом контексте»), вернуть Первое выражение Анкет

Оценка короткого замыкания

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

const obj = {};

console.log(obj.first && obj.first.second);
// undefined

console.log(obj.first.second);
// TypeError: Cannot read property 'second' of undefined

Условный (тройной) оператор

Торговый оператор можно рассматривать как ярлык для Если утверждение. Это сделано из трех частей:

Условие с последующим вопросительным знаком ( ? )
Выражение для выполнения, если условие является правдой, за которой следует толстая кишка ( : )
выражение для выполнения, если условие является фальшивым

// condition ? exprIfConditionTrue : exprIfConditionFalse

Пример. Две функции ниже выполняют то же самое, используя различный синтаксис. Первый использует Если логика, а вторая использует тройной

/*
 * Example 1
 */

function getWelcomeMessage(isLoggedIn) {
  if (isLoggedIn) {
    return "Welcome!";
  } else {
    return "Please log in.";
  }
}

console.log(getWelcomeMessage(true));
// Welcome!

console.log(getWelcomeMessage(false));
// Please log in.

/*
 * Example 2
 */

function getWelcomeMessageTernary(isLoggedIn) {
  return isLoggedIn ? "Welcome!" : "Please log in.";
}

console.log(getWelcomeMessageTernary(true));
// Welcome!

console.log(getWelcomeMessageTernary(false));
// Please log in.

Оператор спреда (…)

Синтаксис спреда можно использовать для Расширить итерабируемое (как выражение массива) или развернуть свойства объекта Анкет

Распространение итерабильного:

let myDogs = [`Riggins`, `Lyla`];
let parentsDogs = [`Ellie`, `Remi`];

const holidayDoghouse = [...myDogs, ...parentsDogs];
// [ 'Riggins', 'Lyla', 'Ellie', 'Remi' ]

Распространение свойств объекта:

let existingAnimals = {
  dogs: 2,
  cats: 4,
  donkeys: 2,
  horses: 2,
};

let newAnimals = {
  goats: 2,
};

const allAnimals = {
  ...existingAnimals,
  ...newAnimals,
};
// { dogs: 2, cats: 4, donkeys: 2, horses: 2, goats: 2 }

Его можно использовать на итерациях, как массив или строка. Он расширяет итерацию для своих отдельных элементов

Условно добавить свойство в объект

Чтобы условно добавить свойство в объект, мы можем использовать && оператор.

const trueCondition = true;
const falseCondition = false;

const obj = {
  ...(trueCondition && { dogs: "woof" }),
  ...(falseCondition && { cats: "meow" }),
};

// { dogs: 'woof' }

В примере выше, в первом определении свойства на obj , первое выражение ( trueCondition ) является истинным/правдивым, поэтому второе выражение возвращается, а затем распространяется в объект.

Во втором определении свойства первое выражение ( falsecondition ) является false/fassy, и поэтому первое выражение возвращается (и второе выражение никогда не оценивается из-за короткого замыкания). Может показаться немного запутанным, чтобы распространить фальшивое выражение, но в результате оно игнорируется:

const spreadFalsy = {
  ...false,
  ...null,
  ...undefined,
};

console.log(spreadFalsy);
// {}

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

const trueCondition = true;
const falseCondition = false;

const withParentheses = {
  ...(trueCondition && { dogs: "woof" }),
  ...(falseCondition && { cats: "meow" }),
};

// { dogs: 'woof' }

const withoutParentheses = {
  ...trueCondition && { birds: "tweet" },
  ...falseCondition && { foxes: "???" },
};

// { birds: 'tweet' }

Условно добавьте значение в массив

Условное добавление значения в массив выглядит немного по -другому. Вместо того, чтобы использовать && Оператор, мы используем тройного оператора.

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

const falseCondition = false;

const arr = [...(falseCondition && ["cat"])];
// TypeError: boolean false is not iterable

Следовательно, нам нужен тройной; Используя тройной, мы можем вернуться к распространению пустого массива. Затем (при условии, что мы правильно предоставили два возможных иеры) Оба возможных возвращенных выражений будут итерами:

const trueCondition = true;
const falseCondition = false;

const arr = [
  ...(trueCondition ? ["dog"] : []),
  ...(falseCondition ? ["cat"] : [])
];

// ['dog']

Оригинал: “https://dev.to/amberleyjohanna/conditionally-add-to-an-object-or-array-in-javascript-1lb2”