快速浏览 ES2015、ES2016、ES2017、ES2018 及以后的 JavaScript 新特性
function fn () {
let x = 0
if (true) {
let x = 1 // 只在这个`if`里面
}
}
const a = 1
let
是新的 var
。 常量(const
) 就像 let
一样工作,但不能重新分配。 请参阅:Let 和 const
let bin = 0b1010010
let oct = 0o755
请参阅:二进制和八进制文字
const byte = 2 ** 8
// 同: Math.pow(2, 8)
"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")
Number.EPSILON
Number.isInteger(Infinity) // false
Number.isNaN("NaN") // false
Math.acosh(3) // 1.762747174039086
Math.hypot(3, 4) // 5
Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2
// 返回一个真实的数组
Array.from(document.querySelectorAll("*"))
// 类似于 new Array(...),但没有特殊的单参数行为
Array.of(1, 2, 3)
请参阅: 新方法
class Circle extends Shape {
constructor (radius) {
this.radius = radius
}
getArea () {
return Math.PI * 2 * this.radius
}
expand (n) {
return super.expand(n) * Math.PI
}
static createFromDiameter(diameter) {
return new Circle(diameter / 2)
}
}
原型的语法糖。 请参阅: 类
javascript 默认字段是公共的(public
),如果需要注明私有,可以使用(#
)
class Dog {
#name;
constructor(name) {
this.#name = name;
}
printName() {
//只能在类内部调用私有字段
console.log(`你的名字是${this.#name}`)
}
}
const dog = new Dog("putty")
//console.log(this.#name)
//Private identifiers are not allowed outside class bodies.
dog.printName()
class ClassWithPrivate {
static #privateStaticField;
static #privateStaticFieldWithInitializer = 42;
static #privateStaticMethod() {
// …
}
}
new Promise((resolve, reject) => {
if (ok) { resolve(result) }
else { reject(error) }
})
用于异步编程。 请参阅:Promises
promise
.then((result) => { ··· })
.catch((error) => { ··· })
promise
.then((result) => { ··· })
.catch((error) => { ··· })
.finally(() => {
/* 独立于成功/错误的逻辑 */
})
当承诺被履行或被拒绝时,处理程序被调用
Promise.all(···)
Promise.race(···)
Promise.reject(···)
Promise.resolve(···)
async function run () {
const user = await getUser()
const tweets = await getTweets(user)
return [user, tweets]
}
async
函数是使用函数的另一种方式。 请参阅:异步函数
const [first, last] = ['Nikola', 'Tesla']
let {title, author} = {
title: 'The Silkworm',
author: 'R. Galbraith'
}
支持匹配数组和对象。 请参阅:解构
const scores = [22, 33]
const [math = 50, sci = 50, arts = 50] = scores
// Result:
// math === 22, sci === 33, arts === 50
可以在解构数组或对象时分配默认值
function greet({ name, greeting }) {
console.log(`${greeting}, ${name}!`)
}
greet({ name: 'Larry', greeting: 'Ahoy' })
对象和数组的解构也可以在函数参数中完成
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 })
此示例将 x
分配给 left
键的值
for (let {title, artist} of songs) {
···
}
赋值表达式也在循环中工作
const { id, ...detail } = song;
使用 rest(...)
运算符单独提取一些键和对象中的剩余键
const options = {
...defaults,
visible: true
}
const options = Object.assign(
{}, defaults,
{ visible: true })
对象扩展运算符允许您从其他对象构建新对象。 请参阅:对象传播
const users = [
...admins,
...editors,
'rstacruz'
]
const users = admins
.concat(editors)
.concat([ 'rstacruz' ])
扩展运算符允许您以相同的方式构建新数组。 请参阅:扩展运算符
function greet (name = 'Jerry') {
return `Hello ${name}`
}
function fn(x, ...y) {
// y 是一个数组
return x * y.length
}
fn(...[1, 2, 3])
// 与 fn(1, 2, 3) 相同
Default(默认), rest, spread(扩展)。 请参阅:函数参数
setTimeout(() => {
···
})
readFile('text.txt', (err, data) => {
...
})
arr.map(n => n*2)
// 没有花括号 = 隐式返回
// 同: arr.map(function (n) { return n*2 })
arr.map(n => ({
result: n*2
}))
// 隐式返回对象需要在对象周围加上括号
类似函数,但保留了 this
。 请参阅:箭头函数
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
const App = {
start () {
console.log('running')
}
}
// 同: App = { start: function () {···} }
请参阅:对象文字增强
const App = {
get closed () {
return this.status === 'closed'
},
set closed (value) {
this.status = value ? 'closed' : 'open'
}
}
请参阅:对象字面量增强
let event = 'click'
let handlers = {
[`on${event}`]: true
}
// 同: handlers = { 'onclick': true }
请参阅:对象字面量增强
const fatherJS = { age: 57, name: "张三" }
Object.values(fatherJS)
// [57, "张三"]
Object.entries(fatherJS)
// [["age", 57], ["name", "张三"]]
import 'helpers'
// 又名: require('···')
import Express from 'express'
// 又名: const Express = require('···').default || require('···')
import { indent } from 'helpers'
// 又名: const indent = require('···').indent
import * as Helpers from 'helpers'
// 又名: const Helpers = require('···')
import { indentSpaces as indent } from 'helpers'
// 又名: const indent = require('···').indentSpaces
import
是新的 require()
。 请参阅:Module imports
export default function () { ··· }
// 又名: module.exports.default = ···
export function mymethod () { ··· }
// 又名: module.exports.mymethod = ···
export const pi = 3.14159
// 又名: module.exports.pi = ···
const firstName = 'Michael';
const lastName = 'Jackson';
const year = 1958;
export { firstName, lastName, year };
export * from "lib/math";
export
是新的module.exports
。 请参阅:Module exports
as
关键字重命名import {
lastName as surname // 导入重命名
} from './profile.js';
function v1() { ... }
function v2() { ... }
export { v1 as default };
// 等同于 export default v1;
export {
v1 as streamV1, // 导出重命名
v2 as streamV2, // 导出重命名
v2 as streamLatestVersion // 导出重命名
};
button.addEventListener('click', event => {
import('./dialogBox.js')
.then(dialogBox => {
dialogBox.open();
})
.catch(error => {
/* Error handling */
})
});
ES2020提案 引入 import()
函数
const main = document.querySelector('main')
import(`./modules/${someVariable}.js`)
.then(module => {
module.loadPageInto(main);
})
.catch(err => {
main.textContent = err.message;
});
ES2020 为 import
命令添加了一个元属性 import.meta
,返回当前模块的元信息
new URL('data.txt', import.meta.url)
Node.js 环境中,import.meta.url
返回的总是本地路径,即 file:URL
协议的字符串,比如 file:///home/user/foo.js
import json from "./package.json" assert {type: "json"}
// 导入 json 文件中的所有对象
const json =
await import("./package.json", { assert: { type: "json" } })
function* idMaker () {
let id = 0
while (true) { yield id++ }
}
let gen = idMaker()
gen.next().value // → 0
gen.next().value // → 1
gen.next().value // → 2
情况很复杂。 请参阅:Generators
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) {
// 在 1000 处截断序列
if (n > 1000) break;
console.log(n);
}
用于迭代生成器和数组。 请参阅:For..of iteration
var gen = {};
gen[Symbol.iterator] = function* () {
yield 1;
yield 2;
yield 3;
};
[...gen] // => [1, 2, 3]
Generator
函数赋值给 Symbol.iterator
属性,从而使得 gen
对象具有了 Iterator
接口,可以被 ...
运算符遍历了
function* gen() { /* some code */ }
var g = gen();
g[Symbol.iterator]() === g // true
gen
是一个 Generator
函数,调用它会生成一个遍历器对象g
。它的 Symbol.iterator
属性,也是一个遍历器对象生成函数,执行后返回它自己