Содержание

If-else, тернарный оператор — react-course-ru

react-course-ru

Search

ОБНОВЛЕНИЕ 2018: в учебнике хорошая теория, но ему уже два года. Проверяйте версии пакетов. За выходом нового учебника можно следить в telegram канале или twitter​

На канале так же проводятся бесплатные вебинары, публикуются переводы и авторские материалы, присоединяйтесь

!

Помните, у нас была фраза «новостей нет»? Хорошо бы ее отображать, если новостей действительно нет.

Для начала, научимся отображать общее количество новостей, допустим внизу, после списка новостей.

Как бы сказал участник игры «Угадай JS» — я напишу это за одну строку. Что скажете вы? Подсказка:

var News = React.createClass({

render: function() {

var data = this.props.data;

var newsTemplate = data.map(function(item, index) {

return (

<div key={index}>

<p className=»news__author»>{item.author}:</p>

<p className=»news__text»>{item.text}</p>

</div>

return (

<div className=»news»>

{newsTemplate}

ЭТА_СТРОКА_ЗДЕСЬ

</div>

Ответ:

<strong>Всего новостей: {data.length}</strong>

Поиграйтесь с переменной my_news. Сделайте ее пустым массивом, добавьте/удалите элементы. Пообновляйте страницу. Количество новостей должно работать корректно.

Вернемся к нашей задаче. Алгоритм прост:

Создаем переменную newsTemplate, если новости есть — в переменную по-прежнему будем передавать результат работы фунции map, иначе — будем передавать сразу разметку.

Компонент News:

var News = React.createClass({

render: function() {

var data = this.props.data;

var newsTemplate;

if (data.length > 0) {

newsTemplate = data.map(function(item, index) {

return (

<div key={index}>

<p className=»news__author»>{item.author}:</p>

<p className=»news__text»>{item.text}</p>

</div>

} else {

newsTemplate = <p>К сожалению новостей нет</p>

return (

<div className=»news»>

{newsTemplate}

<strong>Всего новостей: {data.length}</strong>

</div>

Неплохо, но если нет новостей — зачем нам показывать, что всего новостей 0? Давайте решим это с помощью css класса . none, который будем добавлять если новостей нет.

Для этого создайте css файл с содержимым:

css/app.css

.none {

display: none !important;

и подключите его в index.html

index.html

<!DOCTYPE html>

<html>

<head>

<title>React [RU] Tutorial</title>

<link rel=»stylesheet» href=»css/app.css»>

</head>

<body>

<div></div>

<script src=»js/react/react.js»></script>

<script src=»js/react/react-dom.js»></script>

<script src=»js/react/browser.min.js»></script>

<script type=»text/babel» src=»js/app.js»></script>

</body>

</html>

С классом . none все вновь решается в одну строку.

Измените строку про количество новостей следующим образом:

<strong className={data.length > 0 ? »:’none’}>Всего новостей: {data.length}</strong>

Проще простого: есть новости ? ‘ пустой класс ‘ : ‘ класс .none ‘

Для работы с классами, когда их становится больше и условия становятся сложнее, можно использовать classNames (NPM пакет). Но сейчас в этом нет необходимости.

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

​Исходный код на данный момент.

P.S. официальная документация про If-else внутри JSX​

Previous

Использование props

Next

Порефакторим…

Last modified 3yr ago

Copy link

Альтернатива if/else и switch: литералы объектов в JavaScript

Сложные условия в JS всегда были источником лишнего кода. Однако использование литералов объектов в JavaScript может избавить вас от этой проблемы. Давайте разберёмся, как это работает.

Литерал объекта в JavaScript — это список пар ключ-значение, перечисленных через запятую и обёрнутый фигурными скобками.

Допустим у нас есть функция, которая принимает на вход рифмованную фразу на английском сленге кокни и возвращает её значение. Если использовать конструкцию if/else, то код будет выглядеть следующим образом:

function getTranslation(rhyme) {
  if (rhyme.toLowerCase() === "apples and pears") {
    return "Stairs";
  } else if (rhyme.toLowerCase() === "hampstead heath") {
    return "Teeth";
  } else if (rhyme. toLowerCase() === "loaf of bread") {
    return "Head";
  } else if (rhyme.toLowerCase() === "pork pies") {
    return "Lies";
  } else if (rhyme.toLowerCase() === "whistle and flute") {
    return "Suit";
  }

  return "Rhyme not found";
}

Выглядит так себе. Этот код не только плохо читается, но и использует повторяющийся вызов функции toLowerCase().

Чтобы уменьшить количество кода, мы можем использовать дополнительную переменную или конструкцию switch.

function getTranslation(rhyme) {
  switch (rhyme.toLowerCase()) {
    case "apples and pears":
      return "Stairs";
    case "hampstead heath":
      return "Teeth";
    case "loaf of bread":
      return "Head";
    case "pork pies":
      return "Lies";
    case "whistle and flute":
      return "Suit";
    default:
      return "Rhyme not found";
  }
}

Такой код выглядит чище, но это не предел.

К тому же, в случае использования более сложных условий, можно случайно пропустить break и спровоцировать баги.

Альтернатива

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

function getTranslationMap(rhyme) {
  const rhymes = {
    "apples and pears": "Stairs",
    "hampstead heath": "Teeth",
    "loaf of bread": "Head",
    "pork pies": "Lies",
    "whistle and flute": "Suit",
  };
  
  return rhymes[rhyme.toLowerCase()] ?? "Rhyme not found";
}

Мы используем объект, ключи которого выполняют роль условий, а значения — результатов. Затем, с помощью квадратных скобок, мы проверяем наличие нужной строки. Так как полученная строка может быть null или undefined, то мы используем оператор Nullish coalescing (??). Таким образом мы избавляемся от null-значения, но не исключаем случай, что результат может быть равен нулю или false.

function stringToBool(str) {
  const boolStrings = {
    "true": true,
    "false": false,
  };

  return boolStrings[str] ?? "String is not a boolean value";
}

Это немного надуманный пример, но он иллюстрирует то, как использование ?? помогает избежать багов.

Подробнее о способах обработки undefined в JavaScript.

Сложная логика

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

function calculate(num1, num2, action) {
  const actions = {
    add: (a, b) => a + b,
    subtract: (a, b) => a - b,
    multiply: (a, b) => a * b,
    divide: (a, b) => a / b,
  };

  return actions[action]?.(num1, num2) ?? "Calculation is not recognised";
}

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

Вывод

Каждая условная конструкция имеет свою область применения. Для литералов объектов в JavaScript это длинные списки условий и сложные условия, которые можно реализовать с помощью функций.

Источник Don’t Use If-Else and Switch in JavaScript, Use Object Literals

Реклама на Tproger: найдем для вас разработчиков нужного стека и уровня.

Подробнее

Реклама на tproger.ru

Загрузка

Сокращение Javascript для операторов if/else (тернарный оператор) объяснение

Обновлено 24 марта 2023 г. ⤳ Чтение: 3 мин.

Поделиться в Twitter, LinkedIn JavaScript, вам нужно использовать троичный оператор — он же условный — оператор.

Тернарный оператор принимает три операнда: условие , за которым следует вопросительный знак ( ? ), и два выражения JavaScript, разделенные двоеточием ( : ).

Выражение слева от двоеточия будет выполнено, если условие истинно. Но если условие ложно, будет выполнено правое выражение:

состояние ? exprIfConditionIsTruthy : exprIfConditionIsFalsy

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

Давайте рассмотрим несколько вариантов использования.

Инициализация переменных: Наиболее распространенный вариант использования тернарных операторов — инициализация переменных:

пусть backgroundColor = isChrismas ? 'Красно-желтый'

С if/else вы получите то же самое, например:

пусть backgroundColor = ''
если (Рождество) {
   backgroundColor = 'красный'
} еще {
  backgroundColor = 'желтый'
}

Тоже неплохо.

👇 Продолжить чтение

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

Следующая функция определяет, является ли число четным или нет:

функция isEven (значение) {
   возвращаемое значение % 2 === 0 ? правда : ложь
}

Тернарный оператор в строках:  Вы также можете использовать тернарный оператор при создании строк:

пусть приветствие = 'Добро пожаловать, дорогой' + пользователь? user.name : 'пользователь'

В приведенном выше примере, если пользователь аутентифицирован, мы будем приветствовать его по имени, в противном случае будет отображаться «Добро пожаловать, дорогой пользователь».

Тернарные операторы могут быть вложенными

Тернарный оператор является правоассоциативным, что означает, что он может быть вложенным — точно так же, как последовательные операторы if/else .

С другой стороны exprIfConditionIsTruthy и exprIfConditionIsFalsy операнды могут быть тернарными операторами:

пусть someVariable = condition1 ? значение1
: условие2 ? значение2
: условие3 : значение 3 : значение 4

Несмотря на то, что тернарный оператор короткий и приятный, он не делает обычные 9Операторы 0007 if/else — плохой выбор.

Иногда оператор if/else более удобочитаем, чем тернарный оператор, независимо от количества строк.

Что бы вы выбрали для вложенных условий:

❋ Тернарный подход 

функция некоторая функция () {
    условие возврата1 ? значение1
        : условие2 ? значение2 : значение3
}

❋ Подход if/else: 

функция someFunction () {
    если (условие1) {
        возвращаемое значение1
    } иначе если (условие2) {
        возвращаемое значение2
    }
    // Если ничего из вышеперечисленного не соответствует действительности
    возвращаемое значение3
}

👇 Продолжить чтение

Хотя подход if/else требует еще нескольких строк, он ближе к человеческому языку. Как правило, тернарный оператор удобен для однострочников. Для других сценариев управления потоком используйте if/else .

Ладно, думаю, на сегодня хватит! Я надеюсь, что вы нашли это краткое руководство полезным!

Спасибо за внимание.

Реза Лавариан Привет 👋 Я инженер-программист, автор и участник открытого исходного кода. Мне нравится помогать людям (включая себя) расшифровывать сложную сторону технологий. Я делюсь своими выводами в Твиттере: @rlavarian

18 сокращений JavaScript и TypeScript, которые нужно знать

Примечание редактора: Это руководство по наиболее полезным сокращениям JavaScript и TypeScript в последний раз обновлялось 3 января 2023 года для устранения ошибок в коде и включения информации о введенном операторе satisfies. в TypeScript v4.9.

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

В этой статье мы рассмотрим 18 распространенных JavaScript и TypeScript и сокращений. Мы также рассмотрим примеры использования этих сокращений.

Прочитайте эти полезные сокращения JavaScript и TypeScript или перейдите к тому, что вы ищете, в списке ниже.

Перейти вперед:

  • Сокращения JavaScript и TypeScript
  • Тернарный оператор
  • Оценка короткого замыкания
  • Нулевой оператор объединения
  • Шаблонные литералы
  • Сокращение присвоения свойств объекта
  • Дополнительная цепочка
  • Деструктуризация объекта
  • Оператор спреда
  • Сокращение цикла объекта
  • Array.indexOf сокращение с использованием побитового оператора
  • Приведение значений к логическим значениям с помощью !!
  • Выражение стрелочной/лямбда-функции
  • Неявный возврат с использованием выражений стрелочных функций
  • Двойной побитовый оператор НЕ
  • Сокращение степени экспоненты
  • Сокращение конструктора TypeScript
  • TypeScript удовлетворяет оператору

Сокращения JavaScript и TypeScript

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

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

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

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

Тернарный оператор — одно из самых популярных сокращений в JavaScript и TypeScript. Он заменяет традиционный оператор if…else . Его синтаксис следующий:

 [состояние] ? [верный результат] : [ложный результат]

В следующем примере демонстрируется традиционный оператор if…else и его сокращенный эквивалент с использованием тернарного оператора:

 // От руки
постоянная отметка = 80
если (отметить >= 65) {
  вернуть "Пасс"
} еще {
  вернуть "неудачно"
}
// Сокращение
постоянная отметка = 80
знак возврата >= 65 ? «Пройдено»: «Не пройдено»

Тернарный оператор отлично подходит для однострочных операций, таких как присвоение значения переменной или возврат значения на основе двух возможных условий. Как только у вашего состояния есть более двух исходов, используйте if/else Блоки намного легче читать.

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

Еще один способ заменить оператор if…else — использовать оценку короткого замыкания. В этом сокращении используется логический оператор ИЛИ || , чтобы присвоить переменной значение по умолчанию, когда предполагаемое значение является ложным.

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

 // От руки
пусть ул = ''
пусть finalStr
if (str !== null && str !== undefined && str != '') {
  финалСтр = ул
} еще {
  finalStr = 'строка по умолчанию'
}
// Сокращение
пусть ул = ''
пусть finalStr = str || 'строка по умолчанию' // 'строка по умолчанию

Это сокращение лучше всего использовать, когда у вас есть однострочная операция, и ваше условие зависит от ложности или неложности значения/оператора.

Нулевой оператор объединения

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

Другими словами, если предполагаемое значение является ложным, но не нулевым, оно не будет использовать значение по умолчанию.

Вот два примера нулевого оператора объединения:

Пример 1 

 // От руки
пусть ул = ''
пусть finalStr
if (str !== null && str !== undefined) {
  finalStr = 'строка по умолчанию'
} еще {
  финалСтр = ул
}
// Сокращение
пусть ул = ''
пусть finaStr = str ?? 'строка по умолчанию' // ''

Пример второй 

 // От руки
пусть число = ноль
пусть фактическое число
если (число !== ноль && число !== не определено) {
  фактическое число = число
} еще {
  фактическое число = 0
}
// Сокращение
пусть число = ноль
пусть фактическое число = число ?? 0 // 0

Это похоже на оператор объединения с нулевым значением, проверяя, является ли значение нулевым, и добавляет возможность присваивать значение после проверки на нулевое значение.

В приведенном ниже примере показано, как мы будем проверять и присваивать в письменном и сокращенном виде, используя логическое нулевое присваивание:

 // От руки
пусть число = ноль
если (число === ноль) {
  число = 0
}
// сокращение
пусть число = ноль
число ??= 0

В JavaScript есть несколько других сокращений присваивания, например добавление присваивания 9.0007 += , задание умножения *= , задание деления /= , задание остатка %= и некоторые другие. Полный список операторов присваивания можно найти здесь.

Литералы шаблонов

Литералы шаблонов

, представленные как часть мощных функций JavaScript ES6, можно использовать вместо + для объединения нескольких переменных в строке. Чтобы использовать литералы шаблонов, оберните строки в `` , а переменные в ${} в этих строках.

В приведенном ниже примере показано, как использовать литералы шаблонов для интерполяции строк:

 // От руки
константное имя = 'Иби'
const хобби = 'читать'
const fullStr = имя + 'любит' + хобби // 'Иби любит читать'
// Сокращение
константное имя = 'Иби'
const хобби = 'читать'
const fullStr = `${name} любит ${hobby}` // 'Иби любит читать'

Вы также можете использовать литералы шаблонов для создания многострочных строк без использования \n . Например:

 // Сокращение
константное имя = 'Иби'
const хобби = 'читать'
const fullStr = `${name} любит ${hobby}.
Еще она любит писать!`

Использование литералов шаблонов полезно для добавления строк, значения которых могут измениться на большую строку, например шаблоны HTML. Они также полезны для создания многострочных строк, поскольку строки, заключенные в литералы шаблонов, сохраняют все пробелы и отступы.

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

См. пример сокращенного назначения свойства объекта ниже:

 // От руки
постоянный объект = {
  х: 1,
  у: 2,
  я: 3
}
 
 // Сокращение
константа х = 8
константа у = 10
константа obj = {х, у}

Дополнительная цепь

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

Если ключ не существует, значение из необязательной цепочки равно не определено . Это помогает нам избежать ненужных условий проверки if/else при чтении значений из объектов и ненужных try/catch для обработки ошибок, возникающих при попытке доступа к ключам объекта, которые не существуют.

См. пример дополнительной цепочки в действии ниже:

 // От руки
постоянный объект = {
  Икс: {
    у: 1,
    я: 2
  },
  другие: [
    'тест',
    «проверено»
  ]
}
if (obj.hasProperty('others') && other.length >= 2) {
  console.log('2-е значение в других: ', obj.others[1])
}
 
 // Сокращение
постоянный объект = {
  Икс: {
    у: 1,
    я: 2
  },
  другие: [
    'тест',
    «проверено»
  ]
}
console.log('2-е значение в other: ', obj.others?.[1]) // 'проверено'
console.log('3-е значение в других: ', obj.others?.[2]) // не определено

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

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

Более 200 000 разработчиков используют LogRocket для улучшения цифрового взаимодействия

Узнать больше →

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

 // От руки
постоянный объект = {
  Икс: {
    у: 1,
    я: 2
  },
  другое: 'тестовая строка'
}
console.log('Значение z в x: ', obj.x.z)
console.log('Другое значение: ', obj.other)
// Сокращение
постоянный объект = {
  Икс: {
    у: 1,
    я: 2
  },
  другое: 'тестовая строка'
}
const {х, другое} = объект
константа {г} = х
console.log('Значение z в x: ', z)
console.log('Другое значение: ', другое)
Вы также можете переименовать переменные, которые вы деструктурируете из объекта. Вот пример:
константный объект = {х: 1, у: 2}
const {x: myVar} = объект
console.log('Моя переименованная переменная: ', myVar) // Моя переименованная переменная: 1

Оператор спреда

Оператор расширения … используется для доступа к содержимому массивов и объектов. Вы можете использовать оператор расширения для замены функций массива, таких как concat , и объектных функций, таких как object.assign .

Просмотрите приведенные ниже примеры, чтобы увидеть, как оператор расширения может заменить обычные функции массива и объекта:

 // От руки
константа обр = [1, 2, 3]
const bigArr = [4,5,6].concat(arr)
const smallObj = {x: 1}
const otherObj = object.assign(smallObj, {y: 2})
// Сокращение
константа обр = [1, 2, 3]
const bigArr = [...arr, 4, 5, 6]
const smallObj = {x: 1}
const otherObj = {...smallObj, y: 2}

Сокращение цикла объекта

Традиционный синтаксис цикла JavaScript для выглядит следующим образом:

 для (пусть i = 0; i < x; i++) { … }

Мы можем использовать этот синтаксис цикла для перебора массивов, ссылаясь на длину массива для итератора. Существует три сокращения цикла for , которые предлагают различные способы итерации по объекту массива:

  • для… из : Для доступа к записям массива
  • для. .. в : Для доступа к индексам массива и ключам при использовании литерала объекта
  • Array.forEach : Для выполнения операций над элементами массива и их индексами с помощью функции обратного вызова

Обратите внимание, что обратные вызовы Array.forEach имеют три возможных аргумента, которые вызываются в следующем порядке:

  • Элемент массива для текущей итерации
  • Индекс элемента
  • Полная копия массива

В приведенных ниже примерах показаны эти сокращения объектного цикла в действии:

 // От руки
const arr = ['Да', 'Нет', 'Возможно']
for (пусть i = 0; i < arr.length; i++) {
  console.log('Вот элемент: ', arr[i])
}
// Сокращение
const arr = ['Да', 'Нет', 'Возможно']
for (let str of arr) {
  console.log('Вот элемент: ', ул)
}
arr.forEach((str) => {
  console.log('Вот элемент: ', ул)
})
for (пусть индекс в обр) {
  console.log(`Элемент с индексом ${index} равен ${arr[index]}`)
}
// Для литералов объектов
const obj = {а: 1, б: 2, с: 3}
for (пусть ключ в obj) {
  console. log(`Значение ключа ${key} равно ${obj[key]}`)
}

Array.indexOf сокращение с использованием побитового оператора

Мы можем проверить наличие элемента в массиве с помощью метода Array.indexOf . Этот метод возвращает позицию индекса элемента, если он существует в массиве, и возвращает -1 , если это не так.

В JavaScript 0 является ложным значением, тогда как числа меньше или больше 0 считаются истинными. Как правило, это означает, что нам нужно использовать , если… еще , чтобы определить, существует ли элемент, используя возвращаемый индекс.

Использование побитового оператора ~ вместо оператора if…else позволяет нам получить истинное значение для всего, что больше или равно 0 .

В приведенном ниже примере демонстрируется сокращение Array.indexOf с использованием побитового оператора вместо оператора if…else :

 константа обр = [10, 12, 14, 16]
константное реальное число = 10
const поддельное число = 20
const realNumIndex = arr. indexOf(realNum)
const noneNumIndex = arr.indexOf(fakeNum)
// От руки
если (realNumIndex > -1) {
  console.log(realNum, ' существует!')
} иначе если (realNumIndex === -1) {
  console.log(realNum, 'не существует!')
}
если (noneNumIndex > -1) {
  console.log(fakeNum, ' существует!')
} иначе если (noneNumIndex === -1) {
  console.log(fakeNum, 'не существует!')
}
// Сокращение
константа обр = [10, 12, 14, 16]
константное реальное число = 10
const поддельное число = 20
const realNumIndex = arr.indexOf(realNum)
const noneNumIndex = arr.indexOf(fakeNum)
console.log(realNum + (~realNumIndex ? 'существует!' : 'не существует!')
console.log(fakeNum + (~noneNumIndex ? 'существует!' : 'не существует!')

Приведение значений к логическим значениям с помощью

!!

В JavaScript мы можем преобразовать переменные любого типа в логическое значение, используя сокращение !![переменная] .

См. пример использования !! [переменная] сокращение для приведения значений к Boolean :

 // От руки
константа SimpleInt = 3
const intAsBool = логическое значение (simpleInt)
// Сокращение
константа SimpleInt = 3
const intAsBool = !!simpleInt

Выражение стрелочной/лямбда-функции

Функции в JavaScript могут быть написаны с использованием синтаксиса стрелочных функций вместо традиционного выражения, в котором явно используется ключевое слово function . Стрелочные функции похожи на лямбда-функции в других языках.

Взгляните на этот пример записи функции в сокращении с использованием выражения функции стрелки:

 // От руки
функция printStr(str) {
  console.log('Это строка: ', ул)
}
printStr('Девушка!')
// Сокращение
const printStr = (строка) => {
  console.log('Это строка: ', ул)
}
printStr('Девушка!')
// Сокращение TypeScript (указание типа переменной)
const printStr = (строка: строка) => {
  console.log('Это строка: ', ул)
}
printStr('Девушка!')

Неявный возврат с использованием выражений стрелочных функций

В JavaScript мы обычно используем ключевое слово return для возврата значения из функции. Когда мы определяем нашу функцию, используя синтаксис стрелочной функции, мы можем неявно возвращать значение, исключая фигурные скобки {} .

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

 // От руки
функция капитализировать (имя) {
  вернуть name.toUpperCase()
}
функция добавить (numA, numB) {
  вернуть числоA + числоB
}
// Сокращение
const capitalize = (name) => name.toUpperCase()
const add = (numA, numB) => (numA + numB)
// Сокращение TypeScript (указание типа переменной)
const capitalize = (name: string) => name.toUpperCase()
const add = (numA: число, numB: число) => (numA + numB)

Двойной побитовый оператор НЕ

В JavaScript мы обычно получаем доступ к математическим функциям и константам, используя встроенный Математика объект. Вот некоторые из этих функций: Math.floor() , Math.round() , Math.trunc() и многие другие.

Math.trunc() (доступно в ES6) возвращает целую часть. Например, число (числа) перед десятичной дробью данного числа достигает того же результата, используя оператор двойного побитового НЕ ~~ .

Просмотрите приведенный ниже пример, чтобы увидеть, как использовать побитовый оператор НЕ в качестве Math.trunc() сокращение:

 // От руки
константное число = 4,5
const floorNum = Math.trunc(num) // 4
// Сокращение
константное число = 4,5
const floorNum = ~~num // 4

Важно отметить, что оператор двойного побитового НЕ ~~ не является официальным сокращением для Math.trunc , поскольку некоторые пограничные случаи не возвращают тот же результат. Подробнее об этом можно узнать здесь.

Сокращение степени экспоненты

Еще одна математическая функция с полезным сокращением — это число 9.0007 Функция Math.pow() . Альтернативой использованию встроенного объекта Math является сокращение ** .

В приведенном ниже примере демонстрируется сокращение этой степени степени в действии:

 // От руки
const num = Math.pow(3, 4) // 81
// Сокращение
константное число = 3 ** 4 // 81

Сокращение конструктора TypeScript

Существует сокращение для создания класса и присвоения значений свойствам класса через конструктор в TypeScript. При использовании этого метода TypeScript автоматически создаст и установит свойства класса. Это сокращение является эксклюзивным только для TypeScript и недоступно в определениях классов JavaScript.

Взгляните на приведенный ниже пример, чтобы увидеть сокращение конструктора TypeScript в действии:

 // От руки
класс человек {
  личное имя: строка
  публичный возраст: int
  защищенные хобби: строка[]
  конструктор (имя: строка, возраст: int, хобби: строка []) {
    это.имя = имя
    this.age = возраст
    это.хобби = хобби
  }
}
// Сокращение
класс человек {
  конструктор(
    личное имя: строка,
    публичный возраст: int,
    защищенные хобби: строка[]
  ) {}
}

TypeScript удовлетворяет оператору

Оператор satisfies дает некоторую гибкость за счет ограничений установки типа с обработкой ошибок, покрывающей наличие явных типов.

Лучше всего использовать, когда значение имеет несколько возможных типов. Например, это может быть строка или массив; с этим оператором нам не нужно добавлять никаких проверок. Вот пример:

 // От руки
тип Colors = "красный" | "зеленый" | "синий";
type RGB = [красный: число, зеленый: число, синий: число];
константная палитра: Record = {
    красный: [255, 0, 0],
    зеленый: "#00ff00",
    синий: [0, 0, 255]
};
если (тип палитры.красный !== 'строка') {
    console.log(палитра.red.at(0))
}
// сокращение
тип Colors = "красный" | "зеленый" | "синий";
type RGB = [красный: число, зеленый: число, синий: число];
константная палитра = {
    красный: [255, 0, 0],
    зеленый: "#00ff00",
    синий: [0, 0, 255]
} удовлетворяет Record;
console.log(палитра.red.at(0))

В сокращенной версии нашего примера выше нам пришлось выполнить проверку typeof , чтобы убедиться, что Palette.red относится к типу RGB и что мы можем прочитать его первое свойство с по адресу .

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

Метод Array.property.at() , т. е. at() , принимает целое число и возвращает элемент по этому индексу. Array.at требует цели ES2022 , которая доступна начиная с TypeScript v4.6. Более подробная информация доступна здесь.

Заключение

Это лишь некоторые из наиболее часто используемых сокращений JavaScript и TypeScript.

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

Какие ваши любимые сокращения JavaScript или TypeScript? Поделитесь ими с нами в комментариях!

LogRocket: легче отлаживать ошибки JavaScript, понимая контекст

Отладка кода всегда является утомительной задачей.

No related posts.