ECMAScript 2016

1.Array.property.includes() indexOf()不支持查找NaN，includes支持。

2.7**2 指數運算符，結果為49

ECMAScript 2017

1.Object.values() 返回Object自身屬性的所有值，排除原型鏈中的所有值。

2.Object.entries() 以數組方式返回keys和values。

遍歷

const obj = { foo: 'bar', baz: 42 }; console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ] const obj = { a: 5, b: 7, c: 9 }; for (const [key, value] of Object.entries(obj)) {console.log(`${key} ${value}`); // "a 5", "b 7", "c 9" } Object.entries(obj).forEach(([key, value]) => {console.log(`${key} ${value}`); // "a 5", "b 7", "c 9" }); View Code

生成Map

const obj = { foo: 'bar', baz: 42 }; const a = Object.entries(obj); var b= new Map(a) //?{"foo" => "bar", "baz" => 42} View Code

3.String Padding

向字符串String.proptotype.padStart和String.prototype.padEnd添加了兩個實例方法--他們允許在原始字符串的開始或是結尾附加、預先添加空字符串或是其他字符串。

'5'.padStart(10) // ' 5' '5'.padStart(10, '=*') //'=*=*=*=*=5' '5'.padEnd(10) // '5 ' '5'.padEnd(10, '=*') //'5=*=*=*=*=' View Code //ES2017 //如果你有一個不同長度的項目列表，并希望格式化它們的顯示目的，你可以使用padStart const formatted = [0, 1, 12, 123, 1234, 12345].map(num => num.toString().padStart(10, '0') // 添加 0 直到長度為 10 ); console.log(formatted); //打印 // [ // '0000000000', // '0000000001', // '0000000012', // '0000000123', // '0000001234', // '0000012345', // ] View Code const cars = {'?BMW': '10','?Tesla': '5','?Lamborghini': '0' } Object.entries(cars).map(([name, count]) => {//padEnd appends ' -' until the name becomes 20 characters//padStart prepends '0' until the count becomes 3 characters.console.log(`${name.padEnd(20, ' -')} Count: ${count.padStart(3, '0')}`) }); //打印結果.. // ?BMW - - - - - - - Count: 010 // ?Tesla - - - - - - Count: 005 // ?Lamborghini - - - Count: 000 View Code 'heart'.padStart(10, "??"); 22:10:05.595 "?????heart" View Code

4.Object.getOwnPropertyDescriptors

此方法返回給定對象的所有屬性的所有詳細信息(包括?get``set?方法). 添加這個的主要動機是允許淺拷貝/克隆一個對象到另一個對象中，這個對象也拷貝getter和setter函數，而不是Object.assign。Object.assign淺克隆除原始源對象的getter和setter函數以外的所有詳細信息。

var Car = {name: 'BMW',price: 1000000,set discount(x) {this.d = x;},get discount() {return this.d;}, }; //使用Object.defineProperties將Car的屬性復制到ElectricCar2 //并使用Object.getOwnPropertyDescriptors提取Car的屬性 const ElectricCar2 = Object.defineProperties({}, Object.getOwnPropertyDescriptors(Car)); //打印ElectricCar2對象“discount”屬性的詳細信息 console.log(Object.getOwnPropertyDescriptor(ElectricCar2, 'discount')); //prints.. // { get: [Function: get], // set: [Function: set], // enumerable: true, // configurable: true // } // 請注意，getter和setter存在于ElectricCar2對象中，用于'discount'屬性！ View Code

5.尾隨逗號

6.Async/Await

//ES2015 Promise function getAmount(userId) {getUser(userId).then(getBankBalance).then(amount => {console.log(amount);}); }****************************//ES2017 async function getAmount2(userId) {var user = await getUser(userId);var amount = await getBankBalance(user);console.log(amount); } function getUser(userId) {return new Promise(resolve => {setTimeout(() => {resolve('john')}, 1000)}); } function getBankBalance(user) {return new Promise((resolve, reject) => {setTimeout(() => {if(user == 'john') {resolve('$1,000');} else {reject(unknown user);}}, 1000)}); } View Code /異步函數本身返回一個Promise async function doubleAndAdd(a, b) {a = await doubleAfterlSec(a);b = await doubleAfterlSec(b);return a + b; } //用法 doubleAndAdd(1, 2).then(console.log); function doubleAfterlSec(param) {return new Promise (resolve => {setTimeout(resolve(param * 2), 1000);}); } View Code //異步函數本身返回一個Promise async function doubleAndAdd(a, b) {//注意：這邊使用 Promise.all//注意到使用數組解構,捕獲結果[a, b] = await Promise.all([doubleAfterlSec(a), doubleAfterlSec(b)]);return a + b; } //用法 doubleAndAdd(1, 2).then(console.log); function doubleAfterlSec(param) {return new Promise (resolve => {setTimeout(resolve(param * 2), 1000);}); } View Code // 1. 使用 try catch async function doubleAndAdd(a, b) {try {a = await doubleAfterlSec(a);b = await doubleAfterlSec(b);} catch (e) {return NaN; // return something }return a + b; } // 用法 doubleAndAdd('one', 2).then(console.log) //NaN doubleAndAdd(1, 2).then(console.log) // 6 function doubleAfterlSec(param) {return new Promise((resolve, reject) => {setTimeout(function() {let val = param * 2;isNaN(val) ? reject(NaN) : resolve(val);}, 1000);}); } View Code //因為異步/等待返回一個Promise，我們可以捕捉整個函數的錯誤 async function doubleAndAdd(a, b) {a = await doubleAfter1Sec(a);b = await doubleAfter1Sec(b);return a + b; } //用法 doubleAndAdd('one', 2) .then(console.log) .catch(console.log); //use "catch" function doubleAfter1Sec(param) {return new Promise((resolve, reject) => {setTimeout(function() {let val = param * 2;isNaN(val) ? reject(NaN) : resolve(val);}, 1000);}); } View Code

2018-06-23? 我嘗試了改寫之前的項目，使用async/await讓我的coding優雅了。

ECMAScript 2018

1.共享內存和原子

2.標記字面量

在標記字面量中，可以編寫一個函數來接收字符串文字的硬編碼部分，然后從該自定義函數中返回所需的任何內容。

鏈接

?

轉載于:https://www.cnblogs.com/Merrys/p/8875662.html

總結

以上是生活随笔為你收集整理的ECMAScript 2016，2017，和2018中新增功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。