Add some ES2018 examples to the cheatsheets (#889)

* Add some ES2018 examples to the cheatsheets

* Add examples of string methods: padStart, padEnd

* Add examples of extracting Object values
This commit is contained in:
Lubos Belak 2018-11-16 20:57:03 +01:00 committed by chad d
parent 75740e2658
commit 117e9905d8
2 changed files with 49 additions and 1 deletions

5
es2018.md Normal file
View File

@ -0,0 +1,5 @@
---
title: ES2018
category: JavaScript
redirect_to: /es6
---

45
es6.md
View File

@ -6,7 +6,7 @@ tags: [Featured]
updated: 2017-10-21 updated: 2017-10-21
weight: -10 weight: -10
intro: | intro: |
A quick overview of new JavaScript features in ES2015, ES2016, ES2017 and beyond. A quick overview of new JavaScript features in ES2015, ES2016, ES2017, ES2018 and beyond.
--- ---
### Block scoping ### Block scoping
@ -69,6 +69,9 @@ See: [Binary and octal literals](https://babeljs.io/learn-es2015/#binary-and-oct
"hello".repeat(3) "hello".repeat(3)
"hello".includes("ll") "hello".includes("ll")
"hello".startsWith("he") "hello".startsWith("he")
"hello".padStart(8) // " hello"
"hello".padEnd(8) // "hello "
"hello".padEnd(8, '!') // hello!!!
"\u1E9B\u0323".normalize("NFC") "\u1E9B\u0323".normalize("NFC")
``` ```
@ -154,6 +157,20 @@ promise
``` ```
{: data-line="2,3"} {: data-line="2,3"}
### Using promises with finally
```js
promise
.then((result) => { ··· })
.catch((error) => { ··· })
.finally(() => { // logic independent of success/error })
```
{: data-line="4"}
The handler is called when the promise is fulfilled or rejected.
### Promise functions ### Promise functions
```js ```js
@ -273,6 +290,17 @@ for (let {title, artist} of songs) {
The assignment expressions work in loops, too. The assignment expressions work in loops, too.
### Object destructuring
```js
const { id, ...detail } = song;
```
{: data-line="1"}
Extract some individually and others objects in the group using "rest (...) operator"
Spread Spread
------ ------
@ -450,6 +478,21 @@ let handlers = {
See: [Object literal enhancements](https://babeljs.io/learn-es2015/#enhanced-object-literals) See: [Object literal enhancements](https://babeljs.io/learn-es2015/#enhanced-object-literals)
### Extract values
```js
const fatherJS = { age: 57, name: "Brendan Eich" }
Object.values(fatherJS)
// [57, "Brendan Eich"]
Object.entries(fatherJS)
// [["age", 57], ["name", "Brendan Eich"]]
```
{: data-line="3,5"}
Modules Modules
------- -------