JavaScript ES2019


目录

    显示目录

JavaScript 版本号

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

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

ES2019的新特性

  • String.trimStart()

  • String.trimEnd()

  • 对象.fromEntries

  • 可选的捕获绑定

  • Array.flat()

  • Array.flatMap()

  • 修改后的 Array.Sort()

  • 修改后的 JSON.stringify()

  • 字符串文字中允许使用分隔符

  • 修改后的 Function.toString()

警告

这些功能相对较新。

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


JavaScript 字符串修剪开始()

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

JavaScript 字符串修剪结束()

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

JavaScript 对象 fromEntries()

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


可选的 catch 绑定

从 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

JavaScript 数组 flat()

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

JavaScript 数组 flatMap()

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

修改后的 JSON.stringify()

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() 返回原始内容。 <小时>

分隔符

<p>现在在字符串文字中允许使用行分隔符和段落分隔符符号(\u2028 和 \u2029)。

在 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"' 会给出语法错误


修改后的函数 toString()

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>