
Содержание статьи
Райан Юрканин

Синтаксический сахар – это сокращение для передачи большего мнения на язык программирования.
Мне нравится сравнивать это с акронимами естественных языков. Сначала новая аббревиатура может смутиться, но как только вы узнаете, что она означает, это станет гораздо быстрее!
С синтаксическим сахаром – как и с акронимами – вы можете GTFAMLH! (зайти слишком далеко и сделать жизнь тяжелее)
Я только что окончил колледж, создавал веселые программы на хакатонах со своими друзьями и на увлекательной поездке новичка JavaScript. я чувствовал безудержный. Я понял все примеры Codecademy, запомнил каждый вопрос интервью. Я смотрел «Что за… JavaScript?» столько раз, что если бы безумная обезьяна с криком выбрасывала случайные строки кода в консоль, я знал, к чему это приведет.
Мне пора зайти на GitHub и поделиться своим подарком из мир. Я открыл первый нашедший проект и начал читать. Это выглядело примерно так:
function init(userConfig) {
const DEFAULT_CONFIG = {
removeSpaces: false,
allowHighlighting: true,
priority: "high",
}
const config = { ...DEFAULT_CONFIG, ...userConfig };
}
Через несколько минут…

Смущенный и разбитый, я закрыл вкладку браузера и оставил работу на день. Это начнет цепочку моих действий:
- Откройте строку кода, которая в то время была просто иероглифами JavaScript.
- Не зная, как задавать правильные вопросы, и создавая, возможно, самые плохие поисковые запросы в Google, известные человечеству.
- Докучать случайным разработчикам, пока кто-то не сможет «объяснить, будто мне 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 о том, что я рассказывал, если вы хотите прочитать дальше. ?