旧的 JS 版本以数字命名:ES5 (2009) 和 ES6 (2015)。
从 2016 年开始,版本按年份命名:ECMAScript 2016、2017、2018、2019,...
String.trimStart()
String.trimEnd()
对象.fromEntries
可选的捕获绑定
Array.flat()
Array.flatMap()
修改后的 Array.Sort()
修改后的 JSON.stringify()
字符串文字中允许使用分隔符
修改后的 Function.toString()
这些功能相对较新。
较旧的浏览器可能需要替代代码(Polyfill)
ES2019 在 JavaScript 中添加了 String 方法 trimStart()
。 <p>trimStart()
方法的工作方式与 trim()
类似,但仅从开头删除空格一个字符串。
let text1 = " Hello World! ";
let text2 = text1.trimStart();
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The trimStart() Method</h2>
<p id="demo"></p>
<script>
let text1 = " Hello World! ";
let text2 = text1.trimStart();
document.getElementById("demo").innerHTML =
"Length text1 = " + text1.length + "<br>Length text2 = " + text2.length;
</script>
</body>
</html>
自 2020 年 1 月起,所有现代浏览器均支持 JavaScript 字符串 trimStart()
:
Chrome 66 | Edge 79 | Firefox 61 | Safari 12 | Opera 50 |
Apr 2018 | Jan 2020 | Jun 2018 | Sep 2018 | May 2018 |
ES2019 在 JavaScript 中添加了 String 方法 trimEnd()
。 <p>trimEnd()
方法的工作方式与 trim()
类似,但仅删除末尾的空格一个字符串。
let text1 = " Hello World! ";
let text2 = text1.trimEnd();
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The trimEnd() Method</h2>
<p id="demo"></p>
<script>
let text1 = " Hello World! ";
let text2 = text1.trimEnd();
document.getElementById("demo").innerHTML =
"Length text1 = " + text1.length + "<br>Length text2 = " + text2.length;
</script>
</body>
</html>
自 2020 年 1 月起,所有现代浏览器均支持 JavaScript 字符串 trimEnd()
:
Chrome 66 | Edge 79 | Firefox 61 | Safari 12 | Opera 50 |
Apr 2018 | Jan 2020 | Jun 2018 | Sep 2018 | May 2018 |
ES2019 在 JavaScript 中添加了对象方法 fromEntries()
。 <p>fromEntries()
方法从可迭代的键/值对创建一个对象。
const fruits = [
["apples", 300],
["pears", 900],
["bananas", 500]
];
const myObj = Object.fromEntries(fruits);
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Objects</h1>
<h2>The fromEntries() Method</h2>
<p>The number of pears are:</p>
<p id="demo"></p>
<script>
const fruits = [
["apples", 300],
["pears", 900],
["bananas", 500]
];
const myObj = Object.fromEntries(fruits);
document.getElementById("demo").innerHTML = myObj.pears;
</script>
</body>
</html>
自 2020 年 1 月起,所有现代浏览器均支持 JavaScript 对象 fromEntries()
:
Chrome 73 | Edge 79 | Firefox 63 | Safari 12.1 | Opera 60 |
Mar 2019 | Jan 2020 | Oct 2018 | Mar 2019 | Apr 2019 |
从 ES2019 开始,如果不需要,可以省略 catch 参数:。
2019 年之前:
try {
// code
} catch (err) {
// code
}
2019年后:
try {
// code
} catch {
// code
}
自 2020 年 1 月起,所有现代浏览器都支持可选的 catch 绑定:
Chrome 66 | Edge 79 | Firefox 58 | Safari 11.1 | Opera 53 |
Apr 2018 | Jan 2020 | Jan 2018 | Mar 2018 | May 2018 |
ES2019 在 JavaScript 中添加了 Array flat()
方法。
flat()
方法通过展平嵌套数组来创建新数组。
const myArr = [[1,2],[3,4],[5,6]];
const newArr = myArr.flat();
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The flat() Method</h2>
<p id="demo"></p>
<script>
const myArr = [[1,2],[3,4],[5,6]];
const newArr = myArr.flat();
document.getElementById("demo").innerHTML = newArr;
</script>
</body>
</html>
自 2020 年 1 月起,所有现代浏览器都支持 JavaScript 数组 flat()
:
Chrome 69 | Edge 79 | Firefox 62 | Safari 12 | Opera 56 |
Sep 2018 | Jan 2020 | Sep 2018 | Sep 2018 | Sep 2018 |
ES2019 在 JavaScript 中添加了 Array flatMap()
方法。
flatMap()
方法首先映射数组的所有元素 然后通过展平数组来创建一个新数组。
const myArr = [1, 2, 3, 4, 5, 6];
const newArr = myArr.flatMap((x) => x * 2);
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The flatMap() Method</h2>
<p id="demo"></p>
<script>
const myArr = [1, 2, 3, 4, 5,6];
const newArr = myArr.flatMap((x) => x * 2);
document.getElementById("demo").innerHTML = newArr;
</script>
</body>
</html>
ES2019 修订了 Array sort()
方法。
在 2019 年之前,规范允许不稳定的排序算法,例如 QuickSort。
ES2019之后,浏览器必须使用稳定的排序算法:
当对某个值的元素进行排序时,这些元素必须保持其与具有相同值的其他元素的相对位置。
const myArr = [
{name:"X00",price:100 },
{name:"X01",price:100 },
{name:"X02",price:100 },
{name:"X03",price:100 },
{name:"X04",price:110 },
{name:"X05",price:110 },
{name:"X06",price:110 },
{name:"X07",price:110 }
];
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Stable Sort</h1>
<p>From ES2019, browsers must use a stable sorting algorithm.</p>
<p>When sorting elements on a key, the elements must keep their relative position to other objects with the same key.</p>
<p id="demo"></p>
<script>
const myArr = [
{name:"X00",price:100 },
{name:"X01",price:100 },
{name:"X02",price:100 },
{name:"X03",price:100 },
{name:"X04",price:110 },
{name:"X05",price:110 },
{name:"X06",price:110 },
{name:"X07",price:110 },
{name:"X08",price:120 },
{name:"X09",price:120 },
{name:"X10",price:120 },
{name:"X11",price:120 },
{name:"X12",price:130 },
{name:"X13",price:130 },
{name:"X14",price:130 },
{name:"X15",price:130 },
{name:"X16",price:140 },
{name:"X17",price:140 },
{name:"X18",price:140 },
{name:"X19",price:140 }
];
myArr.sort( (p1, p2) => {
if (p1.price < p2.price) return -1;
if (p1.price > p2.price) return 1;
return 0;
});
let txt = "";
myArr.forEach(myFunction);
function myFunction(value) {
txt += value.name + " " + value.price + "<br>";
}
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>
在上面的例子中,当按价格排序时,结果不允许出现在其他相对位置的名称,例如 像这样:
X01 100
X03 100
X00 100
X03 100
X05 110
X04 110
X06 110
X07 110
ES2019 修订了 JSON stringify()
方法。
2019 年之前,JSON 无法对使用\编码的字符进行字符串化。
let text = JSON.stringify("\u26D4");
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript JSON</h1>
<h2>Revised stringify()</h2>
<p id="demo"></p>
<script>
let text = JSON.stringify("\u26D4");
document.getElementById("demo").innerHTML = JSON.parse(text);
</script>
</body>
</html>
在 ES2019 之前,在 UTF-8 代码点(U+D800 到 U+DFFF)上使用 JSON.stringify()
JSON 返回损坏的 Unicode 字符,如 ���。
在此修订之后,具有 UTF-8 代码点的字符串可以使用 JSON.stringify()
进行安全转换, 并使用 JSON.parse()
返回原始内容。 <小时>
在 2019 年之前,这些被视为行终止符并导致错误异常:
// This is valid in ES2019:
let text = "\u2028";
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<p>From ES2019, line and paragraph separator symbols (\u2028 and \u2029) are allowed in string literals:</p>
<p id="demo"></p>
<script>
let text = "\u2028";
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
现在,JavaScript 和 JSON 具有相同的规则。
ES2019 之前:
text=JSON.parse('"\u2028"') 将解析为 ''。
text='"\u2028"' 会给出语法错误。
ES2019 修订了 Function toString()
方法。
toString()
方法返回表示函数源代码的字符串。
从 2019 年开始,toString() 必须返回函数的源代码,包括注释, 空格和语法细节。
在 2019 年之前,不同的浏览器返回该函数的不同变体(例如没有注释和空格)。 从 2019 年开始,该函数应完全按照编写的方式返回。
function myFunction(p1, p2) {
return p1 * p2;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>The toString() Method</h2>
<p>The toString() method returns the function as a string:</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = myFunction.toString();
</script>
</body>
</html>