September 13, 2021

7 приемов JS, которым никто не учит

JavaScript, без сомнения, является одним из самых крутых языков в мире и с каждым днем набирает все большую популярность. Поэтому сообщество разработчиков нашло некоторые хитрости и советы по использованию JS уже довольно давно. Сегодня я поделюсь с 7 из них!

Итак, приступим!

Замена .map()

У метода .map() есть замена, которую мы можем использовать - это .from():

const dogs = [
    { name: ‘Rio’, age: 2 },
    { name: ‘Mac’, age: 3 },
    { name: ‘Bruno’, age: 5 },
    { name: ‘Jucas’, age: 10 },
    { name: ‘Furr’, age: 8 },
    { name: ‘Blu’, age: 7 },
]

let dogsNames = Array.from(dogs, ({name}) => name);
console.log(dogsNames); // вывод [“Rio”, “Mac”, “Bruno”, “Jucas”, “Furr”, “Blu”]

Число в строку/строка в число

Обычно, чтобы преобразовать строку в число, мы используем что-то вроде этого:

const num = 4
const newNum = num.toString();

а для преобразования строки в число мы используем:

const num = "4"
const stringNumber = Number(num);

но еще быстрее это сделать так:

// Число в строку
const num = 15;
const numString = num + ""; 

// строка в число
const stringNum = +s; 

Использование длины для изменения размера и опустошения массива

В JS мы можем присвоить свойству length значение по своему усмотрению, при этом будет изменена длина массива.

const arr = [1, 2, 3, 4, 5, 6, 7, 8];  
console.log(arr.length); 
// 8  
arr.length = 5;  
console.log(arr.length); 
// 5  
console.log(arr); 
// [1, 2, 3, 4, 5]

Также можно подобные действия использовать чтобы опустошить массив, например, так:

const arr = [1, 2, 3, 4, 5, 6, 7,8]; 
console.log(arr.length); 
// 8  
arr.length = 0;   
console.log(arr.length); 
// 0 
console.log(arr); 
// []

Обмен значениями с помощью деструктуризации массива

Синтаксис присваивания деструктуризации - это выражение JavaScript, которое позволяет распаковывать значения из массивов или свойства объектов в отдельные переменные. Мы также можем использовать его для быстрой замены значений, например, так:

let a = 1, b = 2;
[a, b] = [b, a]
console.log(a) // результат -> 2
console.log(b) // результат -> 1

Удаление дубликатов из массива

Этот трюк довольно прост. Допустим, я создал массив, содержащий числа, строки и булевы, но значения повторяются несколько раз, и я хочу удалить дубликаты. Вот что я могу сделать:

const array = [1, 3, 2, 3, 2, 1, true, false, true, 'Kio', 2, 3];
const filteredArray = [...new Set(array)];
console.log(filteredArray) // [1, 3, 2, true, false, "Kio"]

Короткий цикл for

Для такого цикла можно написать меньше кода:

const names = ["Kio", "Rio", "Mac"];

// Длинная версия
for (let i = 0; i < names.length; i++) {
  console.log(names[i]);
}

// Короткая версия
for (let name of names) console.log(name);

Показатели

В JS вы также можете получить время, в течение которого был выполнен код, как это делает Google:

const firstTime = performance.now();
something();
const secondTime = performance.now();
console.log(`Выполнение функции something заняло ${secondTime - firstTime} миллисекунд.`);

Источник: https://dev.to/worldindev/8-javascript-tips-tricks-that-no-one-teaches-24g1