Восемь продвинутых JavaScript трюков для оптимизации кода

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

Содержание

1. Функциональное наследование
2. Сопоставление массивов без .map()
3. Преобразование числа в строку и строки в число
4. Изменение длины массива или его удаление
5. Обмен значениями переменных с помощью деструктуризации
6. Удаление дублей из массива
7. Упрощение цикла for
8. Определение времени выполнения скрипта
Заключение

1. Функциональное наследование

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

// Базовая функция
function Drinks(data) {
var that = {}; // Создаем пустой объект
that.name = data.name; // Добавляем свойство "name"
return that; // Возвращаем объект
};

// Функция, которая наследуется от базовой функции
function Coffee(data) {
var that = Drinks(data); // Наследуем функциональность
that.giveName = function() {
return 'This is ' + that.name;
};
return that;
};

// Пример использования
var firstCoffee = Coffee({ name: 'Cappuccino' });
console.log(firstCoffee.giveName());
// Результат: "This is Cappuccino"

2. Сопоставление массивов без .map()

Метод .map() часто используется для преобразования массивов. Но есть и другой способ — метод Array.from(), который

let dogs = [
{ name: 'Rio', age: 2 },
{ name: 'Mac', age: 3 },
{ name: 'Bruno', age: 5 },
{ name: 'Jucas', age: 10 },
{ name: 'Furr', age: 8 },
{ name: 'Blu', age: 7 },
]

let dogsNames = Array.from(dogs, ({name}) => name);
console.log(dogsNames);
// Результат: ["Rio", "Mac", "Bruno", "Jucas", "Furr", "Blu"]

3. Преобразование числа в строку и строки в число

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

let num = 15;
let numString = num + ""; // Число в строку
let stringNum = +numString; // Строка в число

4. Изменение длины массива или его удаление

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

let array_values = [1, 2, 3, 4, 5, 6, 7, 8];
array_values.length = 5;
console.log(array_values);
// Результат: [1, 2, 3, 4, 5]

array_values.length = 0;
console.log(array_values);
// Результат: []

5. Обмен значениями переменных с помощью деструктуризации

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

let a = 1, b = 2;
[a, b] = [b, a];
console.log(a); // Результат: 2
console.log(b); // Результат: 1

6. Удаление дублей из массива

Удалить дубли из массива можно всего одной строкой кода, используя Set:

const array = [1, 3, 2, 3, 2, 1, true, false, true, 'Kio', 2, 3];
const filteredArray = [...new Set(array)];
console.log(filteredArray)
// Результат: [1, 3, 2, true, false, "Kio"]

7. Упрощение цикла for

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

const names = ["Kio", "Rio", "Mac"];

// Короткий вариант
for (let name of names) console.log(name);

8. Определение времени выполнения скрипта

JavaScript предоставляет простой способ измерить время выполнения кода:

const startTime = performance.now();
// Ваш код
const endTime = performance.now();

console.log(`Выполнение кода заняло ${endTime - startTime} миллисекунд.`);

Заключение

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