Vývoj nových funkcí pro základní jazyk JavaScript se za posledních pět let skutečně zlepšil, částečně díky tomu, že rámce JavaScriptu posouvají limity a dokazují, jak důležitá může být daná funkce. Mé předchozí příspěvky ES6, Šest malých, ale úžasných funkcí ES6 a Šest dalších malých, ale úžasných funkcí ES6, zdůrazňovaly tucet vynikajících funkcí, které byly přidány do JavaScriptu, aby nám usnadnily život – a rozhodně ano. Pojďme se podívat na některé „malé“ funkce, které nám ES7 a ES8 přinesly!
String.prototype.padStart /padEnd
padStart a padEnd nám umožňují vyplnit daný řetězec libovolným textem dle našeho výběru, abychom zajistili, že řetězec odpovídá dané délce:
// padStart(desiredLength, textToPrepend) // No text ''.padStart(10, 'Hi') // 'HiHiHiHiHi' // Some text 'def'.padStart(6, 'abc') // 'abcdef' // Only use what gets to length '5678'.padStart(7, '1234') // '1235678' // padEnd(desiredLength, textToAppend) '23'.padEnd(8, '0') // '23000000'
Jedno použití padStart může zahrnovat předčíslí před telefonní číslo, pokud zadání uživatele nemá správnou délku. padEnd lze použít pro desetinnou přesnost.
Object.entries
Object.entries nám umožňuje získat vyčíslitelné dvojice vlastností objektu ve formátu pole ([klíč, hodnota]):
// Object literal
Object.entries({ 'a': 'A', 'b': 'B' }); // [["a","A"],["b","B"]]
// String
Object.entries('david') // [["0","d"],["1","a"],["2","v"],["3","i"],["4","d"]]
Object.entries postupuje ve stejném pořadí jako for...in by.
Object.values
Object.keys byl pro mě nesmírně užitečný, takže jsem byl také nadšený, když jsem viděl Object.values představeno:
// Object literal
Object.values({ 'a': 23, 'b': 19 }) // [23, 19]
// Array-like object (order not preserved)
Object.values({ 80: 'eighty', 0: 1, 1: 'yes' }) // [1, 'yes', 'eighty']
// String
Object.values('davidwalsh') // ["d", "a", "v", "i", "d", "w", "a", "l", "s", "h"]
// Array
Object.values([1, 2, 3]) // [1, 2, 3]
Object.values poskytuje položky hodnot v objektových literálech, polích, řetězcích atd.
Array.prototype.includes
Array.prototype.includes je trochu jako indexOf ale místo toho vrátí true nebo false hodnota namísto indexu položky:
['a', 'b', 'c'].includes('a') // true, not 0 like indexOf would give
['a', 'b', 'c'].includes('d') // false
indexOf byl v průběhu let používán k detekci přítomnosti položek v poli, ale index `0` může vést k falešným negativům, pokud není správně kódován. Jsem rád, že JavaScript přidal funkci, která vrací přesně to, co potřebujeme:kladnou nebo zápornou odpověď!
Umocnění
JavaScript zavedl zkrácenou metodu umocňování:
// 2 to the power of 8 Math.pow(2, 8) // 256 // ..becomes 2 ** 8 // 256
Tato nová syntaxe dosahuje stejného výsledku jako Math.pow s méně kódem!
Čárky na konci
Jsem dost starý na to, abych si pamatoval doby, kdy koncová čárka zcela rozložila váš kód JavaScript v aplikaci Internet Explorer 6. JavaScript nyní pojme čárku navíc:
let myObj = { a:'b', b: 'c', } // No error!
let myArr = [1, 2, 3, ] // No error!
[1, 2, 3,].length // 3
[1, 2, 3, , , ].length // 5
Je třeba mít na paměti případ délky pole. ESLint má comma-dangle pravidlo, které můžete použít k zajištění konzistentního používání čárky.
Bonus: async / await
Zřejmě async a await , nový způsob zpracování asynchronních úloh, není žádný "malý" doplněk, ale rozhodně je úžasný! Přečtěte si mého průvodce asynchronním a čekám na přeměnu vašeho pekla zpětného volání na elegantnější přístup k asynchronnímu kódu shora dolů!
S každou iterací JavaScriptu řešíme problémy, které jsme měli s nedostatečnou funkčností nebo s bastardním používáním jiných funkcí. Jaký je váš oblíbený nedávný přírůstek do JavaScriptu?