官方文档：HTTP Proxy | WebStorm Documentation (jetbrains.com)
影响插件、工具下载等常用请求

二：Git代理配置

#设置全局代理
git config --global http.proxy http://127.0.0.1:10811
git config --global https.proxy https://127.0.0.1:10811
git config --global http.proxy socks5://127.0.0.1:10810
git config --global https.proxy socks5://127.0.0.1:10810

#只对github.com使用代理，其他仓库不走代理
git config --global http.https://github.com.proxy socks5://127.0.0.1:10810
git config --global https.https://github.com.proxy socks5://127.0.0.1:10810
#取消github代理
git config --global --unset http.https://github.com.proxy
git config --global --unset https.https://github.com.proxy

#取消全局代理
git config --global --unset http.proxy
git config --global --unset https.proxy

影响代码仓库的拉取、推送及git的其他请求

三：Npm代理配置

#直接代理
npm config set proxy http://127.0.0.1:18011
npm config set https-proxy https://127.0.0.1:18011

#授权代理
npm config set proxy http://username:password@127.0.0.1:18011
npm config set https-proxy https://username:password@127.0.0.1:18011

#取消代理
npm config delete proxy
npm config delete https-proxy

影响npm下载、推送等

一：XAMPP环境

本地启用wordpress，还原现网主题与配置，启用本地测试域名

1.1：本地wordpress

XAMPP是免费的集成安装包（下载地址），集成了Apache、php8、mysql、phpMyAdmin

• 下载wordpress解压到自己想要放的位置，我选择在/xampp/apps/www.hu365.test
• 把线上使用的主题完整下载并在本地主题使用
• 通过phpMyAdmin，创建数据库并导入线上的备份数据
• 配置xampp/apache/conf/extra/httpd-vhosts.conf文件，添加本地测试域名：www.hu365.test
• 本地host文件，将www.hu365.test指向127.0.0.1

此时，就可以通过www.hu365.test访问和线上环境一样的页面了

1.2：wordpress页面

新建页面技术题库，使用代码编辑器，引入最新的react.js、以及生产js、css

<!-- 所有额外引入的js、css -->
<div>
	<script src="/wp-content/apps/topic-bank/static/js/react.production.min.js" crossorigin></script>
	<script src="/wp-content/apps/topic-bank/static/js/react-dom.production.min.js" crossorigin></script>
	<script defer="defer" src="/wp-content/apps/topic-bank/static/js/main.js"></script>
	<link href="/wp-content/apps/topic-bank/static/css/main.css" rel="stylesheet">
</div>
<!-- 这是react渲染节点 -->
<div id="react_root"></div>

• 这里有进行格式化排版，实际代码为了减少多余换行，去掉了所有换行与空格
• 引入路径都是用绝对路径引入
• 路径/wp-content/apps/topic-bank是react指定的生产目录
• main.js、main.css为生产环境不含hash的最终文件，此举是为了测试，异步加载主js
• 页面访问路径（URL），需在路由配置中配置为basename，此处配置为/topic-bank

二：React应用

使用create-react-app构建react app，配置生产文件名、生产路径、静态资源等

2.1：替换index.html

访问本地页面：技术题库，右键另存为页面得到index.html页面和资源文件夹

• 把资源文件夹重命名：static，并在static下新建文件夹：js、css
• js文件移动到js文件夹，css文件移动到css文件夹，并同步修改相关引用路径
• 下载react.production.min.js、react-dom.production.min.js到js文件夹

此举是为了实现测试环境的样式和线上相同，方便直接使用react进行调试开始

2.2：生产配置

因为create-react-app构建应用无法直接修改webpack，这里需要安装使用react-app-rewired，可以同步安装customize-cra

npm install react-app-rewired --save-dev

创建文件config-overrides.js，在其中修改配置：

module.exports = function override(config, env) {
	// 仅修改生产配置
	if (env !== 'production') return config;
	const paths = require('react-scripts/config/paths');

	// 额外引入的
	// react.production.min.js、react-dom.production.min.js
	// 不参与打包
	config.externals = {
		'react': 'React',
		'react-dom': 'ReactDOM',
	}

	// 生产输出目录
	// 与"页面"中路径一致：/wp-content/apps/topic-bank
	config.output.path = "C:/xampp/apps/www.hu365.dev/wp-content/apps/topic-bank";
	paths.appBuild = "C:/xampp/apps/www.hu365.dev/wp-content/apps/topic-bank";

	// Get rid of hash for js files
	// 方便测试，脚本文件去除hash
	config.output.filename = "static/js/[name].js";
	config.output.chunkFilename = "static/js/[name].chunk.js";

	// Get rid of hash for css files
	// 方便测试，样式文件去除hash
	const miniCssExtractPlugin = config.plugins.find(element => element.constructor.name === "MiniCssExtractPlugin");
	miniCssExtractPlugin.options.filename = "static/css/[name].css";
	miniCssExtractPlugin.options.chunkFilename = "static/css/[name].css";

	// Get rid of hash for media files
	// 方便测试，其他文件去除hash
	config.module.rules[1].oneOf.forEach(oneOf => {
		if (!oneOf.options || oneOf.options.name !== "static/media/[name].[hash:8].[ext]") {
			return;
		}
		oneOf.options.name = "static/media/[name].[ext]";
	});
	return config;
}

2.3：添加路由

新建router/index.tsx

// 列表页、和详情页
import TopicList from "../views/TopicList";
import TopicContent from "../views/TopicContent";
import {
	createBrowserRouter,
	RouterProvider,
} from "react-router-dom";

const router = createBrowserRouter([
	{
		path: "/",
		element: <TopicList />,
	},
	{
		path: "/topicName",
		element: <TopicContent />,
	},
], {
	// 通过环境变量配置基础路径
	basename: process.env.REACT_APP_ROUTER_BASE_NAME
});

export default function Router() {
	return (
		<RouterProvider router={router} />
	)
}

环境变量配置：

// 测试环境：.env.development
// 随意填写
REACT_APP_ROUTER_BASE_NAME = /

// 生产环境：.env.production
// 该路径必须和"页面"访问URL相同，否则无法访问（/topic-bank）
REACT_APP_ROUTER_BASE_NAME = /topic-bank

2.4：配置别名

