JavaScript ECMAScript 2020


目录

    显示目录

JavaScript 版本号

旧的 JS 版本以数字命名:ES5 (2009) 和 ES6 (2015)。

从 2016 年开始,版本按年份命名:ECMAScript 2016、2017、2018、2019,...

ES2020 的新特性

  • 大整型

  • 字符串matchAll()

  • 空合并运算符 (??)

  • 可选链接运算符 (?.)

  • 逻辑与赋值运算符 (&&=)

  • 逻辑或赋值 (||=)

  • 空合并赋值 (??=)

  • Promise allSettled():
    style="word-wrap:break-word;">Promise.allSettled([prom1,prom2,prom3]).then {}

  • 动态导入

警告

这些功能相对较新。

较旧的浏览器可能需要替代代码(Polyfill)

JavaScript 大整型

JavaScript BigInt 变量用于存储大整数值 太大而无法用普通 JavaScript Number 表示。

JavaScript 整数最多只能精确到 15 位左右。

整数示例

let x = 999999999999999;
let y = 9999999999999999; // too big

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>Integer Precision</h2>

<p>Integers (numbers without a period or exponent notation) are accurate up to 15 digits:</p>

<p id="demo"></p>

<script>
let x = 999999999999999;
let y = 9999999999999999;
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>

</body>
</html>


BigInt 示例

let x = 9999999999999999;
let y = 9999999999999999n;

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>Integer and BigInt</h2>

<p id="demo"></p>

<script>
let x = 9999999999999999;
let y = BigInt("9999999999999999");
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>

</body>
</html>


要创建 BigInt,请将 n 附加到整数或调用的末尾 BigInt()

例子

let x = 1234567890123456789012345n;
let y = BigInt(1234567890123456789012345)

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>Create a BigInt</h2>

<p id="demo"></p>

<script>
let x = 123456789012345678901234567890n;
let y = BigInt("123456789012345678901234567890");
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>

</body>
</html>


JavaScript typeof BigInt 是“bigint”:

例子

let x = BigInt(999999999999999);
let type = typeof x;

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>BigInt typeof</h2>

<p>The typeof a BigInt is:</p>
<p id="demo"></p>

<script>
let x = BigInt("9999999999999999");
document.getElementById("demo").innerHTML = typeof x;
</script>

</body>
</html>


自 2020 年 9 月起,所有现代浏览器均支持 BigInt

Chrome 67 Edge 79 Firefox 68 Safari 14 Opera 54
May 2018 Jan 2020 Jul 2019 Sep 2020 Jun 2018

JavaScript 字符串 matchAll()

在 ES2020 之前,没有可用于搜索所有出现的字符串方法 字符串中的字符串。

例子

const iterator = text.matchAll("Cats");

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The matchAll() Method</h2>

<p>ES2020 intoduced the string method matchAll().</p>

<p id="demo"></p>

<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll("Cats");

document.getElementById("demo").innerHTML = Array.from(iterator);
</script>

</body>
</html>

如果参数是正则表达式,则必须设置全局标志(g),否则 抛出类型错误。

例子

const iterator = text.matchAll(/Cats/g);

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The matchAll() Method</h2>

<p>ES2020 intoduced the string method matchAll().</p>

<p id="demo"></p>

<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll(/Cats/g);

document.getElementById("demo").innerHTML = Array.from(iterator);
</script>

</body>
</html>

如果要搜索不区分大小写,则必须设置不敏感标志 (i):

例子

const iterator = text.matchAll(/Cats/gi);

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The matchAll() Method</h2>

<p>ES2020 intoduced the string method matchAll().</p>

<p id="demo"></p>

<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll(/Cats/gi);

document.getElementById("demo").innerHTML = Array.from(iterator);
</script>

</body>
</html>

笔记

ES2021引入了字符串方法replaceAll()。



空合并运算符 (??)

如果第一个参数不为空,则 ?? 运算符将返回该参数 (null未定义)。

否则返回第二个。

例子

let name = null;
let text = "missing";
let result = name ?? text;

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The ?? Operator</h2>
<p>The ?? operator returns the first argument if it is not nullish (null or undefined). Otherwise it returns the second.</p>

<p id="demo"></p>

<script>
let name = null;
let text = "missing";
let result = name ?? text;
document.getElementById("demo").innerHTML = "The name is " + result; 
</script>

</body>
</html>


自 2020 年 3 月起,所有现代浏览器都支持 nullish 运算符:

Chrome 80 Edge 80 Firefox 72 Safari 13.1 Opera 67
Feb 2020 Feb 2020 Jan 2020 Mar 2020 Mar 2020

可选链接运算符 (?.)

如果对象是 undefinednull (而不是抛出错误)。

例子

const car = {type:"Fiat", model:"500", color:"white"};
let name = car?.name;

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The ?. Operator</h2>
<p>The ?. operator returns undefined if an object is undefined or null (instead of throwing an error).</p>

<p>Car name is:</p>
<p id="demo"></p>

<script>
const car = {type:"Fiat", model:"500", color:"white"};
let name = car?.name;
document.getElementById("demo").innerHTML = name;
</script>

</body>
</html>

自 2020 年 3 月起,所有现代浏览器均支持 ?.= 运算符:

Chrome 80 Edge 80 Firefox 74 Safari 13.1 Opera 67
Feb 2020 Feb 2020 Mar 2020 Mar 2020 Mar 2020

&&= 运算符

逻辑与赋值运算符用于两个值之间。

如果第一个值为 true,则分配第二个值。

逻辑与赋值示例

let x = 10;
x &&= 5;

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>Logical AND Assignment</h2>
<h3>The &amp;&amp;= Operator</h3>
<p>If the first value is true, the second value is assigned.</p>

<p id="demo"></p>

<script>
let x = 100;
x &&= 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>

</body>
</html>

自 2020 年 9 月起,所有现代浏览器均支持 &&= 运算符:

Chrome 85 Edge 85 Firefox 79 Safari 14 Opera 71
Aug 2020 Aug 2020 Mar 2020 Sep 2020 Sep 2020

||= 运算符

逻辑或赋值运算符用于两个值之间。

如果第一个值为 false,则分配第二个值。

逻辑或赋值示例

let x = 10;
x ||= 5;

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>Logical OR Assignment</h2>
<h3>The ||= Operator</h3>

<p>If the first value is false, the second value is assigned:</p>
<p id="demo"></p>

<script>
let x = undefined;
x ||= 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>

</body>
</html>

自 2020 年 9 月起,所有现代浏览器均支持 ||= 运算符:

Chrome 85 Edge 85 Firefox 79 Safari 14 Opera 71
Aug 2020 Aug 2020 Mar 2020 Sep 2020 Sep 2020

??= 运算符

空合并赋值运算符用于两个值之间。

如果第一个值是 undefinednull,则分配第二个值。

空合并赋值示例

let x;
x ??= 5;

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Assignments</h1>
<h2>The ??= Operator</h2>
<p>The ??= operator is used between two values. If the first value is undefined or null, the second value is assigned.</p>

<p id="demo"></p>

<script>
let x;
document.getElementById("demo").innerHTML = x ??= 5; 
</script>

</body>
</html>

自 2020 年 9 月起,所有现代浏览器均支持 ??= 运算符:

Chrome 85 Edge 85 Firefox 79 Safari 14 Opera 71
Aug 2020 Aug 2020 Mar 2020 Sep 2020 Sep 2020