Articles

iterace pomocí objektů JavaScript – 5 technik a výkonnostních testů.

…ve smyčce

pro…loop příkaz lze použít k iteraci přes všechny non-Symbol, vyčíslitelné vlastnosti objektu.

objekt.klíče

metoda Object.keys() vrací pole objektových klíčů. Tím se vytvoří pole, které obsahuje vlastnosti objektu. Poté můžete procházet polem a získat potřebné klíče a hodnoty.

objekt.hodnoty

metoda Object.values() vrací pole hodnot objektů. Tím se vytvoří pole, které obsahuje vlastnosti objektu. Poté můžete procházet polem a získat potřebné hodnoty.

objekt.getOwnPropertyNames

Object.getOwnPropertyNames() metoda vrací pole všech vlastností (včetně non-vyčíslitelné vlastnosti s výjimkou těch, které používají Symbol) nalézt přímo v daném objektu. Tím se vytvoří pole, které obsahuje vlastnosti objektu. Poté můžete procházet polem a získat potřebné klíče a hodnoty.

objekt.položky

Object.entries() metoda vrací pole daného objektu je vlastní enumerable majetku párů.

Srovnání Výkonnosti

Teď pojďme vyzkoušet všechny tyto techniky a porovnat je na základě jejich rychlosti a výkonu k určení, což je rychlejší.

většina prohlížečů jako Chrome a Firefox implementuje časování s vysokým rozlišením v performance.now(). Metodaperformance.now() vrací DOMHighResTimeStamp, měřeno v milisekundách.

Použití

let start = performance.now();// code to be timed...let duration = performance.now() - start;

Pojďme začít testovat…

Výsledky

Podle našich testů, zde jsou výsledky ve vzestupném pořadí;

╔═══════════╦════════════════════════════╦═════════════════════════╗
║ Rank ║ Technique ║ Time(ms) ║
╠═══════════╬════════════════════════════╬═════════════════════════╣
║ 1 ║ for...in loop ║ 0.8450000023003668 ms ║
║ 2 ║ Object.keys ║ 1.32499999017 ms ║
║ 3 ║ Object.entries ║ 1.63499999326 ms ║
║ 4 ║ Object.values ║ 2.05499998992 ms ║
║ 5 ║ Object.getOwnPropertyNames ║ 2.12500002817 ms ║
╚═══════════╩════════════════════════════╩═════════════════════════╝

Tak, podle těchto výsledků, nejrychlejší způsob, jak iterovat přes JavaScript Objekty je pro…ve smyčce. Nyní to neznamená, že ostatní metody jsou neplatné nebo zbytečné, vše záleží na případech použití.

problém s for...in smyčka je, že to iteruje vlastnosti v řetězci Prototypu. Iteruje přes Vlastnosti objektu. Javascript pole jsou jen konkrétní druh objektu, s některé užitečné vlastnosti, které pomáhají léčit je jako pole, ale stále mají vnitřní vlastnosti objektu a nemyslíš iterovat přes tyto. for...intaké iteruje přes všechny vyčíslené vlastnosti a ne jen prvky pole. To může také vést k neočekávaným výsledkům.

Když procházíte objektem se smyčkou for...in, musíte zkontrolovat, zda vlastnost patří k objektu. Můžete to udělat pomocí hasOwnProperty.

lepší a účinnější způsob, jak procházet objekty v ES6 je nejprve převést objekt do pole pomocí Object.keys()Object.values()Object.getOwnPropertyNames nebo Object.entries() . Poté procházíte polem, abyste získali klíče a hodnoty.