ThirdMirrors
/
cheatsheets
mirror of https://gitee.com/Hawkin99/cheatsheets.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Update ES6

This commit is contained in:
Rico Sta. Cruz 2017-08-27 23:55:33 +08:00
parent c99467b22f
commit 64898b046e
No known key found for this signature in database
GPG Key ID: CAAD38AE2962619A
1 changed files with 195 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

334
es6.md
View File

@ -1,16 +1,11 @@
--- ---
title: ES2015 title: ES2015
category: JavaScript category: JavaScript
layout: default-ad layout: 2017/sheet
ads: true
--- ---
## Stable in io.js ### Promises
New features you can use on [io.js](http://iojs.org/).
{:.brief-intro.center.top-space-0}
### [Promises](http://babeljs.io/docs/learn-es2015/#promises)
For asynchronous programming.
```js ```js
new Promise(fn) new Promise(fn)
@ -25,42 +20,57 @@ Promise.reject(/*...*/)
Promise.resolve(/*...*/) Promise.resolve(/*...*/)
``` ```
### [Block scoping](http://babeljs.io/docs/learn-es2015/#let-const) For asynchronous programming.
`let` is the new `var`. See: [Promises](http://babeljs.io/docs/learn-es2015/#promises)
### Block scoping
```js ```js
// Block scoping (let)
function fn () { function fn () {
let x = 0; let x = 0
if (true) { if (true) {
let x = 1; // only inside this `if` let x = 1 // only inside this `if`
} }
} }
``` ```
{: data-line="2,4"}
```js ```js
// Constants // Constants
const a = 1; const a = 1
``` ```
### [Backtick strings](http://babeljs.io/docs/learn-es2015/#template-strings) `let` is the new `var`.
Templates and multiline strings. See: [Let and const](http://babeljs.io/docs/learn-es2015/#let-const)
### Backtick strings
```js ```js
// Interpolation // Interpolation
var message = `Hello ${name}`; var message = `Hello ${name}`
``` ```
```js ```js
// Multiline // Multiline strings
var str = ` var str = `
hello hello
world world
`; `
``` ```
### Other improvements Templates and multiline strings.
New string [methods](http://babeljs.io/docs/learn-es2015/#math-number-string-object-apis), [binary and octal](http://babeljs.io/docs/learn-es2015/#binary-and-octal-literals) numbers. See: [Template strings](http://babeljs.io/docs/learn-es2015/#template-strings)
### Binary and octal literals
```js
let bin = 0b1010010
let oct = 0755
```
See: [Binary and octal literals](http://babeljs.io/docs/learn-es2015/#binary-and-octal-literals)
### New methods
```js ```js
// New string methods // New string methods
@ -69,134 +79,43 @@ New string [methods](http://babeljs.io/docs/learn-es2015/#math-number-string-obj
"\u1E9B\u0323".normalize("NFC") "\u1E9B\u0323".normalize("NFC")
``` ```
```js See: [New methods](http://babeljs.io/docs/learn-es2015/#math-number-string-object-apis)
// Binary/octal literals
var bin = 0b1010010;
var oct = 0755;
```
### [Object literal enhancements](http://babeljs.io/docs/learn-es2015/#enhanced-object-literals) ### Classes
Adds support for getters, setters, methods, shorthand.
```js
// Short object syntax
// aka: `exports = { hello:hello, bye:bye }`
module.exports = { hello, bye };
```
```js
App = {
// shorthand for `handler: handler`
handler,
// methods
start() {
this.go();
},
// getter/setter
get closed() {
return this.status === 'closed';
},
// custom prototypes
__proto__: protoObj,
// computed property names
[ "prop_"+n ]: 42
};
```
### [Generators](http://babeljs.io/docs/learn-es2015/#generators)
It's complicated.
```js
function* idMaker() {
var id = 0;
while (true) { yield id++; }
}
var gen = idMaker();
gen.next().value // 0
gen.next().value // 1
gen.next().value // 2
```
### [Classes](http://babeljs.io/docs/learn-es2015/#classes)
Syntactic sugar for prototypes.
```js ```js
class Circle extends Shape { class Circle extends Shape {
// ctor // ctor
constructor(radius) { constructor (radius) {
this.radius = radius; this.radius = radius
} }
// methods // methods
getArea() { getArea () {
return Math.PI * 2 * this.radius; return Math.PI * 2 * this.radius
} }
// calling super methods // calling super methods
expand(n) { expand (n) {
return super.expand(n) * Math.PI; return super.expand(n) * Math.PI
} }
// static methods // static methods
static createFromDiameter(diameter) { static createFromDiameter(diameter) {
return new Circle(diameter / 2); return new Circle(diameter / 2)
} }
} }
``` ```
<br> Syntactic sugar for prototypes.
See: [Classes](http://babeljs.io/docs/learn-es2015/#classes)
## Stable in Babel ### Destructuring
Available via the [Babel] transpiler.
{:.brief-intro.center.top-space-0}
### [Module imports](http://babeljs.io/docs/learn-es2015/#modules)
`import` is the new `require()`.
```js
// aka: require('...')
import 'helpers';
// aka: Express = require('...')
import Express from 'express';
// aka: indent = require('...').indent
import { indent } from 'helpers';
// aka: indent = require('...').indentSpaces
import { indentSpaces as indent } from 'helpers';
```
### [Module exports](http://babeljs.io/docs/learn-es2015/#modules)
`export` is the new `module.exports =`.
```js
// aka: module.exports = ...
export default function () {
// ...
};
// aka: exports.mymethod = ...
export function mymethod () {
};
// aka: exports.pi = ...
export var pi = 3.14159;
```
### [Destructuring](http://babeljs.io/docs/learn-es2015/#destructuring)
Supports for matching arrays and objects.
```js ```js
// Destructuring assignment // Destructuring assignment
var [first, last] = ["Nikola", "Tesla"]; var [first, last] = ['Nikola', 'Tesla']
let {title, author} = { title: "The Silkworm", author: "R. Galbraith" }; let {title, author} = { title: 'The Silkworm', author: 'R. Galbraith' }
``` ```
```js ```js
@ -212,16 +131,21 @@ function greet({ name, greeting }) {
// ... // ...
} }
greet({ name: "Larry", greeting: "Ahoy" }); greet({ name: "Larry", greeting: "Ahoy" })
``` ```
### [Function arguments](http://babeljs.io/docs/learn-es2015/#default-rest-spread) Supports for matching arrays and objects.
Default, rest, spread. (iojs: `--harmony-rest-parameters`) See: [Destructuring](http://babeljs.io/docs/learn-es2015/#destructuring)
Functions
---------
### Function arguments
```js ```js
// Default arguments // Default arguments
function greet(name = "Jerry") { function greet (name = "Jerry") {
return `Hello ${name}`; return `Hello ${name}`
} }
``` ```
@ -229,7 +153,7 @@ function greet(name = "Jerry") {
// Rest arguments // Rest arguments
function fn(x, ...y) { function fn(x, ...y) {
// y is an Array // y is an Array
return x * y.length; return x * y.length
} }
``` ```
@ -238,30 +162,161 @@ function fn(x, ...y) {
fn(...[1,2,3]) // same as fn(1,2,3) fn(...[1,2,3]) // same as fn(1,2,3)
``` ```
### [Fat arrows](http://babeljs.io/docs/learn-es2015/#arrows) Default, rest, spread.
Like functions but with `this` preserved. See: [Function arguments](http://babeljs.io/docs/learn-es2015/#default-rest-spread)
### Fat arrows
```js ```js
// Fat arrows // Fat arrows
setTimeout(() => { setTimeout(() => {
... ...
}); })
``` ```
```js ```js
// With arguments // With arguments
readFile('text.txt', (err, data) => { readFile('text.txt', (err, data) => {
... ...
}); })
``` ```
```js ```js
// Short syntax (no `return` without `{}`) // Short syntax (no `return` without `{}`)
numbers.map(n => n * 2) numbers.map(n => n * 2)
// Same as: numbers.map(function (n) { return n * 2 })
``` ```
### [For..of iteration](http://babeljs.io/docs/learn-es2015/#iterators-for-of) Like functions but with `this` preserved.
For iterating through generators and arrays. See: [Fat arrows](http://babeljs.io/docs/learn-es2015/#arrows)
Objects
-------
### Shorthand syntax
```js
module.exports = { hello, bye }
// Same as `module.exports = { hello: hello, bye: bye }`
```
See: [Object literal enhancements](http://babeljs.io/docs/learn-es2015/#enhanced-object-literals)
### Methods
```js
const App = {
start () {
console.log('running')
}
}
// Same as `App = { start: function () {···} }`
```
{: data-line="2"}
See: [Object literal enhancements](http://babeljs.io/docs/learn-es2015/#enhanced-object-literals)
### Getters and setters
```js
const App = {
get closed () {
return this.status === 'closed'
},
set closed (value) {
this.status === value ? 'closed' : 'open'
}
}
```
{: data-line="2,5"}
See: [Object literal enhancements](http://babeljs.io/docs/learn-es2015/#enhanced-object-literals)
### Computed property names
```js
let event = 'click'
let handlers = {
['on' + event]: true
}
// Same as `handlers = { 'onclick': true }`
```
{: data-line="3"}
See: [Object literal enhancements](http://babeljs.io/docs/learn-es2015/#enhanced-object-literals)
Modules
-------
### Imports
```js
// aka: require('···')
import 'helpers'
```
```js
// aka: Express = require('···').default || require('···')
import Express from 'express'
```
```js
// aka: indent = require('···').indent
import { indent } from 'helpers'
```
```js
// aka: indent = require('···').indentSpaces
import { indentSpaces as indent } from 'helpers'
```
`import` is the new `require()`.
See: [Module imports](http://babeljs.io/docs/learn-es2015/#modules)
### Exports
```js
// aka: module.exports.default = ···
export default function () {
// ···
}
```
```js
// aka: module.exports.mymethod = ···
export function mymethod () {
}
// aka: module.exports.pi = ···
export var pi = 3.14159
```
`export` is the new `module.exports`.
See: [Module exports](http://babeljs.io/docs/learn-es2015/#modules)
Generators
----------
### Generators
```js
function* idMaker() {
var id = 0
while (true) { yield id++ }
}
```
```js
var gen = idMaker()
gen.next().value // 0
gen.next().value // 1
gen.next().value // 2
```
It's complicated.
See: [Generators](http://babeljs.io/docs/learn-es2015/#generators)
### For..of iteration
```js ```js
for (let i of iterable) { for (let i of iterable) {
@ -269,4 +324,5 @@ for (let i of iterable) {
} }
``` ```
[Babel]: http://babeljs.io For iterating through generators and arrays.
See: [For..of iteration](http://babeljs.io/docs/learn-es2015/#iterators-for-of)