Эту статью
действительно стоит прочитать любому разработчику JavaScript.
Я написал ее как справочник для обучения сокращенным методам кодирования
JavaScript, о которых я узнал за свои годы опыта. Для того что бы помочь вам
понять что происходит, я включил также длинные версии кода, что бы понять все
детали.
1. Тернарный
оператор
Этот код позволяет писать вам
более лаконичные выражения if-else и
помещать их в одну строку.
Обычный вариант:
const x = 20;
let big;
if (x > 10) {
big = true;
} else {
big = false;
}
Сокращенный вариант:
const big
= x > 10 ? true : false;
Вы также можете вложить одно такое выражение в другое:
const big
= x > 10 ? "
greater 10" : x < 5 ? "less
5" : "between 5 and 10";
2. Вычисление
условий
Когда мы устанавливаем значение
перенменной как значение другой переменной, вы должны убедится что источник не null и
не пустой. Вы можете написать длиное выражение с множественными условиями для
проверки этого, иои использовать сокращенную версию.
Обычный вариант:
if (variable1
!== null ||
variable1 !== undefined || variable1 !== '') {
let variable2 = variable1;
}
Сокращенный вариант:
const
variable2 = variable1 || 'new';
Не верите? Проверьте сами (вставте этот код в es6console):
let
variable1;
let
variable2 = variable1 || '';
console.log(variable2
=== ''); // prints true
variable1 = 'foo';
variable2 =
variable1 || '';
console.log(variable2); //
prints foo
3. Объявление
переменных
Хорошей практикой является
объявление переменных вначале функции. Сокращенная весрия позволит сохранить
много времени и места если вы будете объявлять много переменных за один раз.
Обычный вариант:
let x;
let y;
let z = 3;
Сокращенный вариант:
let x, y, z=3;
4. Присутствие if
Это может показаться
тривиальным, но все таки стоит обратить внимание. Когда вы пользуетесь if, иногда
оператор сравнения может быть опущен.
Обычный вариант:
if (likeJavaScript
=== true)
Сокращенный вариант:
if (likeJavaScript)
Вот другой пример. Если
“a” НЕ true,
до делаем что-то.
Обычная версия:
let a;
if ( a !== true ) {
// что-то делаем...
}
Скоращенная версия:
let a;
if ( !a ) {
// что-то делаем...
}
5. Циклы в JavaScript
Этот маленький совет
действительно полезен, если вы хотите использовать обычный JavaScript и
не полагаетесь на внешние библиотеки, такие как jQuery или lodash.
Обычная версия:
for (let i = 0; i <
allImgs.length; i++)
Сокращенная версия:
for (let
index in allImgs)
Сокращенная версия для Array.forEach:
function logArrayElements(element,
index, array) {
console.log("a[" +
index + "] = " +
element);
}
[2, 5, 9].forEach(logArrayElements);
// logs:
// a[0] = 2
// a[1] = 5
// a[2] = 9
6. Упрощения
Вместо того что бы писать шесть
строк кода для того что бы установить значение по умолчанию если требуемые
параметр пустой, можно просто использовать для сокращения логический оператор и
выполнять ту же логику одной строчкой.
Обычный вариант:
let
dbHost;
if (process.env.DB_HOST) {
dbHost = process.env.DB_HOST;
} else {
dbHost = 'localhost';
}
Сокращенный вариант:
const
dbHost = process.env.DB_HOST
|| 'localhost';
7. Экспоненты
десятичной базы
Вы возможно видели
такой способ. Это замечательный способ писать большие числа без большого
количества нулей. Например 1е7 значит 1 за которым следует семь нулей. Число
представленно в десятичной системе (которую JavaScript интерпретирует
как плавающий тип) и эквивалентно 10,000,000.
Обычный вариант:
for (let i = 0; i < 100000; i++) {}
Сокращенный вариант:
for (let i = 0; i < 1e5; i++) {}
// Все выражения истинны
1e0 === 1;
1e1 === 10;
1e2 === 100;
1e3 === 1000;
1e4 === 10000;
1e5 === 100000;
8. Сокращения
для свойств объекта
Литералы объявления объектов в
JavaScript делают
нашу жизнь проще. ES6
обеспечивает еще более простой
способ управления свйствами объекта. Если имя свойства такое же как и его
значение, вы можете ипользовать упрощенную нотацию.
Обычный вариант:
const obj = { x:x, y:y };
Сокращенный вариант:
const obj = { x, y };
9. Сокращения
для функций стрелок.
Классические функции удобны
для чтения и написания в простой форме, но когда они становятся многословными и
более сложными, то вы начиаете их помещать в вызовы вложенных функций.
Обычный вариант:
function sayHello(name) {
console.log('Hello',
name);
}
setTimeout(function() {
console.log('Loaded')
}, 2000);
list.forEach(function(item) {
console.log(item);
});
Сокращенный вариант:
sayHello =
name => console.log('Hello',
name);
setTimeout(() =>
console.log('Loaded'), 2000);
list.forEach(item
=> console.log(item));
10. Сокращения
для неявно возвращаемого значения
Return – это ключевое
слово для возврата финального результата фунции. Функции стрелки с однострочным
выражением неявно вернут результат вычислений (у функции должны быть опущены фигурные
скобки тела для того что бы можно было не указывать return).
Для возврата многострочного
выражения (такого как объект), необходимо использовать круглые скобки вместо
фигурных, и обернуть ими тело функции. Это позволит коду выполнится как одно
выражение.
Обычный вариант:
function calcCircumference(diameter) {
return Math.PI *
diameter
}
Сокращенный вариант:
calcCircumference =
diameter => (
Math.PI *
diameter;
)
11 Значения по
умолчанию для параметров
Вы можете использовать
выражение if для
того что бы определить значение по умолчанию для параметров функции. В ES6 вы можете
определить параметры по умолчанию непостредственно в объявлении функции.
Обычный вариант:
function volume(l, w, h) {
if (w === undefined)
w = 3;
if (h === undefined)
h = 4;
return l * w * h;
}
Сокращенный вариант:
volume = (l, w = 3, h = 4 ) => (l * w * h);
volume(2) //output:
24
12. Литералы
шаблонов
А вы не пробовали использовать
+ для объединения переменных в строку? Неужто нету более простого способа
сделать это? Если вы можете использовать ES6, то вам повезло. Все что нужно использовать кавычки
и выражение ${} в которое нужно добавить ваши переменные.
Обычный вариант:
const welcome = 'You have logged in as ' + first
+ ' ' + last + '.'
const db = 'http://' +
host + ':' + port + '/' +
database;
Сокращенный вариант:
const
welcome = `You have logged in as ${first} ${last}`;
const db = `http://${host}:${port}/${database}`;
13. Удаление
присваиваний
Если вы работаете с любым
популярным фреймворком, то есть болшой шанс, что вы используете массивы или
данные в форме объектов, для того что бы передавать информацию между компонентами
и API. Как только
данные доберутся до компонента, вам нужно их распаковать.
Обычный вариант:
const
observable = require('mobx/observable');
const
action = require('mobx/action');
const
runInAction = require('mobx/runInAction');
const
store = this.props.store;
const
form = this.props.form;
const
loading = this.props.loading;
const
errors = this.props.errors;
const
entity = this.props.entity;
Сокращенный вариант:
import {
observable, action, runInAction } from 'mobx';
const {
store, form, loading,
errors, entity } = this.props;
Вы можете даже присвоить свои собственные имена:
const {
store, form, loading,
errors, entity:contact } = this.props;
14. Сокращения
для многострочного текста.
Если вам доводилось писать многострочный текст, то
это может вам помочь:
Обычный вариант:
const
lorem = 'Lorem ipsum dolor sit amet, consectetur\n\t'
+ 'adipisicing elit, sed do eiusmod tempor incididunt\n\t'
+ 'ut labore et dolore magna aliqua. Ut enim ad minim\n\t'
+ 'veniam, quis nostrud exercitation ullamco laboris\n\t'
+ 'nisi ut aliquip ex ea commodo consequat. Duis aute\n\t'
+ 'irure dolor in reprehenderit in voluptate velit esse.\n\t'
Но есть и более простой вариант – использовать кавычки.
Сокращенный вариант:
const
lorem = `Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse.`
15. Оператор
расширения
Оператор расширения (spread operator) появился в ES6, его можно
использовать в нескольких случаях для того что бы сделать код более удобным для
использования. Он может быть использован для того что бы заместить функции
массива. Оператор расширения это просто серия из трех точек.
Обычная вариант
// объединение массивов
const odd
= [1, 3, 5];
const
nums = [2 ,4 , 6].concat(odd);
// клонирование массивов
const arr
= [1, 2, 3, 4];
const
arr2 = arr.slice()
Сокращенный вариант:
// объединение массивов
const odd
= [1, 3, 5 ];
const
nums = [2 ,4 , 6, ...odd];
console.log(nums); //
[ 2, 4, 6, 1, 3, 5 ]
// клонирование массивов
const arr
= [1, 2, 3, 4];
const
arr2 = [...arr];
В отличие от функции concat(), вы можете использовать оператор расширения для
того что бы вставить другой массив в люое место вашего массива.
const odd
= [1, 3, 5 ];
const
nums = [2, ...odd, 4 , 6];
Вы также можете комбинировать оператор расширения с
нотацией удаления:
const { a, b, ...z } = { a: 1, b: 2, c: 3, d: 4 };
console.log(a) //
1
console.log(b) //
2
console.log(z) //
{ c: 3, d: 4 }
16. Сокращения
для обязательного параметра
По умолчанию, JavaScript установит
undefined
для тех параметров, которые не былі указаны в вызове. Нектороые другие языки в
таких случаях бросают ошибку или предупреждение. Для того что бы принудить
указать параметр, вы можете использовать if для того что бы
бросить ошибку в случае есть параметр неопределен, или же можете использовать
прием показанный ниже:
Обычный вариант:
function foo(bar) {
if(bar ===
undefined) {
throw new
Error('Missing parameter!');
}
return bar;
}
Сокращенный вариант:
mandatory = () => {
throw new
Error('Missing parameter!');
}
foo = (bar = mandatory()) => {
return bar;
}
17. Сокращения для Array.find
Если вы когда-нибудь
занимались написанием функции поиска на чистом JavaScript, то вероятно использовали цикл. В ES6 была добавлена
новая встроеная функция поиска.
Обычный вариант:
const
pets = [
{ type: 'Dog',
name: 'Max'},
{ type: 'Cat',
name: 'Karl'},
{ type: 'Dog',
name: 'Tommy'},
]
function findDog(name) {
for(let i = 0; i<pets.length; ++i) {
if(pets[i].type
=== 'Dog' &&
pets[i].name ===
name) {
return pets[i];
}
}
}
Сокращенный вариант:
pet =
pets.find(pet => pet.type
==='Dog' && pet.name
=== 'Tommy');
console.log(pet); //
{ type: 'Dog', name: 'Tommy' }
18 Сокращение Object [key]
Вы знаете что Foo.bar может
быть написан как Foo['bar']? Во первых нет
ни одной причины почему так нельзя писать. Однако такая нотация позволяет
писать код который потом можно использовать повторно.
Рассмотрим простейший пример функции валидации:
function validate(values) {
if(!values.first)
return false;
if(!values.last)
return false;
return true;
}
console.log(validate({first:'Bruce',last:'Wayne'})); //
true
Эта функция отлично делает
свою работу. Однако давайте рассмотрим случай, когда у нас слишком много форм,
для которых нужно сделать валидацию для разных полей и правил. Не было бы
здорово сделать нашу функцию более гибкой, которую можно конфигурировать в
процессе выполнения.
Сокращенный вариант:
// правила валидации объекта
const
schema = {
first: {
required:true
},
last: {
required:true
}
}
// универсальная функция валидации
const
validate = (schema, values) => {
for(field in schema) {
if(schema[field].required) {
if(!values[field]) {
return false;
}
}
}
return true;
}
console.log(validate(schema, {first:'Bruce'})); //
false
console.log(validate(schema, {first:'Bruce',last:'Wayne'})); //
true
Теперь у нас есть функция
валидации, которую можно использовать повторно для всех форм без необходимость
переписывать код.
19. Сокращения для двойного битового отрицания
Битовые операции - это то что всегда учат новички, но потом как
правиль нигде не используют. Кто же хочеть работать с нулями и единицами, если
вы не работаете с бинарными данными?
Но есть пожалуй одно очень
практическое применение оператора двойного битового отрицания. Вы можете
использовать его вместо Math.floor(). Преимуществом такого использования будет более
высокая скорость выполнения. Вы можете почитать подробнее о битовых операциях здесь.
Обычный вариант:
Math.floor(4.9) === 4 //true
Сокращенный вариант:
~~4.9 === 4 //true
20. Предложите
еще?
Мне действительно хочеться
узнать о новых методах, поэтому оставляйте их в своих коментариях.
