На сегодняшний день 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”.