Райан Юрканин

Синтаксический сахар – это сокращение для передачи большего мнения на язык программирования.

Мне нравится сравнивать это с акронимами естественных языков. Сначала новая аббревиатура может смутиться, но как только вы узнаете, что она означает, это станет гораздо быстрее!

С синтаксическим сахаром – как и с акронимами – вы можете GTFAMLH! (зайти слишком далеко и сделать жизнь тяжелее)

Я только что окончил колледж, создавал веселые программы на хакатонах со своими друзьями и на увлекательной поездке новичка JavaScript. я чувствовал безудержный. Я понял все примеры Codecademy, запомнил каждый вопрос интервью. Я смотрел «Что за… JavaScript?» столько раз, что если бы безумная обезьяна с криком выбрасывала случайные строки кода в консоль, я знал, к чему это приведет.

Мне пора зайти на GitHub и поделиться своим подарком из мир. Я открыл первый нашедший проект и начал читать. Это выглядело примерно так:

function init(userConfig) {
  const DEFAULT_CONFIG = {
    removeSpaces: false,
    allowHighlighting: true,
    priority: "high",
  }
  
  const config = { ...DEFAULT_CONFIG, ...userConfig };
}

Через несколько минут…

Смущенный и разбитый, я закрыл вкладку браузера и оставил работу на день. Это начнет цепочку моих действий:

1. Откройте строку кода, которая в то время была просто иероглифами JavaScript.
2. Не зная, как задавать правильные вопросы, и создавая, возможно, самые плохие поисковые запросы в Google, известные человечеству.
3. Докучать случайным разработчикам, пока кто-то не сможет «объяснить, будто мне 5», но в конце концов я все еще смущен, почему кто-то написал что-то подобное. садизм, видимо.

4. Щелкнуть, понять, почему это полезно, понять, какую проблему он решает и понять, что люди делали в прошлом, чтобы решить проблему. Это был просто более краткий способ написания кода! Это просто сахар!

5. Иногда, используя этот путь слишком много, что субъективно ухудшает мой код.

6. Нахождение баланса и добавление замечательного инструмента в мой инструмент JavaScript. ?

5. Смойте и повторите около 20 раз.

Теперь я здесь, чтобы попытаться разобрать это просто для вас! Для каждого сладкого трюка я включаю некоторую предысторию, проблему, которую он может помочь решить, как вы можете достичь этого перед синтаксическим сахаром и ситуации, когда вы можете не захотеть его использовать! ?

Тернарный оператор

Тернарный оператор – один из моих любимых, с которого я начинаю говорить о сахаре в JavaScript, поскольку очень легко зайти слишком далеко. Обычно он принимает форму x ? a : b. Вот более реалистичный пример:

const amILazy = true;
const dinnerForTonight = amILazy ? "spaghetti" : "chicken";

проблема: У меня есть переменная, которая зависит от того, какое условие истинно или ложно.

Диетическое решение: По сути это просто очень сокращенный способ сделать if/else!

const amILazy = true;
let dinnerForTonight = null;

if(amILazy) { dinnerForTonight = "spaghetti"; }
else { dinnerForTonight = "chicken"; }

Когда нельзя использовать: Тернарные являются очень простым способом выражения разветвленных путей. По моему субъективному мнению, хуже всего в них то, что они бесконечно вложены. Итак, если вы поклонник безопасности работы, вы можете написать эту книгу для плавления мозгов.

const canYouFireMe = someCondition1 ?
  (someCondition2 ? false : true) : false

Классический пример JavaScript Diabetes. Меньше кода не означает более сжатый код.

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

Ах, пример с самого начала, разбившего мое сердце. В Javascript, когда вы видите ..., в зависимости от контекста это будет Object/Array Spread или Object/Array Rest. Мы немного поговорим о Rest и отложим это на второй план.

Распространение – это в основном взятие одного объекта, извлечение всех его пар ключ/значения и размещение их в другом объекте. Вот базовый пример сочетания двух объектов в новый объект:

const DEFAULT_CONFIG = {
  preserveWhitespace: true,
  noBreaks: false,
  foo: "bar",
};

const USER_CONFIG = {
  noBreaks: true, 
}

