About Teletype
Join
Будни фронта
@budnifronta
June 14, 2021

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.

JSFiddle

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"
*/
Kodya Temirov
June 14, 2021, 16:30
0 reactions
0 views