摘要：，和中新增功能的示例原文鏈接翻譯鏈接始終緊跟的最新功能是很難的，更難的是找到有用的代碼示例。和其他雙字節(jié)字符上的和和其它雙字節(jié)字符串使用的多字節(jié)表示。所以和可能無(wú)法按照預(yù)期的工作。提醒展開(kāi)運(yùn)算符用于等號(hào)的右側(cè)，解構(gòu)運(yùn)算符用于等號(hào)的左側(cè)。

原文鏈接： medium.freecodecamp.org
翻譯鏈接：https://www.zcfy.cc/article/h...

始終緊跟Javascript(ECMAScript)的最新功能是很難的，更難的是找到有用的代碼示例。

因此，在本文中，我將介紹在TC39的最終提案中包含的18個(gè)功能，這些功能將被添加到ES2016, ES2017, and ES2018 （最終草案）中，并通過(guò)有實(shí)際用處的示例來(lái)展示它們。

這是一篇非常長(zhǎng)的貼子，但應(yīng)該非常容易閱讀。把它當(dāng)作“Netflix狂歡閱讀” 讀完之后，我保證你將掌握大量有關(guān)這些功能的知識(shí)。

讓我們一個(gè)一個(gè)地看看這些新功能

includes是Array實(shí)例上一個(gè)非常簡(jiǎn)的方法，可以非常容易查找到某一項(xiàng)是否在Array中（包括 NaN 而不像 indexOf不能查找NaN）。

const arr = [1, 2, 3, 4, NaN];
// Instead of
if (arr.indexOf(3) >= 0) {
    console.log(true);
}

// Use
if (arr.includes(3)) {
    console.log(true);
}

arr.includes(NaN); // true
arr.indexOf(NaN); // -1

花絮：JavaScript規(guī)范制定者想將它命名為contains，但是這個(gè)名字已經(jīng)明確地被Mootools用了，所他們使用includes。

數(shù)學(xué)運(yùn)算如加法和減法分別有+和- 等中綴運(yùn)算符。與他們類(lèi)似，中綴運(yùn)算符通常用于指數(shù)運(yùn)算。在ECMAScript 2016中，引入了來(lái)代替Math.pow。

Math.pow(7,2) // 49

//Now
7**2 // 49

1、Object.values()
Object.values()是一個(gè)類(lèi)似于Object.keys()的新函數(shù)，它返回對(duì)象自有屬性的所有值，而不包括原型鏈上的任何值。

const cars = { BMW: 2, TESLA: 2, TOYOTA: 1 };

// ES2015
const vals = Object.keys(cars).map(key => cars[key]);
console.log(vals); // [3,2,1]

// ES2017
const values = Object.values(cars);
console.log(values);

2、 Object.entries()
Object.entries()與Object.keys有關(guān)，但不僅僅返回鍵，而是以數(shù)組的形式返回鍵和值。這使得在循環(huán)中使用對(duì)象，或?qū)?duì)象轉(zhuǎn)到Maps等變得非常簡(jiǎn)單。

示例 1:

const cars = { BMW: 2, TESLA: 2, TOYOTA: 1 };

// ES5.1
Object.keys(cars).forEach(function(key) {
    console.log("key: " + key + "value" + carsp[key]);
});

// ES8
for (let [key, value] of Object.entries(cars)) {
    console.log(`key: ${key} value:${value}`);
}

示例 2:

const cars = { BMW: 2, TESLA: 2, TOYOTA: 1 };

// ES2015
const map1 = new Map();
Object.keys(cars).forEach(key => {
    map1.set(key, cars[key]);
});

console.log(map1); // Map(3){"BMW" => 2, "TESLA" => 2, "TOYOTA" => 1}

// ES8
const map = new Map(Object.entries(cars));
console.log(map); // Map(3){"BMW" => 2, "TESLA" => 2, "TOYOTA" => 1}

String新增了兩個(gè)實(shí)例謝謝老婆---String.prototype.padStart 和 String.prototype.padEnd?，它們?cè)试S在原始字符串的開(kāi)始和結(jié)尾處添加空字符串或者是其它的字符串。

"someString".padStart(字符串的總長(zhǎng)度 [,填充字符串]);

"5".padStart(10) // "
5"

"5".padStart(10, "=*") //"=*=*=*=*=5"
"5".padEnd(10) // "5         "

"5".padEnd(10, "=*") //"5=*=*=*=*="

當(dāng)我們想要漂亮的打印顯示或終端打印等場(chǎng)景中對(duì)齊輸出時(shí)，將變得的很方便。

