ES6/ES2015+cheatsheet

贡献者：lele88lala,BAI

块级作用域

Let

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

Const

JS
const a = 1;

let 是新的 var 关键字， const 的作用跟 let 一样, 只不过不能被再次重新赋值。详见: Let and const

反引号字符串

字符串

JS
const message = `Hello ${name}`;

多行字符串

JS
const str = `
hello
world
`;

详见: Template strings

二进制和八进制

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

详见: Binary and octal literals

一些新方法

新的字符串方法

JS
"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 methods

类（Class）

JS
class Circle extends Shape {

构造函数

JS
constructor (radius) {
    this.radius = radius
  }

方法

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

调用超类方法

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

静态方法

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

Class 是原型的一些语法糖详见: Classes

指数算法

JS
const byte = 2 ** 8;
// 也可以写成  Math.pow(2, 8)

Promises

创建 promises

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

解决异步编程的问题. 详见: Promises

使用 Promise

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

Promise 中使用 finally

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

当 promise 完成或拒绝时，将调用 finally 中的回调函数。

Promise 方法

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

Async-await

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

async 方法是使用函数的另一种方式。

详见: async function

解构

解构赋值

数组

JS
const [first, last] = ["Nikola", "Tesla"];

对象

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

支持数组和对象的解构。查看: Destructuring

默认值

JS
const scores = [22, 33];
const [math = 50, sci = 50, arts = 50] = scores;
// Result:
// math === 22, sci === 33, arts === 50

解构数组或对象时可以设置默认值。

函数参数

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

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

在函数参数中也可以执行对象和数组的解构

函数参数中的默认值

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

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

重新设置 key

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

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

在这个例子中，把 x 重新分配给 left 键的值

循环

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

赋值表达式也可以循环工作。

对象解构

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

使用 rest（...）运算符分别提取一些键和对象中的其余键

展开（Spread）

对象展开

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

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

对象的展开运算可以使你在一个对象的基础上创建一个新对象。

详见: Object spread

数组展开

JS
const users = [...admins, ...editors, "rstacruz"];

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

展开运算可以用相同的方式构建新阵列。

查看: Spread operator

函数

默认参数

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

剩余(Rest)参数

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

函数展开

JS
fn(...[1, 2, 3]);
// 与 fn(1, 2, 3) 相同

详见: Function arguments

箭头函数

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

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

JS
// 无内层的花括号可以隐式返回
numbers.map((n) => n * 2);
// 与 numbers.map(function (n) { return n * 2 }) 相同
numbers.map((n) => ({ result: n * 2 }));
// 也可以返回一个对象

箭头函数与普通函数类似，但保留 this 的作用域详见: Fat arrows

对象相关

简写语法

JS
module.exports = { hello, bye };
// 与 module.exports = { hello: hello, bye: bye } 相同

详见: Object literal enhancements

对象方法

JS
const App = {
  start() {
    console.log("running");
  },
};
// 与 App = { start: function () {···} } 相同

详见: Object literal enhancements

Getters and setters

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

详见: Object literal enhancements

动态属性名称

JS
let event = "click";
let handlers = {
  [`on${event}`]: true,
};
// 与 handlers = { 'onclick': true } 相同

详见: Object literal enhancements

提取(Extract)值

JS
const fatherJS = { age: 57, name: "张三" };
Object.values(fatherJS);
// [57, "张三"]
Object.entries(fatherJS);
// [["age", 57], ["name", "张三"]]

模块

导入（Import)

JS
import "helpers";
// require('···')

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

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

JS
import * as Helpers from "helpers";
// const Helpers = require('···')

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

import 是对 require()的优化。详见: Module imports

导出（Export）

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

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

JS
export const pi = 3.14159;
// module.exports.pi = ···

export 是 module.exports的优化。详见: Module exports

生成器(Generator)

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

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

详见: Generators

For..of 迭代

JS
for (let i of iterable) {
  ···
}

用于遍历生成器和数组

详见: For..of iteration