logo

7 užitečných triků s JavaScriptem

Stejně jako každý jiný programovací jazyk má JavaScript desítky triků, jak splnit snadné i obtížné úkoly. Některé triky jsou všeobecně známé, zatímco jiné jsou dostačující k tomu, aby vás to vyvedlo z míry. Pojďme se podívat na sedm triků JavaScriptu, které můžete začít používat již dnes!

Získejte jedinečné hodnoty pole

Získání pole jedinečných hodnot je pravděpodobně jednodušší, než si myslíte:

var j = [...new Set([1, 2, 3, 3])]
>> [1, 2, 3]

Miluji směs výrazu odpočinku a Set !

Pole a logická hodnota

Někdy je potřeba filtrovat falešné hodnoty (0 , undefined , null , false atd.) mimo pole? Možná jste tento trik neznali:

myArray
    .map(item => {
        // ...
    })
    // Get rid of bad values
    .filter(Boolean);

Stačí předat Boolean a všechny ty falešné hodnoty zmizí!

Vytvořit prázdné objekty

Jistě můžete vytvořit objekt, který se zdá prázdný, pomocí {} , ale tento objekt má stále __proto__ a obvyklé hasOwnProperty a další objektové metody. Existuje však způsob, jak vytvořit čistý "slovníkový" objekt:

let dict = Object.create(null);

// dict.__proto__ === "undefined"
// No object properties exist until you add them

Na tomto objektu nejsou absolutně žádné klíče nebo metody, které byste tam nevložili!

Sloučit objekty

Potřeba sloučit více objektů v JavaScriptu byla odjakživa, zvláště když jsme začali vytvářet třídy a widgety s možnostmi:

const person = { name: 'David Walsh', gender: 'Male' };
const tools = { computer: 'Mac', editor: 'Atom' };
const attributes = { handsomeness: 'Extreme', hair: 'Brown', eyes: 'Blue' };

const summary = {...person, ...tools, ...attributes};
/*
Object {
  "computer": "Mac",
  "editor": "Atom",
  "eyes": "Blue",
  "gender": "Male",
  "hair": "Brown",
  "handsomeness": "Extreme",
  "name": "David Walsh",
}
*/

Tyto tři tečky tento úkol mnohem usnadnily!

Vyžadovat funkční parametry

Možnost nastavit výchozí hodnoty pro argumenty funkcí byla skvělým doplňkem JavaScriptu, ale vyzkoušejte tento trik, jak vyžadovat předání hodnot pro daný argument:

const isRequired = () => { throw new Error('param is required'); };

const hello = (name = isRequired()) => { console.log(`hello ${name}`) };

// This will throw an error because no name is provided
hello();

// This will also throw an error
hello(undefined);

// These are good!
hello(null);
hello('David');

To je další úroveň ověřování a používání JavaScriptu!

Zničení aliasů

Destructuring je velmi vítaným doplňkem JavaScriptu, ale někdy bychom raději tyto vlastnosti označili jiným jménem, ​​abychom mohli využít výhody aliasů:

const obj = { x: 1 };

// Grabs obj.x as { x }
const { x } = obj;

// Grabs obj.x as { otherName }
const { x: otherName } = obj;

Užitečné pro zamezení konfliktům názvů s existujícími proměnnými!

Získat parametry řetězce dotazu

Po léta jsme psali hrubé regulární výrazy, abychom získali hodnoty řetězce dotazu, ale ty časy jsou pryč – zadejte úžasný URLSearchParams API:

// Assuming "?post=1234&action=edit"

var urlParams = new URLSearchParams(window.location.search);

console.log(urlParams.has('post')); // true
console.log(urlParams.get('action')); // "edit"
console.log(urlParams.getAll('action')); // ["edit"]
console.log(urlParams.toString()); // "?post=1234&action=edit"
console.log(urlParams.append('active', '1')); // "?post=1234&action=edit&active=1"

Mnohem snazší, než jsme zvyklí bojovat!

JavaScript se v průběhu let tolik změnil, ale mou oblíbenou částí JavaScriptu v těchto dnech je rychlost jazykových vylepšení, kterých jsme svědky. Navzdory měnící se dynamice JavaScriptu stále musíme použít několik slušných triků; mějte tyto triky ve svém nástroji, až je budete potřebovat!

Jaké jsou vaše oblíbené triky s JavaScriptem?