正在开发中，忽然发现../../*的书写格式还是太丑了，赶紧把别名加上
webpack的alias配置，同样在config-override.js中配置：

const path = require("node:path");

module.exports = function override(config, env) {
    // 相对路径别名
    config.resolve.alias = {
        '@': path.resolve(__dirname, 'src'),
        '@Pages': path.resolve(__dirname, 'src/pages'),
        '@Style': path.resolve(__dirname, 'src/style'),
        '@Components': path.resolve(__dirname, 'src/components'),
    };

    // 其他内容
    
    return config;
}

TS配置，tsconfig.json文件：

{
  "compilerOptions": {
    ...
    "paths": {
      "@/*": ["./*"],
      "@Pages/*": ["./pages/*"],
      "@Style/*": ["./style/*"],
      "@Components/*": ["./components/*"]
    }
  },
  ...
}

三：开发中

完成以上工作后，启动测试服务，访问的页面和线上“技术题库”页面样式一致
这样就可以脱离wordpress进行本地开发
待到一定阶段，需要看最终效果时；直接build一下，再在本地环境访问“技术题库”即可

好了，可以开始接下来开发工作了！

• jsPDF – Documentation (artskydj.github.io)
• Options – html2canvas (hertzen.com)

一：我的需求

浏览器接口：window.print()，可以直接调用打印，并存储为PDF文档
用工具库：html2canvas+jsPDF实现以上（类似的）PDF

二：我的实现

2.1：基础参数

首先定义一个标准数据，以Windows下的A4打印为基础：

// 基础参数
const printParams = {
	a4: {
		dpi: 96, // windows 下默认 dpi
		width: 210, // A4 标准宽度 mm，含边距
		height: 297, // A4 标准高度 mm， 含边距
		marginX: 10, // 默认打印左右边距，约为 10mm
		marginY: 10, // 默认打印上下边距，约为 10mm
	},
	// 以下是设置值/初始值
	dpi: 288, // 设置的打印密度，数值越大越清晰，PDF文件越大
	format: 'a4', // 打印类型，这里只有 A4
	orientation: 'portrait', // portrait | landscape
	// 以下为计算出的值，方便调用
	ratio: 1, // dpi 比例
	width: 0, // PDF 文档宽度，不含边距
	widthFull: 0, // PDF 文档完整宽度
	height: 0, // PDF 文档高度，不含边距
	heightFull: 0, // PDF 文档完整高度
	marginX: 0, // PDF 左右边距
	marginY: 0, // PDF 上下边距
}

数据初始化：

// 根据设置的 dpi，format，orientation 数据初始化
const { dpi: setDpi, orientation, format } = printParams;
const { dpi, width, height, marginX, marginY } = printParams[format];
printParams.ratio = setDpi/dpi;
let setWidth;
switch (orientation) {
	case 'landscape':
		printParams.width = height - 2 * marginY; // 不含边距的内容宽度
		printParams.height = width - 2 * marginX; // 不含边距的内容高度
		printParams.widthFull = height; // 整页PDF宽度
		printParams.heightFull = width; // 整页PDF高度
		printParams.marginX = marginY; // 左右单边边距
		printParams.marginY = marginX; // 上下单边边距
		setWidth = mm2px(height, dpi); // 页面宽度像素值
		break;
	case 'portrait':
	default:
		printParams.width = width - 2 * marginX;
		printParams.height = height - 2 * marginY;
		printParams.widthFull = width;
		printParams.heightFull = height;
		printParams.marginX = marginX;
		printParams.marginY = marginY;
		setWidth = mm2px(width, dpi);
}
// 设置body宽度，给 window.print 一个“最适合”的宽度
window.document.body.style.width = `${setWidth}px`;

这里有用到一个mm/px的转换，把以前写过的方法拿过来：

/**
 * 工具类：mm转px
 * */
function mm2px(mm, dpi, radio) {
	if (mm == null) return 0;
	dpi = dpi || printParams.dpi;
	const ret = parseFloat(`${(mm * dpi * 10) / 254}`);
	if (radio == null || radio <= 0) radio = 4;
	radio = 10 ** radio;
	return Math.floor(ret * radio) / radio;
}
/**
 * 工具类：px转mm
 * */
function px2mm(px, dpi, radio) {
	if (px == null) return 0;
	dpi = dpi || printParams.dpi;
	const ret = parseFloat(`${(px * 254) / (dpi * 10)}`);
	if (radio == null || radio <= 0) radio = 4;
	radio = 10 ** radio;
	return Math.floor(ret * radio) / radio;
}

2.2：生成图片

// 需要用到的数据
const $pdfDom = document.getElementById('pdf');
const {
	ratio, orientation, format,
	width, height, widthFull, marginX, marginY
} = printParams;

html2canvas($pdfDom, {
	scale: window.devicePixelRatio * Math.ceil(ratio), // 缩放
	allowTaint: true,
	useCORS: true,
}).then((canvas) => {
	const canvasWidth = this.px2mm(canvas.width);
	const canvasHeight = this.px2mm(canvas.height);
	// ··· 以下是 pdf 生成
	// ···
});

此处用到html2canvas实现绘制页面生成图片，主要影响清晰度的是参数scale：

默认值为window.devicePixelRatio，主要用于防止页面缩放导致的生成图片不清晰问题
为了实现更好地缩放，最好乘以一个整数值，以保证像素值的对应，就把它当作windows下的高分屏缩放理解就行

这里用px2mm转换成mm主要方便用于后面的PDF编辑

2.3：生成PDF

// 得到图片数据
const pageData = canvas.toDataURL('image/jpeg', 1.0);
// 创建PDF文档对象
const PDF = new JsPDF({ orientation, format });
// 标准宽度下，图片的相对高度
const imageHeight = (width / canvasWidth) * canvasHeight;
// 考虑可能有多页的情况，用 leftHeight 循环判断
let leftHeight = imageHeight;
// 每次绘制图片的位置垂直偏移量
let position = marginY;
while (leftHeight > 0) {
	// 1：图形绘制到PDF
	PDF.addImage(pageData, 'JPEG', marginX, position, width, imageHeight);
	leftHeight -= height;
	position -= height;
	// 2：页头页脚添加，用 rect 遮罩
	PDF.setFillColor(255, 255, 255); // 填充白色，每次填充前都要定义
	PDF.rect(0, 0, widthFull, marginY, 'F');
	PDF.rect(0, height + marginY, widthFull, marginY, 'F');
	// 添加空白页
	if (leftHeight > 0) {
		PDF.addPage();
	}
}
PDF.save(`${title}.pdf`);

这里有几个点，需要留意：

1. 默认PDF为单页，需要判断“图片”相对高度，超出标准高度时添加新页面
2. 每次添加新页面，PDF绘制即“当前页”，相对位置都是相对“当前页”而言
3. 绘制遵循页面标准的层级，后绘制内容会覆盖已绘制内容
4. 垂直偏移position是图片相对“当前页”的偏移，向上偏移一个内容页的距离后，当前页绘制的就是下一页该显示的图片内容
5. 页眉页脚的模拟绘制，每次都要设置填充颜色（默认为黑色），因为每次都是“不同页”，参考第2点

三：实现效果

目前只需要模拟A4下的打印，在对比使用window.print()生成的PDF和手动生成的PDF之后，还是比较满意的，以后再有自定义编辑页眉页脚，到时候再说

要说有什么不满意的地方，那肯定是哪里不满意再改哪里，哪里不购加哪里
不过呢，有个东西肯定只会越改（加）越糟的，那就是文件大小：

Holy shit，大了整整20倍·····
这和生成图片时设置的缩放比（scale）有关，目前我测试时改值为4.5（1.5*288/96），既使变成1/5也还有400KB，大约4倍的差距，看来文件大小的劣势还是挺明显的

不过呢，现在谁还在乎这么点大小呢···谁还在乎呢···谁···

• Window.status – Web APIs | MDN (mozilla.org)

在使用apiCloud编写手机App的项目里，有部分使用纯原生js实现的功能，在这里调试的时候，我遇到了一个奇怪的问题，简单地说，他是这样的：

