ECMAScript 2017

JavaScript命名约定从ES1、ES2、ES3、ES5和ES6开始。

但是，ECMAScript 2016和2017并没有被称为ES7和ES8。

自2016年起，新版本按年份命名（ECMAScript 2016/2017/2018）。

ECMAScript 2017的新特性

本章讲介绍ECMAScript 2017的新特性：

JavaScript String padding
JavaScript Object.entries
JavaScript Object.values
JavaScript async functions
JavaScript shared memory

JavaScript String Padding

ECMAScript 2017添加了两个String方法：padStart和padEnd，以支持在字符串的开头和结尾填充。

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>padStart（）方法用另一个字符串填充一个字符串：</p>
<p id="demo"></p>
<script>
let str = "5";
str = str.padStart(4,0);
document.getElementById("demo").innerHTML = str;
</script>
</body>
</html>

运行一下

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>padEnd() 方法用另一个字符串填充一个字符串：</p>
<p id="demo"></p>
<script>
let str = "5";
str = str.padEnd(4,0);
document.getElementById("demo").innerHTML = str;
</script>
</body>
</html>

运行一下

Internet Explorer 不支持字符串填充。

Firefox和Safari是第一款支持JavaScript字符串填充的浏览器：

方法
Padding 方法	Chrome 57	Edge 15	Firefox 48	Safari 10	Opera 44
	2017年5月	2017年4月	2016年8月	2016年9月	2017年3月

JavaScript Object.entries

ECMAScript 2017将新的方法 entries 添加到对象：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Object Methods</h2>
<p>对象的 entries() 方法的作用是：从一个对象返回一个键/值对数组:</p>
<p id="demo"></p>
<script>
const person = {
  firstName : "埃隆",
  lastName  : "马斯克",
  age     : 50,
  eyeColor  : "蓝色"
};
document.getElementById("demo").innerHTML = Object.entries(person);
</script>
</body>
</html>

运行一下

Firefox和Chrome是第一款支持 JavaScript 对象的 entries 的浏览器：

方法
entries 方法	Chrome 47	Edge 14	Firefox 47	Safari 10.1	Opera 41
	2016年6月	2016年8月	2016年6月	2017年3月	2016年10月

JavaScript Object Values

对象的 values 方法与 entries 类似，但返回对象值的一维数组：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Object Methods</h2>
<p>对象的 Values() 方法的作用是：从一个对象返回一个数组:</p>
<p id="demo"></p>
<script>
const person = {
  firstName : "埃隆",
  lastName  : "马斯克",
  age     : 50,
  eyeColor  : "蓝色"
};
document.getElementById("demo").innerHTML = Object.values(person);
</script>
</body>
</html>

运行一下

Firefox和Chrome是第一款支持 JavaScript 对象的 Values 的浏览器：

方法
Values 方法	Chrome 54	Edge 14	Firefox 47	Safari 10.1	Opera 41
	2016年10月	2016年8月	2016年6月	2017年3月	2016年10月

JavaScript Async Functions

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript async / await</h2>
<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>

运行一下

Firefox和Chrome是第一款支持 JavaScript 对象的 async 的浏览器：

方法
async 方法	Chrome 54	Edge 14	Firefox 47	Safari 10.1	Opera 41
	2016年10月	2016年8月	2016年6月	2017年3月	2016年10月

ECMAScript 2017

ECMAScript 2017的新特性

JavaScript String Padding

JavaScript Object.entries

JavaScript Object Values

JavaScript Async Functions

分类导航