JS60 ES10的新特性简介

发表于 分类于 阅读次数：

ES10/ES2019还只是一个草案，但是大多数功能在新版本的Chrome中已经实现了。

虽然ES6还没有掌握全，但是还是要紧跟时代，了解一下JavaScript的发展趋势吧

BigInt

BigInt是第七种原始类型，用来标识超出JavaScript最大安全整数之外的数字

在之前，JavaScript的数字是使用的是双精度浮点数数据类型，可以表示的最大安全整数是2^53-1，也就是9007199254740991，可以使用Number.MAX_SAFE_INTEGER来表示，如果超出这个范围指挥所未定为Number.MAX_SAFE_INTEGER + 1

现在使用BigInt就可以表示这个范围之外的整数值，有两种方式创建：

1
2
3
4
5
6
let a = 10n;
let b = BigInt(10n);
let c = BigInt(10);

typeof a; // "bigint"
a === b; // true

String.prototype.matchAll()

使用这个方法对字符串进行匹配时，不必再为正则表达式添加g，直接进行全局查找，返回一个迭代器对象（可以使用for...of遍历）

但是目前Chrome(70.0.3538.77)的实现好像有一些问题，实现的效果与match是相同的，只是返回的不是一个数组，而是一个迭代器对象

1
2
3
4
5
6
7
8
9
10
11
let a = 'a1a2';
let b = a.matchAll(/a./);
for(let match of b) {
  console.log(match)
}
// 实际结果
// ["a1", index: 0, input: "a1a2", groups: undefined]

// 预期结果
["a1", index: 0, input: "a1a2", groups: undefined]
["a2", index: 2, input: "a1a2", groups: undefined]

动态导入

现在的import是静态加载，不能将import放在条件语句中，这就导致无法在运行时家在模块（Node的require是运行时加载模块）

现在的提案中使用import()方法完成动态加载，返回一个Promise对象，是一个异步加载的方法

1
2
3
4
btn.addEventListener('click', async () => {
  const module = await import('./api/button-click.js');
  module.clickEvent()
})

Array.prototype.flat(depth)

对数组扁平化，可以传入参数指定递归的深度，默认深度为1

1
2
3
4
5
6
7
let a = [[1], [2, [3]]]

let b = a.flat()
// [1, 2, Array(1)]

let c = b.flat()
// [1, 2, 3]

细节参考MDN

Array.prototype.flatMap(callback)

对数组每个元素使用映射函数callback进行处理，然后将结果扁平化为一个新数组，扁平化的效果与深度为1的flat方法相同。

1
2
3
4
5
6
7
8
9
10
11
var arr1 = [1, 2, 3, 4];

arr1.map(x => [x * 2]); 
// [[2], [4], [6], [8]]

arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]

// 只会将 flatMap 中的函数返回的数组 “压平” 一层
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]

细节参考MDN

Object.fromEntries(iterable)

将键值对列表iterable转换为一个对象，这个iterable列表需要是一个可迭代对象，返回一个新对象

实际上就是Object.entries()的逆向操作：

1
2
3
4
5
6
7
8
9
10
let obj = { apple : 10, orange : 20, banana : 30 };

let entries = Object.entries(obj);
// [Array(2), Array(2), Array(2)]
// 0: (2) ["apple", 10]
 // 1: (2) ["orange", 20]
 // 2: (2) ["banana", 30]
 
let fromEntries = Object.fromEntries(entries);
// { apple: 10, orange: 20, banana: 30 }

目前最新版本的Chorme浏览器还不支持（只有Firefox支持）

细节参考MDN

String.prototype.trimStart()和``String.prototype.trimEnd()`

别名是String.prototype.trimLeft()和``String.prototype.trimRight()`，分别删除开头/结尾的空格

1
2
3
4
5
6
7
8
9
10
11
let str = '     hello       '

str.trimStart()
// "hello       "
str.trimLeft()
// "hello       "

str.trimEnd()
// "     hello"
str.trimRight()
// "     hello"

细节参考MDN

globalThis对象

在JavaScript中，不同的宿主环境提供了不同的全局对象，在Web中是window或者self，在Node中是global。

新的提案中规定的globalThis对象可以无视环境，直接获取当前的全局对象

1
2
3
// 浏览器中
globalThis
// Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window,…}

提案详情在这里。

Symbol.prototype.description

一个只读属性，用来返回声明Symbol对象时的描述符

1
2
const symbol = Symbol('hello');
// symbol.description;

Hashbang语法

制定了一个解释器，统一了JavaScript在服务器端的执行方式

1
2
3
4
$ ./index.js

# 代替
$ node index.js

这块我不太理解，我认为如果标准化之后，是不是以为着在服务器端执行时不再显示的需要Node环境，而是默认可以在系统中执行JS文件了？

其他

还有一些内部实现的优化和改进，比如JSON.stringify对特殊字符的处理、sort方法的稳定性等

还有实现#私有成员的提案，看原文吧。

参考