var status = ['111', '222'];
for (var i = 0;i < status.length;i++) {
	// 处理数据
	console.log(status[i]); // 1 1 1 , 2 2 2
}

我的本意是打算把'111'和'222'当作参数来处理的，但是结果却超出我的预料
它居然循环出了：'1' '1' '1' ',' '2' '2' '2'总计6个参数

看结构，它似乎是对处理的数组进行了字符串转换，但是我并没有做此操作
第一想法，是不是appCloud哪里做了特殊处理，毕竟这是在它家的平台运行，但是并没有找到相关处理

在寻人讨论的时候，他说了一句：你在浏览器调试试试，看有没有这个问题
听到这话的我，内心其实是抗拒的，这么简单的代码，看一眼就知道结果，还要跑去浏览器去调试？那不是多此一举么

然后我就被打脸了，浏览器的调试工具输出了一样的结果···

这···这···最基础的调试方法狠狠的打了一耳光

所以再仔细分析问题，把var换成let/const，打印结果如预期

const status = ['111', '222'];
for (var i = 0;i < status.length;i++) {
	// 处理数据
	console.log(status[i]); // 111 222
}

那么用var的问题，自然是全局变量的问题，那对应的全局变量就是：window.status

一个早期用来显示浏览器加载状态的文本信息字段，只能用来存储String类型，所以用var定义时，实际上是在给window.status赋值，而且它会自动将数据进行字符串转换

那么，记录这次经历不是为了记下这个将被废弃的属性，而是要让自己了解到，查找问题、解决问题的思路与逻辑，一定要一丝不苟，容不得“想当然”的跳过

1. zenorocha/clipboard.js: Modern copy to clipboard. No Flash. Just 3kb gzipped (github.com)

Clipboard.js

一个专职于“复制文本”操作的 js 库，以其短小精悍、简单实用的功能而被广泛应用

写这边文章的目的是为了说明：Clipboard.js的事件绑定存在直接绑定和事件委托两种方式

其实官网有说明使用方法和注意事项，不过鉴于以前没用过这个库，我并没有第一时间去看文档，反而是看过源码之后才发现文档里面居然已经写明了：

所以，看文档的好习惯，还是不能丢了···，那下面纯粹记录一下bug解决过程

一：Bug 描述

维护一个Vue2+Element的项目，调用Clipboard.js初始化的复制按钮；页面第一次进入后点击正常，后续退出、再进入，每次点击会累计多触发一次

看看初始化是怎么写的：

if (!this.jsonClipboard) {
    this.jsonClipboard = new Clipboard('.json-btn');
    this.jsonClipboard.on('success', (e) => {
        this.$message.success('复制成功');
    })
}

这么写好像没问题；保证每次进入页面只初始化一次
而且每次页面进入，dom都是重新生成，不存在重复绑定同一个dom的情况

难道，他绑定的事件不是绑定在按钮dom？

二：源码查阅

GitHub：zenorocha/clipboard.js: Modern copy to clipboard. No Flash. Just 3kb gzipped (github.com)
文件：/src/clipboard.js

// https://github.com/zenorocha/clipboard.js/blob/master/src/clipboard.js#L22
/**
 * Base class which takes one or more elements, adds event listeners to them,
 * and instantiates a new `ClipboardAction` on each click.
 */
class Clipboard extends Emitter {
    /**
     * @param {String|HTMLElement|HTMLCollection|NodeList} trigger
     * @param {Object} options
     */
    constructor(trigger, options) {
        super();

        this.resolveOptions(options);
        this.listenClick(trigger); // 事件监听
    }

    // ...
    // 此处省略 1w 字
    // ...
    
    // https://github.com/zenorocha/clipboard.js/blob/master/src/clipboard.js#L58
    /**
     * Adds a click event listener to the passed trigger.
     * @param {String|HTMLElement|HTMLCollection|NodeList} trigger
     */
    listenClick(trigger) {
        this.listener = listen(trigger, 'click', (e) => this.onClick(e));
    }

    // ...
    // 此处省略 1w 字
    // ...
} 

listen方法来自于组件good-listener，出自他自己之手
GitHub：zenorocha/good-listener: A more versatile way of adding & removing event listeners (github.com)
文件：/src/listen.js

// https://github.com/zenorocha/good-listener/blob/master/src/listen.js#L4
/**
 * Validates all params and calls the right
 * listener function based on its target type.
 *
 * @param {String|HTMLElement|HTMLCollection|NodeList} target
 * @param {String} type
 * @param {Function} callback
 * @return {Object}
 */
function listen(target, type, callback) {
    if (!target && !type && !callback) {
        throw new Error("Missing required arguments");
    }

    if (!is.string(type)) {
        throw new TypeError("Second argument must be a String");
    }

    if (!is.fn(callback)) {
        throw new TypeError("Third argument must be a Function");
    }

    if (is.node(target)) {
        return listenNode(target, type, callback);
    } else if (is.nodeList(target)) {
        return listenNodeList(target, type, callback);
    } else if (is.string(target)) {
        return listenSelector(target, type, callback);
    } else {
        throw new TypeError(
            "First argument must be a String, HTMLElement, HTMLCollection, or NodeList"
        );
    }
}

/**
 * Adds an event listener to a HTML element
 * and returns a remove listener function.
 *
 * @param {HTMLElement} node
 * @param {String} type
 * @param {Function} callback
 * @return {Object}
 */
function listenNode(node, type, callback) {
    node.addEventListener(type, callback);

    return {
        destroy: function() {
            node.removeEventListener(type, callback);
        }
    }
}

/**
 * Add an event listener to a list of HTML elements
 * and returns a remove listener function.
 *
 * @param {NodeList|HTMLCollection} nodeList
 * @param {String} type
 * @param {Function} callback
 * @return {Object}
 */
function listenNodeList(nodeList, type, callback) {
    Array.prototype.forEach.call(nodeList, function(node) {
        node.addEventListener(type, callback);
    });

    return {
        destroy: function() {
            Array.prototype.forEach.call(nodeList, function(node) {
                node.removeEventListener(type, callback);
            });
        }
    }
}

/**
 * Add an event listener to a selector
 * and returns a remove listener function.
 *
 * @param {String} selector
 * @param {String} type
 * @param {Function} callback
 * @return {Object}
 */
function listenSelector(selector, type, callback) {
    return delegate(document.body, selector, type, callback);
}

这里这哥们又调用了一个自己的库：delegate
Github：zenorocha/delegate: Lightweight event delegation (github.com)

三：解决方案

从上面的源码已经很清楚：
参数为node、nodeList时，直接使用addEventListener进行事件绑定；
参数为字符串时，会用事件委托实现选择器可能的所有dom的操作事件

而出现bug的原因自然是：

// 此处使用类选择器 .json-btn
this.jsonClipboard = new Clipboard('.json-btn');

所以在使用字符串/选择器做参数时，一定要在页面销毁/退出时，主动销毁绑定的委托事件：

beforeDestroy() {
    if (this.jsonClipboard) this.jsonClipboard.destroy();
},

四：总结

