JavaScript съвети и трикове, които всеки програмист трябва да знае

Като Frontend разработчик, винаги търся готини съвети и трикове, за да направя живота си с кодиране по-лесен и по-приятен. Днес бих искал да споделя някои техники, които взех по пътя. Сигурен съм, че тези съвети ще ви бъдат полезни.

1. Няколко начина за размяна на променливи

Един от начините за размяна на променливи би бил използването на временна променлива:

let age = 'John Doe';
let name = '40';
let temp;

temp = age;
age = name;
name = temp;

console.log(`Hi, I am ${name} and ${age} years old.`) 
// Output: 'Hi, I am John Doe and 40 years old.'

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

let age = 'John Doe';
let name = '40';

[age, name] = [name, age]

console.log(`Hi, I am ${name} and ${age} years old.`) 
// Output: 'Hi, I am John Doe and 40 years old.'

Можете също да използвате литерал на масив и индексиране:

let age = 'John Doe';
let name = '40';

name = [age, age = name][0];

console.log(`Hi, I am ${name} and ${age} years old.`) 
// Output: 'Hi, I am John Doe and 40 years old.'

2. Три метода за създаване на плитко копие на масива.

Използване на оператор Spread

Операторът за разпространение ... ви позволява да разширявате елементи на итерируем. Можете да го използвате за копиране на елементи от един масив в друг.

const fruits = ['Cherry', 'Orange', 'Apple', 'Grapes'];

const fruitsCopy = [...fruits];

console.log(fruitsCopy) // Output: [ 'Cherry', 'Orange', 'Apple', 'Grapes' ]
console.log(fruits === fruitsCopy); // Output: false

Използване на метода slice():

Методът slice() се използва за копиране на част от масив в нов масив. Ако го извикате без аргументи, той връща копие на целия масив.

const fruits = ['Cherry', 'Orange', 'Apple', 'Grapes'];

const fruitsCopy = fruits.slice();

console.log(fruitsCopy) // Output: [ 'Cherry', 'Orange', 'Apple', 'Grapes' ]
console.log(fruits === fruitsCopy); // Output: false

Използване на метода concat():

Методът concat() обединява два или повече масива. Когато го извикате на празен масив и подадете изходния масив като аргумент, той създава нов масив с елементите на изходния масив.

const fruits = ['Cherry', 'Orange', 'Apple', 'Grapes'];

const fruitsCopy = [].concat(fruits);

console.log(fruitsCopy) // Output: [ 'Cherry', 'Orange', 'Apple', 'Grapes' ]
console.log(fruits === fruitsCopy); // Output: false

3: Премахване на дубликати от масиви

Хубав едноредов за бързо премахване на дубликати от масив без използване на цикли.

const names = ['Mark', 'Robert', 'Tom', 'Mark', 'Jack', 'Tom'];

const uniqueNames = [...new Set(names)];

console.log(uniqueNames); // Output: [ 'Mark', 'Robert', 'Tom', 'Jack' ]

4: Задаване на стойности по подразбиране

Традиционен начин за настройка на стойности по подразбиране с помощта на оператора if:

let username = getUsername();

if (!username) {
    username = 'David';
}

Можете обаче да опростите това, като използвате един ред код или с логическия оператор ИЛИ ||, или с нулевия оператор за обединяване ??.

Логическият оператор ИЛИ || взема десния операнд в случай на фалшива стойност, която включва празен низ, 0, false, NaN, нула или недефиниран:

const username = getUsername() || 'anonymous';

Нулевият оператор за обединяване ?? взема десния операнд само когато лявата страна е зададена на нула или недефинирана:

const username = getUsername() ?? 'anonymous';

5. Изчислете производителността на кода

Лесно измервайте ефективността на кода си с помощта на performance.now():

const start = performance.now();
// Your code
const end = performance.now();

const elapsed = end - start;
console.log(`Time: ${elapsed}ms`);

Можете също да използвате console.time() и console.timeEnd():

console.time('Time')
// Your code
console.timeEnd('Time')

Това е всичко! Надявам се, че намирате тези съвети и трикове за JavaScript полезни. Чувствайте се свободни да експериментирате и да споделяте откритията си с общността. Приятно кодиране!