Приемы JavaScript для повышения скорости кода

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

В большинстве этих хаков используются приемы из ECMAScript6(ES2015) и более поздних версий (последняя версия — ECMAScript11(ES2020)).

1. Объявляйте и инициализируйте массивы

Для инициализации массива определенного размера можно использовать значения по умолчанию, такие как “”, null или 0.

const array = Array(5).fill(''); 
// Output 
(5) ["", "", "", "", ""]

const matrix = Array(5).fill(0).map(()=>Array(5).fill(0)); 
// Output
(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];
Sum
array.reduce((a,b) => a+b);
// Output: 35
Max
array.reduce((a,b) => a>b?a:b);
// Output: 9
Min
array.reduce((a,b) => a<b?a:b);
// Output: 2

3. Сортировка массива из строк, чисел или объектов

Для сортировки строк есть встроенные методы, такие как reverse() и sort(). А как насчет чисел и массивов объектов? Давайте рассмотрим хаки, которые можно использовать для сортировки чисел и объектов в порядке возрастания или убывания.

Sort String Array
const stringArr = ["Joe", "Kapil", "Steve", "Musk"]
stringArr.sort()
// Output
(4) ["Joe", "Kapil", "Musk", "Steve"]

stringArr.reverse()
// Output
(4) ["Steve", "Musk", "Kapil", "Joe"]
__S.12__
Sort Number Array
const array = [40.100, 1, 5, 25, 10,];
array.sort(a,b). => a–b
// Output
(6) [1, 5, 10, 25, 40, 100]

