Девять must-know JavaScript приемов (с примерами кода)

Согласно исследованию RedMonk, JavaScript занимает первое место в рейтинге популярности языков программирования. Исследование, проведенное SlashData показывает, что около 12.4 миллиона разработчиков регулярно используют JS (в это число включены разработчики, использующие CoffeeScript и TypeScript).

Мы собрали 10 небольших практик – используйте их, чтобы сделать код чище, улучшить производительность и программировать быстрее.

1. Используйте логические операторы для сокращения условий

JavaScript позволяет сокращать условия с помощью логических операторов. Если условие простое, вы можете заменить блок if-else на краткую запись с использованием && или ||.

Пример использования оператора && (логическое И):

// вместо
if (accessible) {
  console.log(“It’s open!”);
}

// пишите
accessible && console.log(“It’s open!”);

Пример использования оператора || (логическое ИЛИ):

// вместо
if (price.data) {
  return price.data;
} else {
  return 'Getting the price’';
}
// пишите
return (price.data || 'Getting the price');

2. Берите целую часть от числа с помощью оператора ~~

Брать целую часть от числа можно с помощью math.floor, но это менее производительно. Самый эффективный способ – использовать оператор ~~

// instead of
math.round(math.random*50)
// use
~~(math.random*50)

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

~~('whitedress') // returns 0
~~(NaN) // returns 0

3. Меняйте размер массива (или удаляйте все элементы массива) с помощью Array.length

Самый эффективный способ изменения размера массива – с помощью свойства array.length

array.length = n
let array = [a, b, c, d, e, f, g, h, i , j];
console.log(array.length); // returns the length as 10
array.length = 4;
console.log(array.length); // returns the length as 4
console.log(array); // returns “a,b,c,d”

Array.length можно использовать и для того, чтобы удалить все элементы массива:

let array = [a, b, c, d, e, f, g, h, i , j];
array.length = 0;
console.log(array.length); // returns the length as 0
console.log(array);

4. Объединяйте массивы с максимальной производительностью

Объединение массивов (особенно с большими объемами данных) может серьезно ударить по производительности.

Чтобы сделать это с наименьшими потерями – используйте методы array.concat() и array.push.apply(arr1, arr2).

Ваш выбор должен зависеть от размера массивов.

Пример для массивов небольшого размера:

let list1 = [a, b, c, d, e];
let list2 = [f, g, h, i, j];
console.log(list1.concat(list2)); // возвращает новый массив с объединенными значениями list1 и list2 (a, b, c, d, e,f, g, h, i, j)

array.concat() создает новый массив, куда попадают значения объединяемых массивов. Использовать его для массивов большого размера – дорого (под новый массив выделяется много памяти). Если вам не нужен новый массив, вместо array.concat() используйте array.push.apply(arr1, arr2), который добавит элементы массива из второго аргумента к элементам массива из первого.

Пример для массивов большого размера:

let list1 = [a, b, c, d, e];
let list2 = [f, g, h, i, j];
console.log(list1.push.apply(list1, list2)); // возвращает объединенный массив (a, b, c, d, e,f, g, h, i, j)

5. Фильтруйте массивы

Фильтрация используется очень часто, например, чтобы получить из массива сет данных по определенному признаку. Для фильтрации используется метод filter:

const cars = [
  { make: 'Opel', class: 'Regular' },
  { make: 'Bugatti', class: 'Supercar' },
  { make: 'Ferrari', class: 'Supercar' },
  { make: 'Ford', class: 'Regular' },
  { make: 'Honda', class: 'Regular' },
]
const supercar = cars.filter(h => h.class === 'Supercar');
console.table(supercar); // returns the supercar class data in a table format

Метод filter() в качестве аргумента функцию фильтрации – она будет вызвана для каждого элемента массива и должна вернуть true (если элемент удовлетворяет условиям фильтра) или false (если нет).

Передавая в качестве аргумента Boolean, можно вернуть из массива все null и undefined – значения.

cars.filter(Boolean)

6. Находите уникальные значения массива

Предположим у вас есть массив значений, некоторые из значений которого могут повторяться. Нужно создать второй массив, содержащий уникальные элементы первого. Элегантное решение – использовать spread вместе с типом Set. Такой прием сработает как для чисел, так и для строковых значений:

Пример:

const cars = ['Opel', 'Bugatti', 'Opel', 'Ferrari', 'Ferrari', 'Opel'];
let unrepeated_cars = [...new Set(cars)];
console.log(unrepeated_cars); // возвращает Opel, Bugatti, Ferrari

7. Кэшируйте регулярно используемые переменные

Если вам приходится работать с большим DOM-деревом и обращаться к одним и тем же элементам с помощью getElementById() или getElementByClassName(), JavaScript пробегается по элементам дерева в поиске нужного. В случае больших деревьев, это может снизить производительность.

Вы можете увеличить производительность, просто записав элемент в переменную и работать уже с ней.

let carSerial = serials.getElementById('serial1234');
carSerial.addClass('cached-serial1234');

8. Проверяйте объекты на наличие свойств

Быстрый и удобный способ проверить, пустой ли объект – функция Object.keys()

Пример:

Object.keys(objectName).length // возвращает число ключей объекта (вернет 0 если объект пустой)

9. Минифицируйте ваши JS файлы

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

Минификация не имеет отношение к коду, но знать о ней обязан каждый JS-разработчик. Есть несколько инструментов, которые минифицируют JS-файлы.

Первый – Google Closure Compiler

Второй – Microsoft Ajax Minifier

Оба парсят ваш JS-код, анализируют его на предмет “мертвого” кода (кода, который не вызывается), заменяют имена переменных на более короткий и минифицируют то, что осталось.

Leave a Comment

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Scroll to Top