JavaScript ECMAScript 2017


目录

    显示目录

JavaScript 版本号

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

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

ECMAScript 2017 中的新功能

本章介绍 ECMAScript 2017 中的新功能:

  • JavaScript 字符串填充

  • JavaScript 对象条目()

  • JavaScript 对象值()

  • JavaScript 异步和等待

  • JavaScript Object.getOwnPropertyDescriptors


JavaScript 字符串填充

ECMAScript 2017 向 JavaScript 添加了两个字符串方法: padStart()padEnd() 支持字符串开头和结尾的填充。

例子

let text = "5";
text = text.padStart(4,0);

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

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

<p>The padStart() method pads a string from the start.</p>
<p>It pads the string with another string (multiple times) until it reaches a given length.</p>

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

<script>
let text = "5";
text = text.padStart(4,"0");

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>
let text = "5";
text = text.padEnd(4,0);

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

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

<p>The padEnd() method pads a string at the end.</p>
<p>It pads the string with another string (multiple times) until it reaches a given length.</p>

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

<script>
let text = "5";
text = text.padEnd(4,"0");

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

自 2017 年 4 月起,所有现代浏览器都支持 JavaScript 字符串填充:

Chrome 57 Edge 15 Firefox 48 Safari 10 Opera 44
Mar 2017 Apr 2017 Aug 2016 Sep 2016 Mar 2017

JavaScript 对象条目

ECMAScript 2017 向对象添加了 Object.entries() 方法。

Object.entries() 返回对象中键/值对的数组:

例子

const person = {
  firstName : "John",
  lastName : "Doe",
  age : 50,
  eyeColor : "blue"
};

let text = Object.entries(person);

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Methods</h2>

<p>The Object.entries() method returns an array of the key/value pairs in an object:</p>

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

<script>
const person = {
  firstName : "John",
  lastName  : "Doe",
  age     : 50,
  eyeColor  : "blue"
};

let text = Object.entries(person);
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Object.entries() 使在循环中使用对象变得简单:

例子

const fruits = {Bananas:300, Oranges:200, Apples:500};

let text = "";
for (let [fruit, value] of Object.entries(fruits)) {
  text += fruit + ": " + value + "<br>";
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Methods</h2>

<p>Object.entries() makes it simple to use objects in loops:</p>

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

<script>
const fruits = {Bananas:300, Oranges:200, Apples:500}; 

let text = "";
for (let [fruit, amount] of Object.entries(fruits)) {
  text += fruit + ": " + amount + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Object.entries() 还使得将对象转换为地图变得简单:

例子

const fruits = {Bananas:300, Oranges:200, Apples:500};

const myMap = new Map(Object.entries(fruits));

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Methods</h2>

<p>Object.entries() makes it simple to convert Object to Map:</p>

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

<script>
const fruits = {Bananas:300, Oranges:200, Apples:500}; 

const myMap = new Map(Object.entries(fruits));

document.getElementById("demo").innerHTML = myMap;
</script>

</body>
</html>

自 2017 年 3 月起,所有现代浏览器均支持 Object.entries()

Chrome 47 Edge 14 Firefox 47 Safari 10.1 Opera 41
Jun 2016 Aug 2016 Jun 2016 Mar 2017 Oct 2016

JavaScript 对象值

Object.values()Object.entries() 类似, 但返回对象值的一维数组:

例子

const person = {
  firstName : "John",
  lastName : "Doe",
  age : 50,
  eyeColor : "blue"
};

let text = Object.values(person);

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Methods</h2>

<p>The Object.values() method returns an array of values from an object:</p>

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

<script>
const person = {
  firstName : "John",
  lastName  : "Doe",
  age     : 50,
  eyeColor  : "blue"
};

let text = Object.values(person)
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

自 2017 年 3 月起,所有现代浏览器均支持 Object.values()

Chrome 54 Edge 14 Firefox 47 Safari 10.1 Opera 41
Oct 2016 Aug 2016 Jun 2016 Mar 2017 Oct 2016


JavaScript 异步函数

等待超时

async function myDisplay() {
  let myPromise = new Promise(function(myResolve,  myReject) {
    setTimeout(function() { myResolve("I love You !!"); }, 3000);
  });
  document.getElementById("demo").innerHTML = await myPromise;
}

 myDisplay();

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript async / await</h2>

<p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>

<h1 id="demo"></h1>

<script>
async function myDisplay() {
  let myPromise = new Promise(function(resolve) {
    setTimeout(function() {resolve("I love You !!");}, 3000);
  });
  document.getElementById("demo").innerHTML = await myPromise;
}

myDisplay();
</script>

</body>
</html>

Firefox 和 Chrome 是第一批支持异步 JavaScript 函数的浏览器:

Chrome 55 Edge 15 Firefox 52 Safari 11 Opera 42
Dec 2016 Apr 2017 Mar 2017 Sep 2017 Dec 2016