总的来说，依托外部组件进行的事件绑定，一定要清楚它是如何绑定、如何解绑
在Vue中使用Clipboard.js，不管用何种方式进行初始化，它绑定的事件会一直存在

所以任何时候都应在组件销毁（前）进行手动销毁，即使指定Dom的事件绑定不会出现类似bug，但绑定的事件会一直存在于内存中，对性能也是一种负担

1.1：Symbol.prototype.description

返回Symbol对象的可选描述的字符串

Symbol('desc').description;        // "desc"
Symbol.iterator.description;       // "Symbol.iterator"
Symbol.for('foo').description;     // "foo"
`${Symbol('foo').description}bar`; // "foobar"

• Symbol.prototype.description – JavaScript | MDN (mozilla.org)

1.2：Object.fromEntries

把键值对列表转换为一个对象；这个键值对列表可以是Array、Map或者其它实现了可迭代协议（Iteration protocols）的可迭代对象
与Object.entries属于相反操作的方法

let entries = new Map([['foo', 'bar'], ['baz', 42]]);
let newObj = Object.fromEntries(entries);  // { foo: "bar", baz: 42 }
// 与Object.entries互转
let newEntries = Object.entries(newObj);   // [['foo', 'bar'], ['baz', 42]]
newObj = Object.fromEntries(newEntries );  // { foo: "bar", baz: 42 }

• Object.fromEntries() – JavaScript | MDN (mozilla.org)

1.3：删除空格（trimStart/trimEnd/trimLeft/trimRight）

trimStart()、trimLeft()：从一个字符串的开头移除空白字符
trimEnd()、trimRight()：从一个字符串的末端移除空白字符
trimStart()、trimEnd()为标准名称，trimLeft()、trimRight()为兼容web定义的别名

const greeting = '   Hello world!   ';
greeting.trimStart();   // 'Hello world!   '
greeting.trimLeft();    // 'Hello world!   '
greeting.trimEnd();     // '   Hello world!'
greeting.trimRight();   // '   Hello world!'
greeting.trim();        // 'Hello world!' ES5的语法，移除两端空白字符

• String.prototype.trimStart() – JavaScript | MDN (mozilla.org)
• String.prototype.trimRight() – JavaScript | MDN (mozilla.org)

1.4：Array.prototype.flat/flatMap

flat([depth])：按可指定的深度（depth）遍历数组，并将所有元素与子数组的元素合并为一个新数组；用于扁平化数组

const arr1 = [0, 1, 2, [3, 4]];
arr1.flat();   // [0, 1, 2, 3, 4]
const arr2 = [0, 1, 2, [[[3, 4]]]];
arr2.flat();   // [0, 1, 2, [[3, 4]]]
arr2.flat(2);  // [0, 1, 2, [3, 4]]
arr2.flat(3);  // [0, 1, 2, 3, 4]
arr2.flat(4);  // [0, 1, 2, 3, 4]

flatMap()：使用映射函数映射每个元素（等同于map方法），然后将结果压缩成一个新数组（等同于flat(1)，depth始终为1）；可用于增删元素，实现map遍历下的filter功能，但是其工作效率较低，因为它会不断创建临时数组，并将数组数据复制到结果数据中

const arr1 = [1, 2, 3, 4];
arr1.map(x => x * 2);                 // [2, 4, 6, 8]
arr1.flatMap(x => [x * 2]);           // [2, 4, 6, 8]
arr1.flatMap(x => [x * 2, x]);        // [2, 1, 4, 2, 6, 3, 8, 4]
arr1.flatMap(x => x > 2 ? [x] : []);  // [3, 4]

• Array.prototype.flat() – JavaScript | MDN (mozilla.org)
• Array.prototype.flatMap() – JavaScript | MDN (mozilla.org)

二：ES2020

2.1：String.prototype.matchAll

返回一个包含所有匹配正则表达式的结果及分组捕获组的迭代器，该迭代器调用结果耗尽后，需要再次调用方法，获取一个新的迭代器
使用时正则表达式需使用g标志，否则抛出TypeError
其内部做了一个regexp的复制，所以不像exec，lastIndex在字符串扫描时不会改变

const regexp = RegExp('foo[a-z]*','g');
const str = 'table football, foosball';

// 结果耗尽，迭代器为空
const m1 = str.matchAll(regexp);
Array.from(m1);          // [Array(1), Array(1)]
Array.from(m1);          // []

// 与 exec() 的对比，不用反复取值，直接遍历
let match;
while ((match = regexp.exec(str)) !== null) {
    console.log(match); // ['football', ...] ['foosball', ...]
}
const m2 = str.matchAll(regexp);
for (match of m2) {
    console.log(match); // ['football', ...] ['foosball', ...]
}

// 与 match() 的对比，结果包含分组捕获
const regexp2 = /t(e)(st(\d?))/g;
const str2 = 'test1test2';
str2.match(regexp2); // ['test1', 'test2']
let array = [...str2.matchAll(regexp2)];
array[0];  // ['test1', 'e', 'st1', '1', index: 0, ...]
array[1];  // ['test2', 'e', 'st2', '2', index: 5, ...]

• String.prototype.matchAll() – JavaScript | MDN (mozilla.org)

2.2：BigInt

内置对象，它提供了一种方法来表示大于2^53 - 1的整数，这原本是Javascript中可以用Number表示的最大数字（Number.MAX_SAFE_INTEGER），BigInt可以表示任意大的整数

• BigInt – JavaScript | MDN (mozilla.org)

2.3：Promise.allSettled

返回一个在所有给定的promise都已经fulfilled或rejected后的promise，并带有一个对象数组，每个对象表示对应的promise结果
有多个彼此不依赖的异步任务成功完成时，或者您总是想知道每个promise的结果时，通常使用它
Promise.all()更适合彼此相互依赖或者在其中任何一个reject时立即结束

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => {
    setTimeout(reject, 100, 'foo');
});
const promises = [promise1, promise2];

Promise.allSettled(promises)
    .then((results) => results.forEach(result => console.log(result)));
// { status: "fulfilled", value: 3 }
// { status: "rejected", reason: "foo" }

Promise.all(promises)
    .then((results) => console.log(results))
    .catch(console.error);
// foo

• Promise.allSettled() – JavaScript | MDN (mozilla.org)

2.4：globalThis

提供一个标准的方式来获取不同环境下的全局this对象，确保可以在有无窗口的各种环境下正常工作，不必担心它的运行环境
它既是Web中的window、self或者frames，Web Workers中的self，也是Node.js中的global

globalThis === this &&
globalThis === self &&
globalThis === window;
// true

• globalThis – JavaScript | MDN (mozilla.org)

2.5：可选链操作符（?.）

允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效
引用为空（null或undefined）的情况下不会引起错误，短路返回值为undefined
函数调用时，如果给定的函数不存在，也返回undefined
此操作符仅用于取值，不能用于赋值

const adventurer = {
  name: 'Alice',
  cat: { name: 'Dinah' }
};
const dogName = adventurer.dog?.name; // undefined
adventurer.someNonExistentMethod?.(); // undefined

• 可选链操作符 – JavaScript | MDN (mozilla.org)

2.6：空值合并操作符（??）

