ECMAScript 2017
ECMAScript 2017
JavaScript 命名约定始于 ES1、ES2、ES3、ES5 和 ES6。
但是，ECMAScript 2016 和 2017 未被称为 ES7 和 ES8。
自 2016 年以来，新版本按年份命名（ECMAScript 2016/2017/2018）。
ECMAScript 2017 中的新特性
本章介绍 ECMAScript 2017 的新特性：
- JavaScript 字符串填充
- JavaScript Object.entries
- JavaScript Object.values
- JavaScript 异步函数
- JavaScript 共享内存
JavaScript 字符串填充
ECMAScript 2017 添加了两个 String 方法：padStart 和 padEnd，以支持在字符串的开头和结尾进行填充。
示例代码：
let str = "5";
str = str.padStart(4,0);
// 结果是： 0005
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 字符串方法</h1>
<p>padStart() 方法用另一段字符串来填充字符串：</p>
<p id="demo"></p>
<script>
let text = "5";
document.getElementById("demo").innerHTML = text.padStart(4,0);
</script>
</body>
</html>
运行结果：
Javascript 字符串方法 padStart() 方法用另一段字符串来填充字符串： 0005
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
示例代码：
let str = "5";
str = str.padEnd(4,0);
// 结果是： 5000
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 字符串方法</h1>
<p>padEnd() 方法用另一段字符串填充字符串：</p>
<p id="demo"></p>
<script>
let text = "5";
document.getElementById("demo").innerHTML = text.padEnd(4,0);
</script>
</body>
</html>
运行结果：
Javascript 字符串方法 padEnd() 方法用另一段字符串填充字符串： 5000
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
Internet Explorer 不支持字符串填充。
Firefox 和 Safari 是第一批支持 JavaScript 字符串填充的浏览器：
| Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome 57 | Edge 15 | Firefox 48 | Safari 10 | Opera 44 |
| 2017 年 3 月 | 2017 年 4 月 | 2016 年 8 月 | 2016 年 9 月 | 2017 年 3 月 |
JavaScript 对象条目
ECMAScript 2017 向对象添加了新的 Object.entries 方法。
Object.entries() 方法返回对象中键/值对的数组：
示例代码：
const person = {
firstName : "Bill",
lastName : "Gates",
age : 50,
eyeColor : "blue"
};
document.getElementById("demo").innerHTML = Object.entries(person);
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象方法</h1>
<p>Object.entries() 方法返回对象中键/值对的数组：</p>
<p id="demo"></p>
<script>
const person = {
firstName : "Bill",
lastName : "Gates",
age : 19,
eyeColor : "blue"
};
document.getElementById("demo").innerHTML = Object.entries(person);
</script>
</body>
</html>
运行结果：
Javascript 对象方法 Object.entries() 方法返回对象中键/值对的数组： firstName,Bill,lastName,Gates,age,19,eyeColor,blue
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
Object.entries() 使循环中使用对象变简单了：
示例代码：
const fruits = {Bananas:300, Oranges:200, Apples:500};
let text = "";
for (let [fruit, value] of Object.entries(fruits)) {
text += fruit + ": " + value + "
";
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象方法</h1>
<p>Object.entries() 使得在循环中使用对象变得简单：</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>
运行结果：
Javascript 对象方法 Object.entries() 使得在循环中使用对象变得简单： Bananas: 300 Oranges: 200 Apples: 500
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
Object.entries() 也使得将对象转换为映射变得简单：
示例代码：
const fruits = {Bananas:300, Oranges:200, Apples:500};
const myMap = new Map(Object.entries(fruits));
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象方法</h1>
<p>Object.entries() 使将对象转换为 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>
运行结果：
Javascript 对象方法 Object.entries() 使将对象转换为 Map 变得简单： [object Map]
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
Chrome 和 Firefox 是第一批支持 Object.entries 的浏览器：
| Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome 47 | Edge 14 | Firefox 47 | Safari 10.1 | Opera 41 |
| 2016 年 6 月 | 2016 年 8 月 | 2016 年 6 月 | 2017 年 3 月 | 2016 年 10 月 |
JavaScript 对象值
Object.values 类似 Object.entries，但返回对象值的单维数组：
示例代码：
const person = {
firstName : "Bill",
lastName : "Gates",
age : 50,
eyeColor : "blue"
};
document.getElementById("demo").innerHTML = Object.values(person);
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象方法</h1>
<p>Object.values() 方法从一个对象返回一个值数组：</p>
<p id="demo"></p>
<script>
const person = {
firstName : "Bill",
lastName : "Gates",
age : 19,
eyeColor : "blue"
};
document.getElementById("demo").innerHTML = Object.values(person);
</script>
</body>
</html>
运行结果：
Javascript 对象方法 Object.values() 方法从一个对象返回一个值数组： Bill,Gates,19,blue
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
Firefox 和 Chrome 是第一批支持 Object.values 的浏览器：
| Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome 54 | Edge 14 | Firefox 47 | Safari 10.1 | Opera 41 |
| 2016 年 10 月 | 2016 年 8 月 | 2016 年 6 月 | 2017 年 3 月 | 2016 年 10 月 |
JavaScript Async 函数
等待超时
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>
<h1>JavaScript async / await</h1>
<p>请等待 3 秒（3000 毫秒）让此页面发生变化。</p>
<h1 id="demo"></h1>
<script>
async function myDisplay() {
let myPromise = new Promise(function(myResolve, myReject) {
setTimeout(function() { myResolve("I love You !!"); }, 3000);
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
</script>
</body>
</html>
运行结果：
Javascript async / await 请等待 3 秒（3000 毫秒）让此页面发生变化。
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
Firefox 和 Chrome 是第一批支持异步 JavaScript 函数的浏览器：
| Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome 55 | Edge 15 | Firefox 52 | Safari 11 | Opera 42 |
| 2016 年 12 月 | 2017 年 4 月 | 2017 年 3 月 | 2017 年 9 月 | 2016 年 12 月 |
