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

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

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

Содержание

---

Последний элемент массива

Очень часто нужно получить последний элемент массива. Для этого достаточно знать длину массива и использовать ее для доступа к элементу массива. Например:

let numbersArr = [4, 8, 9, 34, 100];
numbersArr[numbersArr.length - 1]; //return 100

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

Случайное число из диапазона

Для того чтобы получить случайное число от 0 до 1, существует метод Math.random(). Но довольно часто случайное число нужно получить из определенного диапазона. Например: от 0 до 4 или от 0 до 49:

// Random number between 0 and 4.
Math.floor(Math.random() * 5);

// Random number between 0 and 49.
Math.floor(Math.random() * 50);

// Random number between 0 and 309.
Math.floor(Math.random() * 310);

Упрощение вложенных массивов

Перевести все элементы вложенных массивов на один уровень можно с помощью метода flat(), входившей в состав релиза ES2017. Метод flat() принимает всего один аргумент, указывающий на глубину сглаживания массива:

let arr = [5, [1, 2], [4, 8]];
arr.flat(); //returns [5, 1, 2, 4, 8]

let twoLevelArr = [4, ["John", 7, [5, 9]]]
twoLevelArr.flat(2); //returns [4, "John", 7, 5, 9]

Проверка нескольких условий

Если нужно проверить выполнение нескольких условий с помощью оператора if, элегантным решением будет метод массива includes():

let name = "John";

//Bad way.
if(name === "John" || name === "Ben" || name === "Chris"){
  console.log("included")
}

//Better way.
if(["John", "Ben", "Chris"].includes(name)){
  console.log("included")
}

Уникальное значение

Иногда из массива нужно извлечь только уникальные значения. Для этого отлично подойдет объект Set с оператором распространения ...:

const languages = ['JavaScript', 'Python', 'Python', 'JavaScript', 'HTML', 'Python'];

const uniqueLanguages = [...new Set(languages)];
console.log(uniqueLanguages);
//prints: ["JavaScript", "Python", "HTML"]

Однократный запуск события

Чтобы запустить событие только один раз, нужно указать третий параметр для метода addEventListener(). Это объект с установленной опцией once: true:

document.body.addEventListener('click', () => {
    console.log('Run only once');
  }, { once: true });

Сумма всех элементов массива

Самый простой способ получить сумму всех элементов массива - метод массива reduce():

let numbers = [6, 9 , 90, 120, 55];
numbers.reduce((a, b)=> a + b, 0); //returns 280

Сумма чисел массива объектов

Сумма чисел массива объектов и сумма чисел массива - совершенно не одно и тоже. Для этих целей также можно использовать метод reduce(), но только, если вернуть объект в функции обратного вызова:

const users  = [
  {name: "John", age: 25},
  {name: "Chris", age: 20},
  {name: "James", age: 31},
  ]
  
  users.reduce(function(a, b){
    return {age: a.age + b.age}
  }).age;
//returns 76.

Ключевое слово in

С помощью ключевого слова in можно узнать: содержит ли объект определенное свойства или массив определенный элемент:

const employee = {
  name: "Chris",
  age: 25
}
"name" in employee; //returns true.
"age" in employee;  //returns true.
"experience" in employee; //retuens false.

Преобразование числа в массив

Чтобы преобразовать число в массив понадобятся: оператор распространения, методы map() и parseInt():

const toArray = num => [...`${num}`].map(elem=> parseInt(elem))
toArray(1234); //returns [1, 2, 3, 4]
toArray(758999); //returns [7, 5, 8, 9, 9, 9]

---

Спасибо за внимание.

---

Перевод статьи Mehdi Aoussiad “10 Useful JavaScript Coding Techniques That You Should Us”.