10 JavaScript-trükk amitől elegánsabb lesz a programod

Ebben a bejegyzésben 10 JavaScript tippet osztok meg olyan példákkal, amelyek hozzájárulnak a tiszta és hatékony kód írásához.

1. Array duplikációk eltávolítása hatékonyan

Az ismétlődő elemeket eltávolíthatjuk egy tömbből a set segítségével:

const arrWithDuplicates = [1, 12, 2, 13, 4, 4, 13];
const arrWithoutDuplicates = [...new Set(arrWithDuplicates)];
console.log(arrWithoutDuplicates); 
//Output: [1, 12, 2, 13, 4]

2. Cseréljük fel az értékeket a Destructuring segítségével

Két változót könnyen felcserélhetünk a destructuring segítségével:

let x = 7, y = 13;
[x, y] = [y, x];
console.log(x); //13

3. Sablon interpoláció(Template Interpolation)

Használjd a sablonliterálokat a karakterlánc-interpolációhoz és a kódok jobb olvashatóságához:

const name = 'John';
const message = `Hello, ${name}!`;

4. Háromtagú operátor(Ternary Operator „=?:”)

A feltételes utasításokat a háromtagú operátorral egyszerűsítheted:

const age = 20;

//Instead of this👇
if(age>=18)
{
    console.log("You can drive");
}
else
{
    console.log("You cannot drive");
}

//Use this👇
age >= 18 ? console.log("You can drive") : console.log("You cannot drive");

5. Vizsgáljuk a típust is ne csak az értéket

Gyakori kezdő hibák, hogy a változók vizsgálata nem megfelelő szigorúsággal történik. A laza egyenlőség (==) helyett szigorú egyenlőség (===) használatával megakadályozhatjuk a típuskényszer okozta problémákat:

const num1 = 5;
const num2 = '5';

//Instead of using ==
if (num1 == num2)
{
  console.log('True');
}
else
{
  console.log('False');
}
//Output: True

//Use ===
if (num1 === num2)
{
  console.log('True');
}
else
{
  console.log('False');
}
//Output: False

6. Mesteri Promise.all(): több promise kezelése

Kombinálj több promise-t, és kezeljd azokat együttesen a „Promise.all()” használatával:

const promise1 = fetch('url1');
const promise2 = fetch('url2');
Promise.all([promise1, promise2])
  .then(responses => console.log(responses))
  .catch(error => console.error(error));

7. Reguláris kifejezések használata minták keresésére

A reguláris kifejezések („RegExp”) hatékony eszközök a mintaillesztéshez:

const text = 'Hello, world!';
const pattern = /Hello/g;
console.log(text.match(pattern)); // Output: ['Hello']

8. Zárványok(Closures) felszabadítása: Adatvédelem

A zárványok(Closures) lehetővé teszik, hogy privát változókat hozz létre a függvényekben:

function createCounter()
{
  let count = 0;
  return function ()
  {
    count++;
    console.log(count);
  };
}

const counter = createCounter();
counter(); // Output: 1
counter(); // Output: 2

9. Memorizálás a gyorsaságért: Hatékony újraszámítás

A memorizálás gyorsítótárazza a függvények eredményeit a jobb teljesítmény érdekében:

function fibonacci(n, memo = {})
{
  if (n in memo) return memo[n];
  if (n <= 2) return 1;
  memo[n] = fibonacci(n - 1, memo) + fibonacci(n - 2, memo);
  return memo[n];
}

console.log(fibonacci(10)); // Output: 55

10. Éljen az Intersection Observer: Könnyed görgetési effektusok

Használd az Intersection Observer API-t lustabetöltéshez és görgetési animációkhoz:

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('fade-in');
      observer.unobserve(entry.target);
    }
  });
});

const elements = document.querySelectorAll('.animate');
elements.forEach(element => observer.observe(element));