3.1 padStart 示例:
在下面的示例中，有一些不同長(zhǎng)度的數(shù)字，我們想在它們前面填充“0”，以便所有的項(xiàng)目都將以10位的相同長(zhǎng)度用于顯示。我們可以使用padStart(10, "0")很容易的實(shí)現(xiàn)。

// ECMAScript 2017
const formatted = [0, 1, 12, 123, 1234, 12345].map(num =>
    num.toString().padStart(10, "0")
);
console.log(formatted);// ["0000000000", "0000000001", "0000000012", "0000000123", "0000001234", "0000012345"]

3.2 padEnd 示例:
當(dāng)我們想右對(duì)齊打印多個(gè)不同長(zhǎng)度的項(xiàng)目時(shí)，使用padEnd就非常方便了。

下面是一個(gè)非常好實(shí)例，它展示了padEnd 、padStart 和 Object.entries如何結(jié)合使用產(chǎn)生一個(gè)漂亮的輸出。

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")}`)

});
//Prints..

// ?BMW - - - - - - -  Count: 010

// ?Tesla - - - - - -  Count: 005

// ?Lamborghini - - -  Count: 000

3.3 ?? Emojis和其他雙字節(jié)字符上的padStart和padEnd
Emojis和其它雙字節(jié)字符串使用unicode的多字節(jié)表示。所以padStart和padEnd可能無(wú)法按照預(yù)期的工作??。

例如：假設(shè)我們嘗試用 ??表示符號(hào)填充字符中heart到10個(gè)字符，結(jié)果如下所示：

//Notice that instead of 5 hearts, there are only 2 hearts and 1 heart that looks odd!

"heart".padStart(10, "??");
// prints.. "?????heart"

這是因?yàn)???是2個(gè)碼長(zhǎng)（"u2764uFE0F"）！單詞heart是5個(gè)字符，所以我僅剩下5個(gè)字符用于填充。所以最終JS使用"u2764uFE0F"填充了兩個(gè)心型????。最一個(gè)?的產(chǎn)生是因?yàn)镴S僅使用了第一個(gè)字節(jié)u2764。

所以最后輸出： ?????heart

PS：你可通過(guò)這個(gè)鏈接查看unicode字符轉(zhuǎn)換。

這個(gè)方法返回一個(gè)對(duì)象的所有屬性的詳細(xì)信息（包括get和set方法）。添加這個(gè)方法的主要目的是允許淺拷貝/克隆一個(gè)對(duì)象，包括對(duì)象上的getter和setter函數(shù)，不同于Object.assign。

Object.assign 允許淺復(fù)制源對(duì)象上的所有屬性的詳細(xì)信息，除getter和setter函數(shù)外。

下面的示例通過(guò)拷貝一個(gè)原始對(duì)象Car到一個(gè)新對(duì)象ElectricCar，來(lái)展示Object.assign和Object.getOwnPropertyDescriptors以及Object.defineProperties之間的區(qū)別。你會(huì)發(fā)現(xiàn)使用Object.getOwnPropertyDescriptors，discount的getter和setter函數(shù)同樣被拷貝到目標(biāo)對(duì)象。

var Car = {

 name: "BMW",

 price: 1000000,

 set discount(x) {

  this.d = x;

 },

 get discount() {

  return this.d;

 },

};
//Print details of Car object"s "discount" property

console.log(Object.getOwnPropertyDescriptor(Car, "discount"));

//prints..

// { 

//   get: [Function: get],

//   set: [Function: set],

//   enumerable: true,

//   configurable: true

// }
//Copy Car"s properties to ElectricCar using Object.assign

const ElectricCar = Object.assign({}, Car);
//Print details of ElectricCar object"s "discount" property

console.log(Object.getOwnPropertyDescriptor(ElectricCar, "discount"));

//prints..

// { 

//   value: undefined,

//   writable: true,

//   enumerable: true,

//   configurable: true 


// }

//??Notice that getters and setters are missing in ElectricCar object for "discount" property !??
//Copy Car"s properties to ElectricCar2 using Object.defineProperties 

//and extract Car"s properties using Object.getOwnPropertyDescriptors

const ElectricCar2 = Object.defineProperties({}, Object.getOwnPropertyDescriptors(Car));
//Print details of ElectricCar2 object"s "discount"
property

console.log(Object.getOwnPropertyDescriptor(ElectricCar2, "discount"));

//prints..

// { get: [Function: get],  ??????

//   set: [Function: set],  ??????

//   enumerable: true,

//   configurable: true 

// }

// Notice that getters and setters are present in the ElectricCar2 object for "discount" property!