const config = { ...DEFAULT_CONFIG, ...USER_CONFIG };
// console.log(config) => {
//   preserveWhitespace: true,
//   noBreaks: true, 
//   foo: "bar",
// }

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

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

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

const DEFAULT_CONFIG = {
  preserveWhitespace: true,
  noBreaks: false,
  foo: "bar",
};

const USER_CONFIG = {
  noBreaks: true, 
}

// if we didn't pass in an empty object here, config
// would point to DEFAULT_CONFIG, and default config would be
// mutated
const config = Object.assign({}, DEFAULT_CONFIG, USER_CONFIG);

Распространение объектов устраняет возможность случайной мутации. Таким образом, вы можете делать что-то, например, обновлять состояние Redux, не боясь случайно сохранить ссылку, что приведет к неудачному сравнению.

? Бонус? Арраспространение лучей работает очень подобно! Но поскольку в массивах нет ключей, он просто добавляет его в новый массив, как Array.Prototype.concat вызов.

const arr1 = ['a', 'b', 'c'];
const arr2 = ['c', 'd', 'e'];
const arr3 = [...arr1, ...arr2];
// console.log(arr3) => ['a', 'b', 'c', 'c', 'd', 'e']

Деструктуризация объекта

Это я довольно часто вижу в дикой природе. Теперь у нас есть наш новый объект конфигурации из предыдущего примера, и мы хотим использовать его в нашем коде. Вы можете увидеть что-то в кодовой базе.

const { preserveWhiteSpace, noBreaks } = config;

// Now we have two new variables to play around with!
if (preservedWhitespace && noBreaks) { doSomething(); };

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

Диетическое решение: Вы всегда можете сделать это по старинке! Это выглядело бы примерно так.

const preserveWhitespace = config.preserveWhitepsace;
const noBreaks = config.noBreaks;
// Repeat forever until you have all the variables you need

if (preservedWhitespace && noBreaks) { doSomething(); };

Когда нельзя использовать: Вы можете фактически уничтожить объект с объекта и продолжать разрушать все глубже и глубже! Деструктуризация – не единственный способ получить ключ от объекта. Если вы обнаружите, что используете деструктуризацию только для ключей на два или три уровня, скорее всего, вы наносите проекту больше вреда, чем пользы.

? Бонус? Массивы также имеют деструктуризацию, но они работают на основе индекса.

const arr1 = ['a', 'b']
const [x, y] = arr1
// console.log(y) => 'b'

Object Rest

Object Rest идет рука об руку с Object Destructuring, и его очень легко спутать с Object Spread. Еще раз используем ... оператор, однако контекст есть другой. На этот раз он появляется во время деструктуризации и стремится собрать остатки ключей в один объект. ?

const { preserveWhiteSpace, noBreaks, ...restOfKeys } = config;

// restOfKeys, is an object containing all the keys from config
// besides preserveWhiteSpace and noBreaks
// console.log(restOfKeys) => { foo: "bar" }

проблема: Вам нужен объект, который имеет множество ключей от другого объекта.

Диетическое решение: Ты мог бы воспользоваться нашим старым другом Object.assign и удалите все ненужные ключи! ?

Когда нельзя использовать: Его использование для создания нового объекта с пропущенными ключами является обычным случаем использования. Просто учтите, что ключи, которые вы пропускаете во время деструктурирования, все еще плавают и потенциально занимают память. Если вы не будете осторожны, это может привести к ошибке. ?

const restOfKeys = Object.assign({}, config);
delete restOfKeys.preserveWhiteSpace
delete restOfKeys.noBreaks

? Бонус? Угадай, что? Массивы могут делать что-то подобное, и это работает точно так же!

const array = ['a', 'b', 'c', 'c', 'd', 'e'];
const [x, y, ...z] = array;
// console.log(z) = ['c', 'c', 'd', 'e']

Подведению

JavaScript – это прекрасно, и понимание того, как его читать позволит вам вводить более разнообразные кодовые базы и расширить свой ум как разработчика. Просто запомните это это балансировка между фактической краткостью и тем, чтобы ваш код был читабельным для других и для вас в будущем.

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

Вот коллекция документов MDN о том, что я рассказывал, если вы хотите прочитать дальше. ?