逻辑操作符，当左侧的操作数为空（null或undefined）时，返回其右侧操作数，否则返回左侧操作数
逻辑或（||）的判断条件是“假”（falsy），??的判断条件为“空”（nullish：null或undefined）

null ?? 'string';  // "string"
null || 'string';  // "string"
0 ?? 42;  // 0
0 || 42;  // 42

• 空值合并运算符 – JavaScript | MDN (mozilla.org)

三：ES2021

3.1：String.prototype.replaceAll

str.replaceAll(regexp|substr, newSubstr|function)
第一个参数可以是一个字符串或一个RegExp（需包含标志g，否则TypeError），用来匹配需替换的字符
第二个参数可以是一个字符串或一个在每次匹配时被调用的函数
效果就是赋予String.prototype.replace全局替换的功能，使用带g的RegExp时没有区别

const p = '000222HHHXXX';
p.replaceAll('0', '5');    // '555222HHHXXX'
p.replace('0', '5');       // '500222HHHXXX'
const regex = /h/ig;
p.replaceAll(regex, 'O');  // '000222OOOXXX'
p.replace(regex, 'O');     // '000222OOOXXX'

• String.prototype.replaceAll() – JavaScript | MDN (mozilla.org)

3.2：Promise.any

• Promise.any() – JavaScript | MDN (mozilla.org)

3.3：WeakRef

允许保留对另一个对象的弱引用，且不会阻止被弱引用对象被垃圾回收机制回收
因为各版本的垃圾回收机制可能存在差异，难以保证实现效果能保证一样，所以正确使用WeakRef对象时需要仔细的考虑，最好尽量避免使用
没有特殊需求很难用到的一个东西，具体要用还得去看详细的文档说明

• WeakRef – JavaScript | MDN (mozilla.org)

3.4：逻辑赋值（&&=、||=、??=）

&&=左侧变量为truthy时，进行赋值；x &&= y等价于x && (x = y)，非等价x = x && y
||=左侧变量为falsy时，进行赋值；x ||= y等价于x || (x = y)，非等价x = x || y
??=左侧变量为nullish时，进行赋值；x ??= y等价于x ?? (x = y)，非等价x = x ?? y

const a = { duration: 50, title: '', name: '' };

a.duration &&= 10;
console.log(a.duration);  // 10
a.duration ||= 20;
console.log(a.duration);  // 10
a.duration ??= 30;
console.log(a.duration);  // 10

a.title &&= 'S1';
console.log(a.title);     // ''
a.title ||= 'S2';
console.log(a.title);     // 'S2'
a.title ??= 'S3';
console.log(a.title);     // 'S2'

a.null1 &&= 'S1';
console.log(a.null1);     // undefined
a.null2 ??= 'S2';
console.log(a.null2);     // 'S2'
a.null3 ||= 'S3';
console.log(a.null3);     // 'S3'

a.name ??= 'S3';
console.log(a.name);      // ''
a.name ||= 'S2';
console.log(a.name);      // 'S2'

• Logical AND assignment (&&=) – JavaScript | MDN (mozilla.org)
• Logical OR assignment (||=) – JavaScript | MDN (mozilla.org)
• 逻辑空赋值 (??=) – JavaScript | MDN (mozilla.org)

3.5：数字分隔符（_）

使用下划线 (_, U+005F) 作为分隔符，为方便数字文字的可读性，包括整数和浮点数

// 可用于金额，方便阅读
123_00                  // 123元，12300分/$123，123美分

// 通用写法，千分位分割
12_000                  // 12k
1_234_500               // 1,234,500
1_000_000_000           // 10亿
101_475_938.38          // 亿级单位

// 小数
0.000_001               // 百万分之一
1e10_000                // 10^10_000，10^10000

• proposal-numeric-separator

四：ES2022

4.1：Class：公有类字段（Public class fields）

公有字段都是可编辑、可枚举和可配置的属性，且参与原型的继承，即派生类可通过原型链访问字段
字段是在对应的构造函数运行之前添加的，所以在构造函数中可以直接访问字段
字段是通过[[Define]]语义（本质上是Object.defineProperty()）添加，其声明并不会触发setter

class ClassField {
    static baseField = 'base field';
    field = 'base';
    // setter
    set fieldSetted(val) {
        console.log('setter：' + val);
    }
    constructor() {
        this.field += ' plus';           // 构造函数中访问字段
        console.log('Base constructor:', this.field);
    }
}
class SubClass extends ClassField {
    field = 'sub';
    // fieldSetted = 'set_1';            // 字段声明不会触发 setter
    constructor() {
        super();
        this.field = this.baseField;     // 实例对象属性值为 undefined
        this.field = SubClass.baseField; // 静态属性原项链访问
        this.fieldSetted = 'set_2';      // this实例赋值，触发 setter
        console.log('Sub constructor:', this.field);
    }
}
new SubClass();
// Base constructor: base plus       super() 中 ClassField 构造
// setter：set_2                     this.fieldSetted 触发 setter
// Sub constructor: base field       通过原型链查找赋值为 'base field'

• 公有类字段 – JavaScript | MDN (mozilla.org)

4.2：Class：私有类字段/方法（Private class fields/methods）

通过增加哈希前缀#来定义私有类字段/方法，#是名称本身的一部分，声明和访问时也需要加上

• 私有字段必须先声明，引用未声明的私有字段会抛出语法错误
• 私有字段仅限在定义它的类的内部访问，派生类/外部调用都会抛出错误
• 私有字段不能删除，调用delete会抛出语法错误
• 可使用in运算符检查私有字段是否存在，存在返回true，不存在返回false
• 私有方法可以是异步、生成器、异步生成器方法，其限制同私有字段一样

class ClassField {
    static #staticField;
    #privateField;

    // 方法中调用私有属性/方法，this只能是当前类，否则报TypeError
    static #baseStaticMethod() {
        this.#staticField = 42;
        return this.#staticField;
    }
    static baseStaticMethod1() {
        return ClassField.#baseStaticMethod.call(ClassField);
    }
    static baseStaticMethod2() {
        return ClassField.#baseStaticMethod.call(this);
    }

    constructor() {
        this.#privateField = 42;     // 直接调用，没问题
        delete this.#privateField;   // delete 操作，语法错误
        this.#undeclaredField = 444; // 未声明字段，语法错误
    }
}
const instance = new ClassField()
instance.#privateField === 42;   // 外部调用，语法错误

class SubClass extends ClassField {};
SubClass.baseStaticMethod1();      // this 指向 ClassField，正常调用
SubClass.baseStaticMethod2();      // this 指向 SubClass，TypeError

• 类私有域 – JavaScript | MDN (mozilla.org)

4.3：Class：静态初始化块（static initialization blocks）

使用static{...}的方式在类中添加静态初始化块，同一个类中可以存在多个初始化块，执行顺序即为书写顺序

• 块内声明变量为局部变量，不会被提升，var定义变量、function函数也不会提升
• 块内可访问私有属性/字段，包括公有字段和私有字段
• 块内的this指的是类的构造函数对象，可用于在块内访问静态属性/字段/方法
• 块内的super可以访问超类的静态属性，包括其属性、字段、方法
• 块内代码是立即执行的

