🎨 前端开发

ES6+

ES6+ Cheat Sheet - 快速参考指南，收录常用语法、命令与实践。

📂 分类 · 前端开发🧭 Markdown 速查🏷️ 2 个标签

#es6#javascript

向下滚动查看内容

返回全部 Cheat Sheets

Getting Started

Block-scoped

Let

JS{2,4}

滚动查看更多

function fn () {
  let x = 0
  if (true) {
    let x = 1 // only inside this `if`
  }
}

Const

滚动查看更多

const a = 1;

let is the new var. Constants (const) work just like let, but cannot be reassigned. See: Let and const

Template Strings

Interpolation

滚动查看更多

const message = `Hello ${name}`;

Multi-line string

滚动查看更多

const str = `
hello
the world
`;

Templates and multiline strings. See: template strings

Binary and octal literals

滚动查看更多

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

See: Binary and Octal Literals

Exponential Operator

滚动查看更多

const byte = 2 ** 8;

Same as: Math.pow(2, 8)

New library additions

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

kind

滚动查看更多

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

Private class

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() {
		// …
	}
}

Promises

make the commitment

滚动查看更多

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

for asynchronous programming. See: Promises

Using Promises

JS{2,3}

滚动查看更多

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

Using Promises in finally

滚动查看更多

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

The handler is called when the promise is fulfilled or rejected

Promise function

滚动查看更多

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

Async-await

JS{2,3}

滚动查看更多

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

Destructuring

Destructuring assignment

Arrays

滚动查看更多

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

Objects

滚动查看更多

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

Supports matching arrays and objects. See: Destructuring

Defaults

滚动查看更多

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 parameters

滚动查看更多

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

Defaults

滚动查看更多

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

滚动查看更多

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

Reassign keys

滚动查看更多

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

Loop

滚动查看更多

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

Assignment expressions also work in loops

Object Deconstruction

滚动查看更多

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

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

Spread Operator

Object Extensions

with object extensions

滚动查看更多

const options = {
	...defaults,
	visible: true
};

No object extension

滚动查看更多

const options = Object.assign({}, defaults, { visible: true });

The object spread operator allows you to build new objects from other objects. See: Object Spread

Array Expansion

with array extension

JS{2,3}

滚动查看更多

const users = [
  ...admins,
  ...editors,
  'rstacruz'
]

No array expansion

滚动查看更多

const users = admins.concat(editors).concat(['rstacruz']);

The spread operator allows you to build new arrays in the same way. See: Spread operator

Functions

Function parameters

Default parameters

滚动查看更多

function greet(name = 'Jerry') {
	return `Hello ${name}`;
}

Rest parameters

滚动查看更多

function fn(x, ...y) {
	// y is an array
	return x * y.length;
}

Extensions

滚动查看更多

fn(...[1, 2, 3]);
//same as fn(1, 2, 3)

Default (default), rest, spread (extension). See: function parameters

Arrow function

Arrow functions

滚动查看更多

setTimeout(() => {
  ···
})

with parameters

滚动查看更多

readFile('text.txt', (err, data) => {
  ...
})

implicit return

JS{1,4,5,6}

滚动查看更多

arr.map(n => n*2)
//no curly braces = implicit return
//Same as: arr.map(function (n) { return n*2 })
arr.map(n => ({
  result: n*2
}))
//Implicitly returning an object requires parentheses around the object

Like a function, but preserves this. See: Arrow functions

Parameter setting default value

滚动查看更多

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

log('Hello'); // Hello World
log('Hello', 'China'); // Hello China
log('Hello', ''); // Hello

Used in conjunction with destructuring assignment defaults

滚动查看更多

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

foo(); // undefined 5

name attribute

滚动查看更多

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

length property

滚动查看更多

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

Objects

Shorthand Syntax

滚动查看更多

module.exports = { hello, bye };

same below:

滚动查看更多

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

See: Object Literals Enhanced

method

滚动查看更多

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

See: Object Literals Enhanced

Getters and setters

JS{2,5}

滚动查看更多

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

See: Object Literals Enhanced

Computed property name

滚动查看更多

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

See: Object Literals Enhanced

Extract value

JS{3,5}

滚动查看更多

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

Modules module

Imports import

滚动查看更多

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

Exports export

滚动查看更多

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

`as` keyword renaming

JS{2,8,12-14}

滚动查看更多

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
};

Dynamically load modules

滚动查看更多

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

ES2020 Proposal introduce import() function

import() allows module paths to be dynamically generated

滚动查看更多

const main = document.querySelector('main');

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

import.meta

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

Import Assertions

static import

滚动查看更多

import json from './package.json' assert { type: 'json' };
//Import all objects in the json file

Dynamic Import

滚动查看更多

const json = await import('./package.json', { assert: { type: 'json' } });

Generators

Generator function

滚动查看更多

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

For..of + iterator

滚动查看更多

let fibonacci = {
	[Symbol.iterator]() {
		let pre = 0,
			cur = 1;
		return {
			next() {
				[pre, cur] = [cur, pre + cur];
				return { done: false, value: cur };
			}
		};
	}
};

for (var n of fibonacci) {
	// truncate sequence at 1000
	if (n > 1000) break;
	console.log(n);
}

For iterating over generators and arrays. See: For..of iteration

Relationship with Iterator interface

滚动查看更多

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

Symbol.iterator property

滚动查看更多

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

ES6+

Getting Started

Let

Const

Interpolation

Multi-line string

New string methods

New Number Methods

New Math methods

New Array methods

Constructor

method

Call the superclass method

Static methods

Static private class

Promises

Destructuring

Arrays

Objects

Spread Operator

with object extensions

No object extension

with array extension

No array expansion

Functions

Default parameters

Rest parameters

Extensions

Arrow functions

with parameters

implicit return

Objects

Modules module

static import

Dynamic Import

Generators

see also

相关 Cheat Sheets

React

Vue.js

Svelte

CSS 3

HTML