旧的 JS 版本以数字命名:ES5 (2009) 和 ES6 (2015)。
从 2016 年开始,版本按年份命名:ECMAScript 2016、2017、2018、2019,...
大整型
字符串matchAll()
空合并运算符 (??)
可选链接运算符 (?.)
逻辑与赋值运算符 (&&=)
逻辑或赋值 (||=)
空合并赋值 (??=)
Promise allSettled():style="word-wrap:break-word;">Promise.allSettled([prom1,prom2,prom3]).then {}
动态导入
这些功能相对较新。
较旧的浏览器可能需要替代代码(Polyfill)
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>
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 |
在 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 |
如果对象是 undefined
或 null
(而不是抛出错误)。
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 &&= 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 |
空合并赋值运算符用于两个值之间。
如果第一个值是 undefined
或 null
,则分配第二个值。
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 |