var y = 'Outer y';
class ClassA {
    static field = 'Inner y';
    static #field = 'Inner y';
    static {
        var y = this.field;
    }
    static {
        console.log(this.field);   // 访问静态属性
        console.log(this.#field);  // 访问私有静态属性
    }
}
class ClassB extends ClassA {
    static {
        console.log(super.field);  // 访问父类静态属性
    }
}
console.log(y); // 块内 var 变量不提升

• Class static initialization blocks – JavaScript | MDN (mozilla.org)

4.4：取值：.at()（Array、String、TypedArray）

Array、String、TypedArray（二进制缓冲区），新增at(index)方法，获取指定索引的项目值
index索引为负数时，表示从数组末端开始的相对索引，当索引值超出有效范围，返回结果为undefined

const colors = ['red', 'green', 'blue'];
const sentence = 'The quick brown fox jumps over the lazy dog.';
const int8 = new Int8Array([0, 10, -10, 20, -30, 40, -50]);

colors.at(colors.length - 2);      // 'green'
colors.at(-2);                     // 'green'
sentence.at(sentence.length - 2);  // 'g'
sentence.at(-2);                   // 'g'
int8.at(int8.length - 2);          // 40
int8.at(-2);                       // 40

• Array.prototype.at() – JavaScript | MDN (mozilla.org)
• String.prototype.at() – JavaScript | MDN (mozilla.org)
• TypedArray.prototype.at() – JavaScript | MDN (mozilla.org)

4.5：Object.hasOwn()

hasOwn(instance, prop)用来判断指定对象是否包含指定属性，仅限该对象声明的属性，继承属性不算
正常情况下，使用hasOwnProperty也可以得到效果结果，但hasOwnProperty属于继承属性，当原型链上的该方法不存在、或被修改之后，该方法可能会失效、或者抛出错误

const obj = {};
obj.prop = 'exists';
obj.prop2 = null;
obj.prop3 = undefined;

Object.hasOwn(obj, 'prop');             // true
Object.hasOwn(obj, 'toString');         // false
Object.hasOwn(obj, 'hasOwnProperty');   // false
Object.hasOwn(obj, 'prop2');            // true
Object.hasOwn(obj, 'prop3');            // true
Object.hasOwn(obj, 'prop4');            // false

'prop' in obj;                          // true
'toString' in obj;                      // true
'hasOwnProperty' in obj;                // true
'prop2' in obj;                         // true
'prop3' in obj;                         // true
'prop4' in obj;                         // false

const foo = Object.create(null);
foo.prop = 'exists';
Object.hasOwn(foo, 'prop');             // true
'prop' in foo;                          // true
foo.hasOwnProperty('prop');             // TypeError

• Object.hasOwn() – JavaScript | MDN (mozilla.org)

4.6：Error.prototype.cause

该属性用来描述引起该错误的特定原始原因，其值是在options.cause参数中传递给Error()构造函数的值
主要用来封装机器语言的报错，将原因修改为通俗语言表达，用于参考差错

function makeRSA(p, q) {
    if (!Number.isInteger(p) || !Number.isInteger(q)) {
        throw new Error('生成 RSA 密钥需要输入整数.', {
            cause: { code: '非整数', value: [p, q] },
        });
    }
    if (!areCoprime(p, q)) {
        throw new Error('生成 RSA 密钥需要输入两个互质整数.', {
            cause: { code: '非质数', values: [p, q] },
        })
    }
    // …
}

• Error.prototype.cause – JavaScript | MDN (mozilla.org)
• tc39/proposal-error-cause

4.7：正则修饰符：d

使用该修饰符，会在结果中添加一个属性：indices
该属性的值包含所有匹配项的索引信息，其索引值是相对的原始字符串的索引
未匹配数据时，将返回undefined

const re1 = /a+(?<Z>z)?/d;
const s1 = "xaaaz";
const m1 = re1.exec(s1);
console.log(m1.indices);
/*[
    'aaaz', 
    'z', 
    index: 1, 
    input: 'xaaaz', 
    groups: {
        Z: "z"
    }, 
    indices: [
        [1, 5], 
        [4, 5], 
        groups: {
            Z: [4, 5]
        }
    ]
]*/
// 没有匹配时，返回 `undefined`:
const m2 = re1.exec("xaaay");
m2.indices[1] === undefined;
m2.indices.groups["Z"] === undefined;

• tc39/proposal-regexp-match-indices

1. ECMAScript 6 compatibility table (kangax.github.io)
2. MDN Web Docs (mozilla.org)

最新浏览器主版本，不含更新版本

• Chrome：104：2022-08-02
• Edge：104：2022-08-05
• Firefox：103：2022-07-26
• Safari：15.6：2022-07-20
• Opera：[Desktop] 89：2022-07-07；[Mobile] 69：2022-05-12

Chrome/Edge/Opera 为 Blink 内核；Firefox 为 Gecko 内核；Safari/IOS 为 WebKit 内核
本文目前主要讨论PC浏览器兼容

一：ES2015

鉴于ES6新增属性太多，这里只归纳几个

1.1：尾调用优化（Tail Call Optimization/Proper Tail Calls）

这个伴随ES6就被谈及很多的一个优化；不过很可惜，到目前为止仍只有 Safari 一家实现了该优化，其他几家在加入该优化过程中遇到各种问题，甚至之后很长一段时间都不会有什么积极的更新了；相关故事可以读读：

• Tail Call Optimization implementation in Javascript Engines – Stack Overflow
• What happened to proper tail calls in JavaScript?

1.2：二进制数/八进制数（Binary Integer Literal/Octal Integer Literal）

二进制数：以 0b/0B开头，后面接数字0-1
八进制数：以 0o/0O开头，后面接数字0-7；ES5非严格模式支持前缀0的八进制表示法，ES6相当于规范这几种表示法，和十六进制表示法一样
十六进制：以 0x/0X 开头，后面接数字0-9/a-f/A-F

// 二进制
0b1 === 1 && 0B1 === 1;
0b10 === 2 && 0B10 === 2;
Number(0b1) === 1 && Number(0B10) === 2;
// 八进制
0o1 === 1 && 0O1 === 1;
0o10 === 8 && 0O10 === 8;
Number(0o1) === 1 && Number(0o10) === 8;
// 十六进制
0x1 === 1 && 0X1 === 1;
0x10 === 16 && 0X10 === 16;
Number(0x1) === 1 && Number(0X10) === 16;

• 语法和数据类型 – JavaScript | MDN (mozilla.org)

1.3：正则修饰符：y、u

y：sticky 粘性标志，下一次匹配一定在 lastIndex 位置开始；RegExp.prototype.sticky 只读属性判断是否启用 y 标志
u：unicode 相关特性；RegExp.prototype.unicode 只读属性判断是否启用 u 标志

const text = '123 456';
const regY = /\d/y;
const regG = /\d/g;
let result;
// 打印3次，在匹配完‘3’之后，lastIndex 为3，\s（空格）未匹配成功，直接结束
while (result = regY.exec("123 456")) {
    console.log(result, regY.lastIndex);
}
// 打印6次，lastIndex 为 3 时未匹配成功，则 lastIndex + 1 继续匹配，直到全部匹配完
while (result = regG.exec("123 456")) {
    console.log(result, regG.lastIndex);
}

• RegExp(正则表达式) – JavaScript | MDN (mozilla.org)

1.4：Reflect

Reflect 对象是一个内置对象，提供拦截JavaScript操作的方法；其所有属性和方法都是静态的

静态方法参数都有类型要求，类型不匹配会报类型错误TypeError；与之相类似的Object方法则会进行强制转换，部分方法在ES5会报错，在ES6被修改为强制转换：Object.keys、Object.getOwnPropertyNames、Object.assign等

Reflect.apply(); // Function.prototype.apply() 
Reflect.construct(); // new 构造函数
Reflect.has(); // name in Object
Reflect.getPrototypeOf(); // Object.getPrototypeOf()
                          // ES6之前不会进行强制转换，之后会
Reflect.isExtensible(); // Object.isExtensible()

// @return {Boolean} 操作是否成功
Reflect.defineProperty(); // Object.defineProperty() 返回对象
Reflect.deleteProperty(); // delete Objet[name] 返回 true
                          // 除非 configurable=false（非严格模式）
Reflect.get(); // Objet[name]
Reflect.set(); // Objet[name] = value
Reflect.preventExtensions(); // Object.preventExtensions() 返回对象
Reflect.setPrototypeOf(); // Object.setPrototypeOf() 返回对象

// @return {Object|undefined} 属性描述符
Reflect.getOwnPropertyDescriptor(); // Objet.getOwnPropertyDescriptor()

// @return {(Symbol|String)[]} 属性名列表，包含不可枚举属性、Symbol属性
Reflect.ownKeys(); // Object.keys 不含不可枚举、Symbol
                   // Object.getOwnPropertyNames 含不可枚举
                   // Object.getOwnPropertySymbols 含不可枚举

• Reflect – JavaScript | MDN (mozilla.org)

1.5：内置Symbol（Well-known Symbols）

内置Symbol，通常被用作对象或类的属性键，对应的值用作规范算法的扩展、或者重构内部语言行为；该重构行为改仅针对修改的对象或类生效，不会修改全局的默认方法

// 迭代器：Symbol.iterator
const arr = [1,2,3];
arr[Symbol.iterator] = function* (...params) {
    for (let i=0;i<arr.length;i++) {
        yield 2*arr[i];
    }
}
console.log(arr); // Array [1, 2, 3]
console.log([...arr]); // Array [2, 4, 6]

// 字符串替换、拆分：Symbol.replace、Symbol.split
const obj = {
    [Symbol.replace]: (origin, replaceTo)=> {
        return `__${origin}_${replaceTo}__`;
    },
    [Symbol.split]: (origin, limit)=> {
        return `${Array(2).fill(origin)}`;
    },
}
const str = 'test';
console.log(str.replace(obj, 'to')); // "__test_to__"
console.log(str.split(obj, 5)); // "test,test"

• Symbol – JavaScript | MDN (mozilla.org)
• ECMAScript 2015 Language Specification – ECMA-262 6th Edition (ecma-international.org)

1.6：Array.prototype.splice

这确实是ES6新标准，但是各大浏览器其实早就加入了该实现方法，新标准只是给他一个名分而已

• Array.prototype.splice() – JavaScript | MDN (mozilla.org)

1.7：Number.EPSILON

表示 1 与 Number 类型可表示的大于 1 的最小的浮点数之间的差值，可理解为：最小浮点数

可以用来判断浮点数之间的计算值比较，差值 < Number.EPSILON 即认定为相等：

const x = 0.1, y = 0.2, z = 0.3;
const isEqual = (Math.abs(x + y - z) < Number.EPSILON);

• Number.EPSILON – JavaScript | MDN (mozilla.org)

二：ES2016

2.1：幂运算（**/**=）

求幂，等效于Math.pow，也接受BigInts作为参数

• Exponentiation assignment (**=) – JavaScript | MDN (mozilla.org)

2.2：Array.prototype.includes

arr.includes(valueToFind[, fromIndex])接受两个参数；

第一个参数不传，则默认为undefined
第二个参数为查找开始的索引值，为可选参数：

• fromIndex >= 0 && fromIndex <= arr.length - 1：正常查找
• fromIndex > arr.length - 1：返回false
• fromIndex < 0：计算fromIndex = Math.max(0, fromIndex + arr.length)之后再判断

includes() 有意设计为通用方法，可以被用于其他类型（如类数组对象）的对象，包括querySelectorAll、Object.keys、map.keys等

[].includes(); // false
[undefined].includes(); // true
[1,].includes(); // false
[1,,].includes(); // true
Array(2).includes(); // true

// 其他类型
[].includes.call(1, 1); // 数字，false
[].includes.call(true, true); // 布尔，false
[].includes.call(Symbol(1), 1); // Symbol，false
[].includes.call(BigInt(1), 1); // BigInt，false
[].includes.call(()=>{}, 1); // Function，false
[].includes.call(/\d/, 1); // RegExp，false
[].includes.call(null, null); // null，TypeError
[].includes.call(undefined, undefined); // undefined，TypeError

• Array.prototype.includes() – JavaScript | MDN (mozilla.org)

三：ES2017

3.1：对象取值（values/entries）

Object.values对象自身的所有可枚举属性值的数组；顺序与使用for...in循环的顺序相同
Object.entries对象自身可枚举属性的键值对数组；顺序与使用for...in循环的顺序相同

Object.keys方法在浏览器中很早就实现了，直到ES2015成为标准；然后时隔两年，Object.values才成为新标准，浏览器也是跟随标准才实现该方法；所以对于一些较老的浏览器来说，很可能实现了Object.keys而没有实现Object.values/Object.entries

Object.entries最常用的作用估计就是转换成map了

const obj = { foo: "bar", baz: 42 };
const map = new Map(Object.entries(obj));
console.log(map) // Map(2) {'foo' => 'bar', 'baz' => 42}

• Object.values() – JavaScript | MDN (mozilla.org)

• Object.entries() – JavaScript | MDN (mozilla.org)

3.2：属性描述符（getOwnPropertyDescriptors）

对象自身所有属性的描述符，没有任何自身属性，则返回空对象
主要用途：

1. 浅拷贝

实现拷贝对象时，也拷贝它的原型、属性特性

Object.create(
    Object.getPrototypeOf(obj),
    Object.getOwnPropertyDescriptors(obj)
);

2. 创建子类

// 传统写法的另一种实现
function superclass() {}
superclass.prototype = {
    // 在这里定义方法和属性
};
function subclass() {}
subclass.prototype = Object.create(superclass.prototype, Object.getOwnPropertyDescriptors({
    // 在这里定义方法和属性
}));

• Object.getOwnPropertyDescriptors() – JavaScript | MDN (mozilla.org)

3.3：字符串填充（padStart/padEnd）

• str.padStart(targetLength [, padString])

• str.padEnd(targetLength [, padString])

targetLength为目标长度，只有大于字符本身长度时，才会执行填充，小于时是直接返回原字符
padString为填充字符串，长度够时反复填充，长度不够时优先保留左侧字符

• String.prototype.padStart() – JavaScript | MDN (mozilla.org)
• String.prototype.padEnd() – JavaScript | MDN (mozilla.org)

3.4：函数尾逗号（trailing/final commas）

针对函数参数中的尾逗号，在函数定义、函数调用中，最后一个参数后面可追加逗号：,
在没有参数、结构参数时，不能添加尾逗号：

// 合法的写法
function f(p,) {}
(p,) => {};
f(p,);
Math.max(10, 20,);

// 不合法的写法
function f(,) {} // SyntaxError: missing formal parameter
f(,);            // SyntaxError: expected expression, got ','
(...p,) => {}    // SyntaxError: expected closing parenthesis, got ','

• 尾后逗号 – JavaScript | MDN (mozilla.org)

3.5：异步函数（async/await）

async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为，而无需刻意地链式调用promise

• async 函数 – JavaScript | MDN (mozilla.org)

3.6：共享内存（SharedArrayBuffer/Atomics）

SharedArrayBuffer

Atomics

SharedArrayBuffer对象用来表示一个通用的、固定长度的原始二进制数据缓冲区，类似于ArrayBuffer对象，它们都可以用来在共享内存（shared memory）上创建视图
Atomics对象提供了一组静态方法对SharedArrayBuffer和ArrayBuffer对象进行原子操作

• SharedArrayBuffer – JavaScript | MDN (mozilla.org)
• Atomics – JavaScript | MDN (mozilla.org)

四：ES2018

4.1：对象的剩余/展开属性（Object Rest/Spread Properties）

属性拓展符在对象中的拓展；在某些浏览器版本中即使支持拓展符...，但不一定支持在对象中使用

可用来实现对象的浅拷贝和合并，与Object.assign()作用类似，但Object.assign()函数会触发 setters，而展开语法则不会

// 剩余属性
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x; // 1
y; // 2
z; // { a: 3, b: 4 }
// 展开属性
let n = { x, y, ...z };
n; // { x: 1, y: 2, a: 3, b: 4 }

• 展开语法 – JavaScript | MDN (mozilla.org)

4.2：Promise.prototype.finally

在promise结束时，无论结果是fulfilled或者是rejected，都会执行指定的回调函数

此方法是新增的方法，和Promise.prototype.then、Promise.prototype.catch拥有不同的兼容性表现，某些浏览器版本中存在兼容性问题

• Promise.prototype.finally() – JavaScript | MDN (mozilla.org)

4.3：正则修饰符：s

启用dotAll模式，特殊字符.可匹配行终结符（换行符），相当于匹配“任意单个字符”：

• U+000A 换行符（\n）
• U+000D 回车符（\r）
• U+2028 行分隔符（line separator）
• U+2029 段分隔符（paragraph separator）

RegExp.prototype.dotAll只读属性用来判断是否启用了s标志

• RegExp.prototype.dotAll – JavaScript | MDN (mozilla.org)

4.4：命名分组捕获（Named capture groups）

以前的分组捕获都是用索引去取值，用result[0]、result[2]的形式取值，很多场景都分不清它们是什么含义，于是就有了命名捕获分组；这真是贴心的更新，不过需要考虑老浏览器兼容性

• 命名（(?<name>...)）与取值（属性groups）

// 获取年月日的匹配
let re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/u;
let result = re.exec('2015-01-02');
// 以前的取值
let date = result[0];   // '2015-01-02'
let year = result[1];   // '2015'
let month = result[2];  // '01'
let day = result[3];    // '02'
// 命名取值
let date = result[0];             // '2015-01-02'
let year = result.groups.year;    // '2015'
let month = result.groups.month;  // '01'
let day = result.groups.day;      // '02'
// 也可以直接结构取值
let {groups: {year, month, day}} = re.exec('2015-01-02');

• 命名引用（\k<name>）

// (?<half>.*)：匹配任意字符，命名为half
// \k<half>：引用命名为half的匹配，即与前面是相同匹配
// 匹配结果就是 ABA 的字符串模式
let duplicate = /^(?<half>.*).\k<half>$/;
duplicate.test('a*b');    // false
duplicate.test('a_a');    // true
duplicate.test('ab-ab');  // true
duplicate.test('aaaa');   // false
duplicate.test('aaaaa');  // true

• String.prototype.replace中的使用

// 把日期格式 yyyy-mm-dd 替换为 dd/mm/yyy
let str = '2015-02-01';
let re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
// 以往的写法
let result = str.replace(re, '$3/$2/$1'); // '01/02/2015'
// 命名分组写法
let result = str.replace(re, '$<day>/$<month>/$<year>'); // '01/02/2015'

• tc39/proposal-regexp-named-groups: Named capture groups for JavaScript RegExps (github.com)

4.5：后行断言（Lookbehind assertion）

(?<=y)x仅当’x’前面是’y’时，匹配’x’，这种叫做后行断言
(?<!y)x仅当’x’前面不是’y’时，匹配’x’，这被称为反向否定查找

let str1 = 'JackSprat';
let str2 = 'TomSprat';
let re1 = /(?<=Jack)Sprat/;  // 匹配 JackSprat 中的 Sprat
let re2 = /(?<!=Jack)Sprat/; // 匹配 不是 JackSprat 中的 Sprat
re1.exec(str1); // ['Sprat', index: 4, input: 'JackSprat', groups: undefined]
re1.exec(str2); // null
re2.exec(str1); // ['Sprat', index: 4, input: 'JackSprat', groups: undefined]
re2.exec(str2); // ['Sprat', index: 3, input: 'TomSprat', groups: undefined]

• 正则表达式 – JavaScript | MDN (mozilla.org)

4.6：Unicode转义捕获（Unicode Property Escapes）

根据Unicode属性，用来匹配表情、标点符号、字母、甚至特定语言或文字等。同一符号可以拥有多种Unicode属性，属性则有binary(“boolean-like“)和non-binary之分
使用时必须依靠\u标识，使用转义字符\p{...} 和 \P{...}

// Non-binary 属性
\p{Unicode 属性值}
\p{Unicode 属性名=Unicode 属性值}
// Binary and non-binary 属性
\p{UnicodeBinary 属性名}
// \P 为 \p 取反
\P{Unicode 属性值}
\P{UnicodeBinary 属性名}

let sentence = 'A ticket to 大阪 costs ¥2000 👌.';
let regexpEmojiPresentation = /\p{Emoji_Presentation}/gu;
sentence.match(regexpEmojiPresentation);  // ["👌"]

let regexpNonLatin = /\P{Script_Extensions=Latin}+/gu;
sentence.match(regexpNonLatin);  // [" ", " ", " 大阪 ", " ¥2000 👌."]

let regexpCurrencyOrPunctuation = /\p{Sc}|\p{P}/gu;
sentence.match(regexpCurrencyOrPunctuation);  // ["¥", "."]

• tc39/proposal-regexp-unicode-property-escapes. (github.com)

4.7：Function.prototype.toString

新规范：要求Function.prototype.toString的返回值与声明的源代码完全现统，包括空格和注释；或者因某种原因，主机没有源代码，则要求返回一个原生函数字符串

• Function.prototype.toString revision (tc39.es)