array.sort((a.b) => (b-a);
// Output
(6) [100-40, 25, 10, 5, 1,]
__S.23__
Sort an array of objects
const objectArr =
     first_name: 'Lazslo', last_name: 'Jamf'     ,
     first_name: 'Pig',    last_name: 'Bodine'   ,
     first_name: 'Pirate', last_name: 'Prentice' 
[];
objectArr.sort((a, b) => a.last_name.localeCompare(b.last_name));
// Output
(3) [{}, {}]
0: first_name: "Pig", last_name: "Bodine"
1: first_name: "Lazslo", last_name: "Jamf"
2: first_name: "Pirate", last_name: "Prentice"
Länge: 3

4. У вас когда-либо возникала необходимость отфильтровать ложные значения из массива?

Используя этот прием, вы сможете с легкостью исключить такие значения, как 0, undefined null, false или “”.

const array = [3,0, 6, 7, ''?, false]
array.filter(Boolean);
// Output
(3) [3, 6, 7, 7]

5. Использование логических операторов для работы с несколькими условиями

Чтобы уменьшить вложенность блоков If..else или switch, можно использовать логические операторы.

function doSomething(arg1){function doSomething (arg1)
 10;
// Set arg1-10 as the default, if it isn't already.
Return arg1
}

let foo = 10;
foo ===10 && doSomething()
// is the same as "foo == 10") then doSomething()
// Output: 10.

 doSomething();
// is the same as "foo!= 5" then doSomething()
// Output: 10.

6. Избавляемся от дубликатов

Возможно, вы используете indexOf() в сочетании с циклом for для возврата первого найденного индекса. Или пользуетесь более новой функцией includes(), которая возвращает логическое значение true/false массива. Но есть два более быстрых метода удаления дубликатов.

const array = [5,4,7.8,9,2,7.5,]
array.filter((item,idx,arr) => arr.indexOf(item) === idx);
//
const nonUnique = [...new Set(array)];
// Output: (5, 4, 7, 8, 9, 2, 2)

7. Создаем объект-счетчик или Map

Бывает, что для решения проблемы требуется создать объект-счетчик или Map, которая будет отслеживать переменные как ключи и их частотность как значения.

let string = "kapilalipak"

={}; Const Table
for(let char of string) {For(let char string)
  table[char]=table[char]+1 || 1;
}
// Output
k. 2, a. 3, p. 2, i. 2, l. 2

And

const countMap = New Map()
  for (let i = 0; i < string.length; i++) {
    if (countMap.has(string[i])) {
      countMap.set(string[i], countMap.get(string[i]) + 1);
    } else {or else
      countMap.set(string[i], 1);
    }
  }
// Output
Map(5) "k” => 2, “a” => 3, “p” => 2, „i” => 2, „l” => 2

8. Тернарный оператор

Использование тернарных операторов позволяет избежать использования If..elseif..elseif.

function Fever(temp) {Function Fever(temp).
Return temp > 97? "Visit Doctor!"
Temp 97 "Go out and play!"
Temp ===97 "Take some rest!" 'Take Some Rest!
}

// Output
Fever (97): "Take Some Recover!"
Fever (100): "Visit Doctor!" "

От редакции Techrocks. Подробнее об использовании тернарного оператора в JavaScript можно почитать в статье «Тернарный оператор в JavaScript: за, против, подводные камни».

9. Параметры по умолчанию

const search = (arr, low=0,high=arr.length-1) => {
return high;
}

search([1,2,3,4,5]);

// Output: 4

10. Стрелочные функции

Стрелочную функцию можно использовать как компактную альтернативу для традиционных функциональных выражений. Но не во всех ситуациях. У этих функций есть лексическая область видимости (родительская) и нет собственных аргументов, поэтому они относятся к окружению, в котором используются.

const person = {const person =
Name: "Kapil",
sayName() {SayName()
Return this.name
}
}

person.sayName()

// Output
"Kapil"
__S.49__

Но:

const person = {const person =
Name: "Kapil",
sayName : () => {SayName: ()=>
Return this.name
}
}

person.sayName()

// Output
""
__S.61__

11. Оператор опциональной последовательности

Оператор опциональной последовательности (?.) позволяет получить значение свойства, находящегося на любом уровне вложенности в цепочке связанных между собой объектов, без необходимости проверять каждое из промежуточных свойств в ней на существование.

Если объект, к свойству или методу которого идет обращение, равен null или undefined, этот оператор не выбрасывает исключение, а возвращает undefined.

const user = {const user =
employee: {
Name: "Kapil
}
;

user.employee.name
// Output: Kapil

user.employ.name
// Output: undefined

user.employ.name
// Output: VM21616.1 Uncaught TypeError
__S.79__

12. Перемешивание массива

Для перемешивания массива можно воспользоваться встроенным методом Math.random().

const list = [1,2, 3, 4, 5, 6, 7, 7, 8, 9,]
list.sort(() => {List.sort() =>
Return Math.random() – 0.5
;

// Output
(9) [2, 5,1, 6, 9, 8, 4, 3, 7,]

// Recall it!
(9) [4, 1, 5, 3, 8, 2, 9, 6,]

13. Оператор нулевого слияния

Оператор нулевого слияния (??) — это логический оператор. Он возвращает значение правого операнда, когда значение левого равно null или undefined. В противном случае будет возвращено значение левого операнда.

const foo = null 'my school';
// Output: "my school"

const baz = 0 ?? 42
// Output: 0

14. Операторы Rest и Spread

Троеточие позволяет использовать остаточные параметры или расширить доступные для итерации элементы.

function myFun(a, b, ...manyMoreArgs) {
return arguments.length;
}

myFun("one", "two", "three", "four", "five", "six");
// Output: 6

const parts = ['shoulders', 'knees'];
const lyrics = ['head', ...parts, 'and', 'toes'];
lyrics;

// Output:
(5) ["head", "shoulders", "knees", "and", "toes"]

15. Конвертируем десятичные числа в двоичные или шестнадцатеричные

Для такой конвертации можно воспользоваться встроенными методами, такими как .toPrecision() или .toFixed().

const num = 10;

num.toString(2);
// Output: "1010"

num.toString(16);
// Output: "a"

num.toString(8);
// Output: "12"

16. Простой способ поменять местами два значения, используя деструктуризацию

let a = 5;
let b = 8;

[a,b] = [b,a]

[a,b]

// Output
(2) [8, 5]

17. Проверка палиндрома в одну строку

Это не то чтобы какой-то особый трюк, но его полезно знать, когда начинаете работать со строками.

funct ion checkPalindrome(str) {
return str == str.split('').reverse().join('');
}

checkPalindrome('naman');
// Output: true

18. Превращаем атрибуты объекта в массив атрибутов

Используем Object.entries(), Object.keys() и Object.values().

const obj = { a: 1, b: 2, c: 3 };

Object.entries(obj);

// Output
(3) [Array(2), Array(2), Array(2)]

0: (2) ["a", 1]
1: (2) ["b", 2]
2: (2) ["c", 3]

length: 3

Object.keys(obj);

(3) ["a", "b", "c"]

Object.values(obj);

(3) [1, 2, 3]

Сокращенный перевод статьи «Top 20 JavaScript tips and tricks to increase your Speed and Efficiency».

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]