這是一個(gè)小的更新，它允許我們?cè)诤瘮?shù)最后一個(gè)參數(shù)的后面添加尾隨逗號(hào)。為什么這么做？它可以幫助像git blame這樣的工具確認(rèn)所有的責(zé)任都是新的開(kāi)發(fā)者引起的。

下面的示例說(shuō)明這個(gè)問(wèn)題和解決方法。

注意：你可以尾隨逗號(hào)來(lái)調(diào)用函數(shù)。

如果你問(wèn)我，我會(huì)說(shuō)這個(gè)迄今為止最重要也是最有用的功能。異步函數(shù)允許們?cè)僖膊挥锰幚砘卣{(diào)地獄，同時(shí)使用整個(gè)代碼看起來(lái)很簡(jiǎn)單。

async關(guān)鍵字告訴JavaScript編譯器，以不同的方式處理這個(gè)函數(shù)。在函數(shù)內(nèi)執(zhí)行到await關(guān)鍵字時(shí)，編譯器將會(huì)暫停。它假設(shè)在等待之后的表達(dá)式返回一個(gè)承諾，并等待承諾解決或拒絕后繼續(xù)執(zhí)行。

在這個(gè)示例中，getAmount函數(shù)將調(diào)用兩個(gè)異步的函數(shù)getUser 和 getBankBalance。我們可以通過(guò)Promise實(shí)現(xiàn)，但使用async await會(huì)更加的優(yōu)雅和簡(jiǎn)單。.

6.1 異步函數(shù)本身返回一個(gè)Promise.
如果你想等待一個(gè)異步函數(shù)的返回結(jié)果，你需要你需要使用Promise’s then語(yǔ)法來(lái)捕獲返回結(jié)果。

在下面的示例中，我們想通過(guò)console.log來(lái)打印返回結(jié)果，而不是在doubleAndAdd函數(shù)內(nèi)部。所以我們想等函數(shù)返回結(jié)果并通過(guò)then語(yǔ)法將結(jié)果傳遞給console.log 。

6.2 并行調(diào)用async/await
在上一個(gè)示例中，我們調(diào)用了兩次await語(yǔ)句，每一次等待1s（共2s）。In the previous example we are calling await twice, but each time we are waiting for one second (total 2 seconds). 相反，我們可以使用Promise.all并行執(zhí)行兩次調(diào)用，因?yàn)閍和b。

6.3 async/await函數(shù)的錯(cuò)誤處理
使用async await時(shí)，有各種方法來(lái)處理錯(cuò)誤。

選項(xiàng) 1?—在函數(shù)中使用try catch

//Option 1 - Use try catch within the function

async function doubleAndAdd(a, b) {

 try {

  a = await doubleAfter1Sec(a);

  b = await doubleAfter1Sec(b);

 } catch (e) {

  return NaN;
//return something

 }
return a + b;

}

//?Usage:

doubleAndAdd("one", 2).then(console.log);
// NaN

doubleAndAdd(1, 2).then(console.log);
// 6
function doubleAfter1Sec(param) {

 return new Promise((resolve, reject) =>
{

  setTimeout(function() {

   let val = param * 2;

   isNaN(val) ? reject(NaN) : resolve(val);

  }, 1000);

 });

}

Option 2— 捕獲每個(gè)一個(gè) await 表達(dá)式
因?yàn)槊恳粋€(gè)await表達(dá)式都返回一個(gè)Promise，你可以像下面展示在每一行上捕獲錯(cuò)誤。

//Option 2 - *Catch* errors on  every await line

//as each await expression is a Promise in itself

async function doubleAndAdd(a, b) {

 a = await doubleAfter1Sec(a).catch(e => console.log(""a" is NaN")); // ?

 b = await doubleAfter1Sec(b).catch(e => console.log(""b" is NaN")); // ?

 if (!a || !b) {

  return NaN;

 }

 return a + b;

}
//?Usage:

doubleAndAdd("one", 2).then(console.log);
// NaN  and logs:  "a" is NaN

doubleAndAdd(1, 2).then(console.log);
// 6
function doubleAfter1Sec(param) {

 return new Promise((resolve, reject) =>
{

  setTimeout(function() {

   let val = param * 2;

   isNaN(val) ? reject(NaN) : resolve(val);

  }, 1000);

 });

}

Option 3?—?捕獲整個(gè) async-await 函數(shù)

//Option 3 - Dont do anything but handle outside the function

//since async / await returns a promise, we can catch the whole function"s error

async function doubleAndAdd(a, b) {

 a = await doubleAfter1Sec(a);

 b = await doubleAfter1Sec(b);

 return a + b;

}
//?Usage:

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);

 });

}

