function fn () {
let x = 0
if (true) {
let x = 1 // only inside this `if`
}
}
const a = 1;
let 可视为新的 var。常量 const 用法类似 let，但不可重新赋值。参阅：
Let and const
const message = `Hello ${name}`;
const str = `
hello
the world
`;
Templates and multiline strings. 参阅: template strings
let bin = 0b1010010;
let oct = 0o755;
const byte = 2 ** 8;
Same as: 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
//return a real array
Array.from(document.querySelectorAll('*'));
//similar to new Array(...), but without the special single-argument behavior
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)
}
Syntactic sugar for prototypes. 参阅: 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();
class ClassWithPrivate {
static #privateStaticField;
static #privateStaticFieldWithInitializer = 42;
static #privateStaticMethod() {
// …
}
}
new Promise((resolve, reject) => {
if (ok) {
resolve(result);
} else {
reject(error);
}
});
for asynchronous programming. 参阅: 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
const [first, last] = ['Nikola', 'Tesla'];
let { title, author } = {
title: 'The Silkworm',
author: 'R. Galbraith'
};
Supports matching arrays and objects. 参阅: Destructuring
const scores = [22, 33];
const [math = 50, sci = 50, arts = 50] = scores;
//Result:
//math === 22, sci === 33, arts === 50
A 默认值 can be assigned when destructuring an array or object
//结果:
//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 });
此示例将 left 键的值分配给 x
for (let {title, artist} of songs) {
···
}
赋值表达式在循环中也有效
const { id, ...detail } = song;
使用 rest(...) 运算符单独提取某些键,并将其余键放入对象中
默认参数
function greet(name = 'Jerry') {
return `Hello ${name}`;
}
剩余参数
function fn(x, ...y) {
// y 是一个数组
return x * y.length;
}
扩展
fn(...[1, 2, 3]);
// 等同于 fn(1, 2, 3)
默认参数、剩余参数、展开运算符。参见: 函数参数
箭头函数
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: "Zhang San" }
Object.values(fatherJS)
//[57, "Zhang San"]
Object.entries(fatherJS)
//[["age", 57], ["name", "Zhang San"]]
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()。参见: 模块导入
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。参见: 模块导出
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) => {
/* 错误处理 */
});
});
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
这很复杂。参见: 生成器
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 迭代
var gen = {};
gen[Symbol.iterator] = function* () {
yield 1;
yield 2;
yield 3;
};
[...gen]; // => [1, 2, 3]
Generator 函数被分配给 Symbol.iterator 属性,使 gen 对象具有 Iterator
接口,可以被 ... 运算符遍历
function* gen() {
/* 某些代码 */
}
var g = gen();
g[Symbol.iterator]() === g; // true
gen 是一个 Generator 函数,调用它会生成一个遍历器对象 g。它的 Symbol.iterator 属性,
也是一个迭代器对象生成函数,执行后返回自身