DevKucher;

7 JavaScript советов и хитростей, которым никто не учит 🥷

Изображение на обложке для 7 JavaScript советов и хитростей, которым никто не учит 🥷

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

If с несколькими условиями

Мы можем хранить несколько значений в массиве и использовать метод .includes():

if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') {
  /**/
}

if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {
  /**/
}

.map() заменитель

Мы можем собрать массив значение обьектов используя .from() вместо .map()

let 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);
// Console: [“Rio”, “Mac”, “Bruno”, “Jucas”, “Furr”, “Blu”]

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

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

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

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

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

но мы можем сделать это прощее и быстрее:

let num = 15;
let numString = num + ""; // число в строку
let stringNum = +s; // строка в число

Использование length для изменения размера и очистки массива

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

Рассмотрим пример:

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

Его также можно использовать для опустошения массива, например, таким образом:

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

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

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

let a = 1, b = 2
[a, b] = [b, a]
console.log(a) // result -> 2
console.log(b) // result -> 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"]

Производительность

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

const firstTime = performance.now();
something();
const secondTime = performance.now();
console.log(` Функция something заняла ${secondTime - firstTime} миллисекунд.`);
// Console: Функция something заняла 0,5250000103842467 миллисекунд.