ECMAScript目前正在最張草案中，將于2018年6月或7月發(fā)布。 is currently in final draft and will be out in June or July 2018. 下文函數(shù)的所有功能都將在Stage-4中，并將成為ECMAScript 2018的一部分。

這是一個(gè)偉大的、非常先進(jìn)的功能，是對(duì)JS引擎的核心增強(qiáng)。

它的主要思想是想為JS提供一些多線程的功能，以便JS開(kāi)發(fā)人員可以自己管理內(nèi)存（代替JS引擎對(duì)內(nèi)存的管理）來(lái)編寫(xiě)高性能的并發(fā)程序。

這是通過(guò)一種叫做SharedArrayBuffer的全局對(duì)象來(lái)實(shí)現(xiàn)的，它實(shí)質(zhì)上是將數(shù)據(jù)存儲(chǔ)在_共享_ 內(nèi)存空間中。所以這個(gè)數(shù)據(jù)可以在JS主線程和web-worker之間共享。

到現(xiàn)在為止，如果我們想在JS主線程和web-workers之間共享數(shù)據(jù)，只能先復(fù)制數(shù)據(jù)然后使用postMessage 發(fā)送到其它線程。

現(xiàn)在，只需要使用SharedArrayBuffer，主線程和多個(gè)web工作線程即可訪問(wèn)共享數(shù)據(jù)。

但是在線程之間共享內(nèi)存會(huì)引發(fā)競(jìng)爭(zhēng)條件的產(chǎn)生。為了防止條件的產(chǎn)生引入了“Atomics”全局對(duì)象。 當(dāng)一個(gè)線程正在使用它的數(shù)據(jù)時(shí)，Atomics 提供了各種方法來(lái)鎖定共享內(nèi)存。 它還提供了安全地更新共享內(nèi)存中的數(shù)據(jù)的方法。

建議通過(guò)某些庫(kù)來(lái)使用這些功能，但是現(xiàn)在還沒(méi)有構(gòu)建在此功能上的庫(kù)。

如果你有興趣，推薦閱讀：

From Workers to Shared Memor_y?—?_lucasfcosta
A cartoon intro to SharedArrayBuffers_?—?_Lin Clark
Shared memory and atomics_?—?_Dr. Axel Rauschmayer

//A "Tag" function returns a custom string literal.

//In this example, greet calls timeGreet() to append Good //Morning/Afternoon/Evening depending on the time of the day.
function greet(hardCodedPartsArray, ...replacementPartsArray) {

 console.log(hardCodedPartsArray);
//[ "Hello ", "!" ]

 console.log(replacementPartsArray);
//[ "Raja" ]
let str = "";

 hardCodedPartsArray.forEach((string, i) =>
{

  if (i < replacementPartsArray.length) {

   str += `${string} ${replacementPartsArray[i] || ""}`;

  } else {

   str += `${string} ${timeGreet()}`;
//<-- append Good morning/afternoon/evening here

  }

 });

 return str;

}
//?Usage:

const firstName = "Raja";

const greetings = greet`Hello ${firstName}!`;
//??<-- Tagged literal
console.log(greetings);
//"Hello  Raja! Good Morning!"
?
function timeGreet() {

 const hr = new Date().getHours();

 return hr < 12

  ? "Good Morning!"

  : hr < 18 

  ? "Good Afternoon!"

  : "Good Evening!";

}

function myTagFunc(str) { 

 return { "cooked": "undefined", "raw": str.raw[0] }

} 


var str = myTagFunc `hi 

//Before

/first.second/.test("first
second");
//false

//ECMAScript 2018

/first.second/s.test("first
second");
//true   Notice: /s ??

//The following matches an Emoji character

/p{Emoji}/u.test("??");
//true
//The following fails because yellow emojis don"t need/have Emoji_Modifier!

/p{Emoji}p{Emoji_Modifier}/u.test("??");
//false
//The following matches an emoji characterp{Emoji} followed by p{Emoji_Modifier}

/p{Emoji}p{Emoji_Modifier}/u.test("??");
//true
//Explaination:

//By default the victory emoji is yellow color.

//If we use a brown, black or other variations of the same emoji, they are considered

//as variations of the original Emoji and are represented using two unicode characters.

//One for the original emoji, followed by another unicode character for the color.

//

//So in the below example, although we only see a single brown victory emoji,

//it actually uses two unicode characters, one for the emoji and another

// for the brown color.

//

//In Unicode database, these colors have Emoji_Modifier property.

//So we need to use both p{Emoji} and p{Emoji_Modifier} to properly and

//completely match the brown emoji.

/p{Emoji}p{Emoji_Modifier}/u.test("??");
//true