Díky ES6 a podobným jako Babel se psaní JavaScriptu stalo neuvěřitelně dynamickým, od nové syntaxe jazyka až po vlastní analýzu, jako je JSX. Stal jsem se velkým fanouškem operátoru spread, tří teček, které mohou změnit způsob, jakým dokončujete úkoly v JavaScriptu. Níže je uveden seznam mých oblíbených použití operátoru šíření v JavaScriptu!
Volání funkcí bez použití
Do této chvíle jsme nazvali Function.prototype.apply , předáním pole argumentů, k volání funkce s danou sadou parametrů, které pole obsahuje:
function doStuff (x, y, z) { }
var args = [0, 1, 2];
// Call the function, passing args
doStuff.apply(null, args);
S operátorem spread se můžeme vyhnout apply vše dohromady a jednoduše zavolejte funkci s operátorem spread před poli:
doStuff(...args);
Kód je kratší, čistější a není potřeba používat zbytečné null !
Kombinovat pole
Vždy existovala celá řada způsobů, jak kombinovat pole, ale operátor spread dává použití nové metody pro kombinování polí:
arr1.push(...arr2) // Adds arr2 items to end of array arr1.unshift(...arr2) //Adds arr2 items to beginning of array
Pokud byste chtěli zkombinovat dvě pole a umístit prvky na libovolné místo v poli, můžete postupovat následovně:
var arr1 = ['two', 'three']; var arr2 = ['one', ...arr1, 'four', 'five']; // ["one", "two", "three", "four", "five"]
Kratší syntaxe než jiné metody při přidání pozičního řízení!
Kopírování polí
Získání kopie pole je častým úkolem, k čemuž jsme v minulosti používali Array.prototype.slice, ale nyní můžeme použít operátor spread k získání kopie pole:
var arr = [1,2,3]; var arr2 = [...arr]; // like arr.slice() arr2.push(4)
Pamatujte:objekty v poli jsou stále odkazem, takže ne vše se "zkopíruje" samo o sobě.
Převést argumenty nebo NodeList na Array
Podobně jako při kopírování polí jsme použili Array.Prototype.slice převést NodeList a arguments objektů a na true pole, ale nyní můžeme k dokončení tohoto úkolu použít operátor spread:
[...document.querySelectorAll('div')] Argumenty můžete dokonce získat jako pole z podpisu:
var myFn = function(...args) {
// ...
}
Nezapomeňte, že to můžete provést také pomocí Array.from !
Pomocí Math Funkce
Operátor spread samozřejmě „rozloží“ pole do různých argumentů, takže libovolnou funkci, kde je jako argument použit spread, mohou použít funkce, které mohou přijmout libovolný počet argumentů.
let numbers = [9, 4, 7, 1]; Math.min(...numbers); // 1
Math sada funkcí objektu je dokonalým příkladem operátoru spread jako jediného argumentu funkce.
Destrukční zábava
Ničení je zábavná praxe, kterou používám na svých projektech React, stejně jako na jiných aplikacích Node.js. K extrahování informací do proměnných, jak je chcete, můžete použít destrukturalizaci a operátor zbytek:
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 } Zbývající vlastnosti jsou přiřazeny proměnné za operátorem spread!
ES6 učinil JavaScript nejen efektivnější, ale také zábavnější. Všechny moderní prohlížeče podporují novou syntaxi ES6, takže pokud jste si nenašli čas na hraní, rozhodně byste měli. Pokud dáváte přednost experimentům bez ohledu na prostředí, určitě se podívejte na můj příspěvek Začínáme s ES6. V každém případě je operátor šíření užitečnou funkcí v JavaScriptu, o které byste měli vědět!