10 приемов JS для повышения эффективности
Удобные и полезные методы, позволяющие сократить количество строк кода и ускорить разработку!
В наших повседневных задачах мы можем писать такие функции, как сортировка, поиск, поиск уникальных значений, передача параметров, замена значений и т.д., поэтому здесь я представляю свой список сокращенных методов, чтобы написать все из них как Pro! ✌🏻
JavaScript - действительно отличный язык для изучения и работы. И может быть несколько подходов для достижения одного и того же решения данной проблемы. В этой статье мы обсудим только самые быстрые.
Эти подходы обязательно помогут вам:
- Уменьшение количества строк кода,
- В олимпиадах по программированию,
- В хакатонах или других задачах с ограничением по времени.
Примечание. Все нижеприведенные приемы были протестированы в консоли Google Chrome.
1. Объявление и инициализация массивов
Мы можем инициализировать массив определенного размера значениями по умолчанию, такими как "", nullили 0. Вы могли бы использовать их для одномерного массива, но как насчет инициализации двухмерного массива / матрицы?
const array = Array(5).fill('');
// Вывод: (5) ["", "", "", "", ""]
const matrix = Array(5).fill(0).map(() => Array(5).fill(0));
/*
Вывод:
(5) [Array(5), Array(5), Array(5), Array(5), Array(5)]
0: (5) [0, 0, 0, 0, 0]
1: (5) [0, 0, 0, 0, 0]
2: (5) [0, 0, 0, 0, 0]
3: (5) [0, 0, 0, 0, 0]
4: (5) [0, 0, 0, 0, 0]
length: 5
*/2. Узнайте сумму, минимальное и максимальное значение
Мы должны использовать reduceметод, чтобы быстро находить основные математические операции.
const array = [5,4,7,8,9,2];
Сумма
const array = [5, 4, 7, 8, 9, 2]; array.reduce((a, b) => a + b);// Вывод: 35
Максимум
const array = [5, 4, 7, 8, 9, 2]; array.reduce((a,b) => a > b ? a : b); // Вывод: 9
Минимум
const array = [5, 4, 7, 8, 9, 2]; array.reduce((a, b) => a < b ? a : b); // Вывод: 2
Конечно для минимума и максимума есть и функции Math.min и Math.max, не забываем о них.
3. Сортировка массива строк, чисел или объектов
У нас есть встроенные методы sort()и reverse()для сортировки строк, но как насчет чисел или массива объектов?
Давайте также рассмотрим способы сортировки чисел и объектов в порядке возрастания и убывания.
Сортировка массива строк
const stringArr = ["Joe", "Kapil", "Steve", "Musk"] stringArr.sort(); // Вывод: (4) ["Joe", "Kapil", "Musk", "Steve"] stringArr.reverse(); // Вывод: (4) ["Steve", "Musk", "Kapil", "Joe"]
Сортировка числового массива
const array = [40, 100, 1, 5, 25, 10]; array.sort((a,b) => a - b); // Вывод: (6) [1, 5, 10, 25, 40, 100] array.sort((a,b) => b - a); // Вывод: (6) [100, 40, 25, 10, 5, 1]
Сортировка массива объектов
const objectArr = [
{ firstName: 'Lazslo', lastName: 'Jamf' },
{ firstName: 'Pig', lastName: 'Bodine' },
{ firstName: 'Pirate', lastName: 'Prentice' },
];
objectArr.sort((a, b) => a.lastName.localeCompare(b.lastName));
/*
Вывод:
(3) [{…}, {…}, {…}]
0: {firstName: "Pig", lastName: "Bodine"}
1: {firstName: "Lazslo", lastName: "Jamf"}
2: {firstName: "Pirate", lastName: "Prentice"}
length: 3
*/4. Вам когда-нибудь приходилось отфильтровывать ложные значения из массива?
Falsy значения - это 0, undefined, null, false, "", '', NaN можно легко отфильтровать через функцию Boolean
const array = [3, 0, 6, 7, '', false, NaN]; array.filter(Boolean); // Вывод: (3) [3, 6, 7]
5. Используйте логические операторы для различных условий
Если вы хотите уменьшить количество вложенных if и else или переключать регистры, вы можете просто поиграть с базовыми логическими операторами AND/OR.
6. Удалите повторяющиеся значения
Возможно, вы использовали indexOf()цикл for, который возвращает первый найденный индекс, или более новый, includes()который возвращает логическое значение true / false из массива для поиска / удаления дубликатов. Вот у нас есть 2 более быстрых подхода.
const array = [5, 4, 7, 8, 9, 2, 7, 5]; array.filter((item, idx, arr) => arr.indexOf(item) === idx); // или лучше: const nonUnique = [...new Set(array)]; // Вывод: (6) [5, 4, 7, 8, 9, 2]
7. Создайте объект или карту счетчика
В большинстве случаев требуется решить проблему путем создания объекта счетчика или карты, которая отслеживает переменные как ключи с их частотой / вхождениями в качестве значений.
let string = 'kapilalipak';
const table = {};
for (let char of string) {
table[char] = table[char] + 1 || 1;
}
console.log(table);
// Вывод: {k: 2, a: 3, p: 2, i: 2, l: 2}
и
let string = 'kapilalipak';
const countMap = new Map();
for (let i = 0; i < string.length; i++) {
countMap.set(string[i], countMap.get(string[i]) + 1 || 1)
}
console.log(countMap);
// Вывод: Map(5) {"k" => 2, "a" => 3, "p" => 2, "i" => 2, "l" => 2}8. Тернарный оператор - это круто?
Вы можете избежать вложенных условных операторов if...elseif...elseif с помощью тернарных операторов.
function fever(temp) {
return temp > 97 ? 'Visit Doctor!'
: temp < 97 ? 'Go Out and Play!!'
: temp === 97 ? 'Take Some Rest!';
}
/*
Вывод:
fever(97): "Take Some Rest!"
fever(100): "Visit Doctor!"
*/9. Краткое сравнение циклов:
for и for..in получают индекс, элемент можно получить через arr[index].
for...in пройдет по всем перечисляемым свойствам, по свойствам прототипа в том числе, поэтому избегайте его, для перебора массива в особенности.
forEach, for..of получают непосредственно элемент, в forEach также можно получить и индекс, а for..of - нет, однако есть лайфхак с использованием Object.entries:
const arr = [5, 10, 15];
for (const [idx, val] of Object.entries(arr)) {
console.log(`Индекс: ${idx}, значение: ${val}`);
}
/*
Вывод:
Индекс: 0, значение: 5
Индекс: 1, значение: 10
Индекс: 2, значение: 15
*/Стоит учесть также что циклы for и for..of учитывают дыры в массиве, а for..in и forEach - нет.
10. Слияние двух объектов
Часто в повседневных задачах нам нужно объединить несколько объектов.
const user = {
name: 'Kapil Raghuwanshi',
gender: 'Male',
};
const college = {
primary: 'Mani Primary School',
secondary: 'Lass Secondary School',
};
const skills = {
programming: 'Extreme',
swimming: 'Average',
sleeping: 'Pro',
};
const summary = {...user, ...college, ...skills};
/*
Вывод:
gender: "Male"
name: "Kapil Raghuwanshi"
primary: "Mani Primary School"
programming: "Extreme"
secondary: "Lass Secondary School"
sleeping: "Pro"
swimming: "Average"
*/