ES6 cheatsheet

let bin = 0b1010010; let oct = 0o755; 

See: Binary and Octal Literals

const byte = 2 ** 8; 

Same as: Math.pow(2, 8)

#New string methods

'hello'.repeat(3); 'hello'.includes('ll'); 'hello'.startsWith('he'); 'hello'.padStart(8); // "hello" 'hello'.padEnd(8); // "hello" 'hello'.padEnd(8, '!'); // hello!!! '\u1E9B\u0323'.normalize('NFC'); 

#New Number Methods

Number.EPSILON; Number.isInteger(Infinity); // false Number.isNaN('NaN'); // false 

#New Math methods

Math.acosh(3); // 1.762747174039086 Math.hypot(3, 4); // 5 Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2); // 2 

#New Array methods

//return a real array Array.from(document.querySelectorAll('*')); //similar to new Array(...), but without the special single-argument behavior Array.of(1, 2, 3); 

See: New library additions

class Circle extends Shape { 

#Constructor

constructor (radius) { this.radius = radius } 

#method

getArea () { return Math.PI *2 *this.radius } 

#Call the superclass method

expand(n) { return super.expand(n) *Math.PI } 

#Static methods

static createFromDiameter(diameter) { return new Circle(diameter /2) } 

Syntactic sugar for prototypes. See: classes

The javascript default field is public (public), if you need to indicate private, you can use (#)

class Dog { #name; constructor(name) { this.#name = name; } printName() { // Only private fields can be called inside the class console.log(`Your name is ${this.#name}`); } } const dog = new Dog('putty'); //console.log(this.#name) //Private identifiers are not allowed outside class bodies. dog.printName(); 

#Static private class

class ClassWithPrivate { static #privateStaticField; static #privateStaticFieldWithInitializer = 42; static #privateStaticMethod() { // … } } 

new Promise((resolve, reject) => { if (ok) { resolve(result); } else { reject(error); } }); 

for asynchronous programming. See: Promises

promise .then((result) => { ··· }) .catch((error) => { ··· }) 

promise .then((result) => { ··· }) .catch((error) => { ··· }) .finally(() => { /*logic independent of success/error */ }) 

The handler is called when the promise is fulfilled or rejected

Promise.all(···) Promise.race(···) Promise.reject(···) Promise.resolve(···) 

async function run () { const user = await getUser() const tweets = await getTweets(user) return [user, tweets] } 

async functions are another way to use functions. See: Async Function

#Arrays

const [first, last] = ['Nikola', 'Tesla']; 

#Objects

let { title, author } = { title: 'The Silkworm', author: 'R. Galbraith' }; 

Supports matching arrays and objects. See: Destructuring

const scores = [22, 33]; const [math = 50, sci = 50, arts = 50] = scores; 

---

//Result: //math === 22, sci === 33, arts === 50 

A default value can be assigned when destructuring an array or object

function greet({ name, greeting }) { console.log(`${greeting}, ${name}!`); } 

---

greet({ name: 'Larry', greeting: 'Ahoy' }); 

Destructuring of objects and arrays can also be done in function parameters

function greet({ name = 'Rauno' } = {}) { console.log(`Hi ${name}!`); } 

---

greet(); // Hi Rauno! greet({ name: 'Larry' }); // Hi Larry! 

function printCoordinates({ left: x, top: y }) { console.log(`x: ${x}, y: ${y}`); } 

---

printCoordinates({ left: 25, top: 90 }); 

This example assigns x to the value of the left key

for (let {title, artist} of songs) { ··· } 

Assignment expressions also work in loops

const { id, ...detail } = song; 

Use the rest(...) operator to extract some keys individually and the rest of the keys in the object

function log(x, y = 'World') { console.log(x, y); } log('Hello'); // Hello World log('Hello', 'China'); // Hello China log('Hello', ''); // Hello 

function foo({ x, y = 5 } = {}) { console.log(x, y); } foo(); // undefined 5 

function foo() {} foo.name; // "foo" 

function foo(a, b) {} foo.length; // 2 

module.exports = { hello, bye }; 

same below:

module.exports = { hello: hello, bye: bye }; 

See: Object Literals Enhanced

const App = { start() { console.log('running'); } }; //Same as: App = { start: function () {···} } 

See: Object Literals Enhanced

const App = { get closed () { return this.status === 'closed' }, set closed (value) { this.status = value ? 'closed' : 'open' } } 

See: Object Literals Enhanced

let event = 'click'; let handlers = { [`on${event}`]: true }; //Same as: handlers = { 'onclick': true } 

See: Object Literals Enhanced

const fatherJS = { age: 57, name: "Zhang San" } Object.values(fatherJS) //[57, "Zhang San"] Object.entries(fatherJS) //[["age", 57], ["name", "Zhang San"]] 

import 'helpers'; //aka: require('···') 

---

import Express from 'express'; //aka: const Express = require('···').default || require('···') 

---

import { indent } from 'helpers'; //aka: const indent = require('···').indent 

---

import * as Helpers from 'helpers'; //aka: const Helpers = require('···') 

---

import { indentSpaces as indent } from 'helpers'; //aka: const indent = require('···').indentSpaces 

import is the new require(). See: Module imports

export default function () { ··· } //aka: module.exports.default = ··· 

---

export function mymethod () { ··· } //aka: module.exports.mymethod = ··· 

---

export const pi = 3.14159; //aka: module.exports.pi = ··· 

---

const firstName = 'Michael'; const lastName = 'Jackson'; const year = 1958; export { firstName, lastName, year }; 

---

export * from 'lib/math'; 

export is the new module.exports. See: Module exports

import { lastName as surname // import rename } from './profile.js'; function v1() { ... } function v2() { ... } export { v1 as default }; //Equivalent to export default v1; export { v1 as streamV1, // export rename v2 as streamV2, // export rename v2 as streamLatestVersion // export rename }; 

button.addEventListener('click', (event) => { import('./dialogBox.js') .then((dialogBox) => { dialogBox.open(); }) .catch((error) => { /*Error handling */ }); }); 

ES2020 Proposal introduce import() function

const main = document.querySelector('main'); import(`./modules/${someVariable}.js`) .then((module) => { module.loadPageInto(main); }) .catch((err) => { main.textContent = err.message; }); 

ES2020 Added a meta property import.meta to the import command, which returns the meta information of the current module

new URL('data.txt', import.meta.url); 

In the Node.js environment, import.meta.url always returns a local path, that is, a string of the file:URL protocol, such as file:/// home/user/foo.js

function* idMaker() { let id = 0; while (true) { yield id++; } } 

---

let gen = idMaker(); gen.next().value; // → 0 gen.next().value; // → 1 gen.next().value; // → 2 

it's complicated. See: Generators

var gen = {}; gen[Symbol.iterator] = function* () { yield 1; yield 2; yield 3; }; [...gen]; // => [1, 2, 3] 

The Generator function is assigned to the Symbol.iterator property, so that the gen object has the Iterator interface, which can be traversed by the ... operator

function* gen() { /*some code */ } var g = gen(); g[Symbol.iterator]() === g; // true 

gen is a Generator function, calling it will generate a traverser object g. Its Symbol.iterator property, which is also an iterator object generation function, returns itself after execution