Как условно построить объект в JavaScript с помощью ES6

1656547088 kak uslovno postroit obekt v javascript s pomoshhyu es6

Кнут Мельвер

1*_CMG7dT4YMldUiVPueOmXw

Перемещение созданных пользователями данных между источниками часто требует от вас проверить, имеет ли поле значение или нет. Затем вы создаете выход на основе этого. Вот как вы можете использовать некоторые функции ES6 в JavaScript, чтобы сделать это более кратко.

Поскольку Sanity.io (где я работаю) спонсировал Syntax, я занимался RSS-каналами для подкастов в CLI, Express и бессерверных функциях. Это подразумевает разбор и конструирование сложных объектов с большим количеством полей и информации. Поскольку вы имеете дело с данными, созданными пользователями из разных источников, вы не гарантируете, что поля будут заполнены все время. Некоторые поля также необязательны. И вы не хотите выводить тэги без значений в RSS XML или JSON FEED.

Раньше я бы решил это, применив новые ключи к такому объекту:

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

И снова на помощь приходит новый синтаксис в ES6. Я нашел образец, в котором мне удалось переписать код на нечто подобное:

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

function episodeParser(data) {  const id = data.id  const title = data.title  // and so on...}

Вы пишете:

function({id, title}) {  // and so on...}

Это также хороший способ избежать многочисленных аргументов в функции. Обратите внимание также на description = ‘No summary’ часть деструктуризации объекта Это то, что мы называем параметром по умолчанию. Это означает, что если description undefined, он будет определен с помощью строки No summary как запасной вариант.

Вторая – это три точки распространенный синтаксис (...). Он используется для «развертывания» объекта, если условие истинно (именно то, что && предназначены для):

{  id: 'some-id',  ...(true && { optionalField: 'something'})}
// is the same as
{  id: 'some-id',  optionalField: 'something'}

В итоге вы получите аккуратную краткую функцию, которую также легко проверить. Одна важная оговорка по использованию && Оператор состоит в том, что будет рассматриваться число 0 false. Поэтому вы должны обратить внимание на ваши типы входящих данных.

Если мы запустим функцию, она будет выглядеть примерно так:

Вы можете увидеть это в действии в нашей реализации каналов подкастов для express.js и netlify lambdas. Если вы хотите самостоятельно попробовать Sanity.io для этих реализаций, Вы можете перейти на sanity.io/freecodecamp и получить обновленный бесплатный план разработчика. ✨

Первоначально опубликовано на www.sanity.io.

Добавить комментарий

Ваш адрес email не будет опубликован.