5 изящных способов написать более лаконичный и производительный код в js.

Автор: admin

Дата: 13.09.2020 07:25

Фильтр уникальных значений

Тип объекта Set был введен в ES6, его можно использовать для создания нового массива только с уникальными значениями.

const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]

До ES6 для выделения уникальных значений требовалось гораздо больше кода! Этот трюк работает для массивов, содержащих примитивные типы: undefined, null, boolean, string и number. (Если бы у вас был массив, содержащий объекты, функции или дополнительные массивы, вам понадобился бы другой подход!)

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

УСЛОВИЯ Тернарный оператор - это быстрый способ написать простые (а иногда и не очень простые) условные операторы, например:

х> 100? «> 100»: «< 100»;
х> 100? (x> 200? '> 200': 'Между 100-200'): '< 100';

Но иногда даже тернарный оператор оказывается сложнее, чем необходимо. Вместо этого мы можем использовать «и» && и «или» || логические операторы для еще более краткой оценки определенных выражений. Это часто называют «коротким замыканием» или «оценкой короткого замыкания». Как это устроено Допустим, мы хотим вернуть только один из двух или более вариантов. Использование && вернет первое ложное или «ложное» значение. Если каждый операнд имеет значение true, будет возвращено последнее вычисленное выражение.

let one = 1, two = 2, three = 3;
console.log (one && two && three); // Результат: 3
console.log (0 && null); // Результат: 0

Использование || вернет первое истинное или «правдивое» значение. Если каждый операнд оценивается как ложь, будет возвращено последнее вычисленное выражение.

let one = 1, two = 2, three = 3;
console.log(one || two || three); // Результат: 1
console.log(0 || null); // Результат: null

Пример 1 Допустим, мы хотим вернуть длину переменной, но не знаем ее тип. Мы могли бы использовать оператор if / else, чтобы проверить, является ли foo допустимым типом, но это может оказаться довольно длинным. Оценка короткого замыкания позволяет нам сделать это вместо этого:

return (foo || []).length;`

Если переменная foo истинна, она будет возвращена. В противном случае будет возвращена длина пустого массива: 0.

Пример 2 Были ли у вас проблемы с доступом к свойству вложенного объекта? Вы можете не знать, существует ли объект или одно из вспомогательных свойств, и это может вызвать неприятные ошибки. Допустим, мы хотели получить доступ к свойству с именем data в this.state, но данные не определены до тех пор, пока наша программа успешно не вернет запрос на выборку. В зависимости от того, где мы его используем, вызов this.state.data может помешать запуску нашего приложения. Чтобы обойти это, мы могли бы обернуть это условным выражением:

if (this.state.data) {
  вернуть this.state.data;
} else {
  return 'Fetching Data';
}

Но это кажется довольно повторяющимся. Оператор «or» дает более краткое решение:

return (this.state.data || ''Fetching Data'');

Мы не можем реорганизовать приведенный выше код для использования &&. Оператор «'Fetching Data» && this.state.data вернет this.state.data независимо от того, не определено ли оно. Это связано с тем, что «'Fetching Data» является «правдивым», и поэтому && всегда будет пропускать его, если он указан первым.

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

В настоящее время предлагается разрешить «необязательную цепочку» при попытке вернуть свойство глубоко в древовидной структуре. Под знаком вопроса ? может использоваться для извлечения свойства, только если оно не равно нулю. Например, мы могли бы реорганизовать наш пример выше до

    this.state.data?.()

Таким образом возвращая данные, только если они не равны нулю. Или, если бы нас в основном беспокоило, определено ли состояние или нет, мы могли бы вернуть

this.state?.Data

Преобразовать в логическое значение

ПРЕОБРАЗОВАНИЕ ТИПА Помимо обычных логических значений true и false, JavaScript также обрабатывает все остальные значения как «true» или «false». Если не указано иное, все значения в JavaScript являются «true», за исключением 0, «», null, undefined, NaN и, конечно же, false, которые являются «false». Мы можем легко переключаться между истиной и ложью, используя отрицательный оператор! , который также преобразует тип в "boolean".

const isTrue =!0;
const isFalse =!1;
const alsoFalse = !!0;
console.log (isTrue); // Результат: true
console.log (typeof true); // Результат: "boolean"

Преобразовать в строку

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

const val = 1 + "";
console.log(val); // Результат: «1»
console.log(typeof val); // Результат: «string»

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

int = "15";
int = + int;
console.log(int); // Результат: 15
console.log(typeof int);// Результат: «number»

Это также можно использовать для преобразования логических значений в числа, как показано ниже:

console.log (+true); // Возврат: 1
console.log (+false); // Возврат: 0

Могут быть контексты, в которых знак + будет интерпретироваться как оператор конкатенации, а не как оператор сложения. Когда это произойдет (и вы хотите вернуть целое число, а не число с плавающей запятой), вы можете вместо этого использовать две тильды:~~. Тильда, известная как «побитовый оператор НЕ», является оператором, эквивалентным -n - 1. Так, например, ~ 15 равно -16. Использование двух тильд в строке фактически отменяет операцию, потому что - (- n - 1) - 1 = n + 1 - 1 = n. Другими словами, ~ - 16 равно 15.

const int = ~~ "15"
console.log (int); // Результат: 15
console.log (typeof int); Результат: «number»