Автор оригинала: FreeCodeCamp Community Member.
Ryan Yurkanin.
Синтаксический сахар – это сокращение для общения большей мысли в языке программирования.
Мне нравится сравнивать его с аббревиатурой на естественных языках. Сначала видя новую аббревиатуру, может быть запутанным, но как только вы узнаете, что это значит, что это означает быстрее!
С синтаксическим сахаром – как с аббревиатурами – вы можете gtfamlh! (Иди слишком далеко и сделай жизнь сложнее)
Я был свежем из колледжа, делая забавные приложения в Hackhathons с моими друзьями, а на новичке JavaScript Thrill Ride Ride. Я чувствовал неудержимый Отказ Я понял всеми примерами кодекадемы, я совершил каждый вопрос интернет-интервью в память. Я смотрел “Какой … 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 Toolkit. ?
5. Промыть и повторить примерно в 20 раз.
Теперь я здесь, чтобы попытаться сломать его просто для вас! Для каждого слазна, я включаю в себя некоторую букву, проблема, которую она могла бы помочь решить, как вы можете достичь его перед синтаксическим сахаром, а ситуации, когда вы не хотите его использовать! ?
Темнарный оператор
Темнарный оператор является одним из моих любимых, чтобы начать с того, что говорил о сахаре в JavaScript, так как это действительно легко зайти слишком далеко. Обычно это принимает форму Икс ? A: B Отказ Вот более реалистичный пример:
const amILazy = true; const dinnerForTonight = amILazy ? "spaghetti" : "chicken";
Проблема: У меня есть переменная, которая зависит от некоторого состояния, являющегося верными или ложными.
Диета Решение: Это в основном просто действительно сокращая способ сделать Если/else !
const amILazy = true;
let dinnerForTonight = null;
if(amILazy) { dinnerForTonight = "spaghetti"; }
else { dinnerForTonight = "chicken"; }Когда не использовать его: Террики – очень простой способ выразить ветвящие пути. По моему субъективному мнению, худшее о них в том, что они бесконечно несут. Итак, если вы поклонник безопасности работы, вы можете потенциально написать этот мозговой расплав.
const canYouFireMe = someCondition1 ? (someCondition2 ? false : true) : false
Классический пример диабета JavaScript. Меньше кода не означает более краткий код.
Распространение объекта
Ах, пример с самого начала, который разбил мое сердце. В JavaScript, когда вы видите ... , В зависимости от контекста Это будет разброс объект/массив или остаток объекта/массива. Мы собираемся покрывать отдых немного, поэтому давайте поставим это на заднюю горелку.
Раскрытие в основном принимает один объект, вытягивая все свои пары ключа/значения и помещают их в другой объект. Вот основной пример распространения двух объектов в новый объект:
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",
// }Проблема: У меня есть объект, и я хочу сделать другой объект, который имеет все одинаковые ключи, со всеми теми же значениями. Возможно, я хочу сделать это с несколькими объектами, и если есть дубликаты клавиш, выберите клавиши объекта.
Диета Решение: Вы могли бы использовать Объект.assign () к достичь аналогичного эффекта Отказ Требуется любое количество объектов в качестве аргументов, указывает приоритет правым – большинству объектов, когда речь идет о клавишах и заканчивается мутация сама первого объекта. Общая ошибка не проходит в пустой объекте в качестве первого аргумента и случайно мутируя аргумент, который вы не имели в виду.
Если это трудно следовать, вы будете рады узнать, что распространение объекта делает это невозможное. Вот пример, который реплицирует синтаксическую сахарную версию.
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, без страха случайно сохраняя ссылку, вызывающее неразборное сравнение
? Бонус? AR Распространение Рэя работает очень похожи! Но поскольку в массивах нет никаких ключей, это просто добавляет его к новому массиву, как 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'
Отдых объекта
Отдых объекта идет рука об руку с деструктурированием объекта, и очень легко запутать с распространением объекта. Еще раз мы используем ... Оператор, однако контекст это разные Отказ На этот раз он проявляется во время разрушения и предназначен для того, чтобы собрать остальные ключи в один объект. ?
const { preserveWhiteSpace, noBreaks, ...restOfKeys } = config;
// restOfKeys, is an object containing all the keys from config
// besides preserveWhiteSpace and noBreaks
// console.log(restOfKeys) => { foo: "bar" }Проблема: Вы хотите объект, который имеет подмножество ключей от другого объекта.
Диета Решение: Вы можете использовать наш старый Pal Объект.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 Sugar – отличный, и понимание того, как прочитать, что он позволит вам ввести более разнообразные базы кода и расширить свой разум в качестве разработчика. Просто помните, что Это балансировочный акт между фактически, будучи краженым, и выполняет ваш код, читаемый для других, и ваше будущее.
Хотя это может почувствовать себя удивительным, демонстрирующим свой блестящий новый инструмент, наша работа в качестве программистов состоит в том, чтобы оставить кодовые базы более ремонсимы, тогда они были, когда мы ввели их.
Вот коллекция документов MDN о том, что я покрыл, если вы хотите сделать дальнейшее чтение. ?