摘要：為了使程序員能夠一次一個(gè)地處理集合中的元素，引入了迭代器接口。迭代器使用該方法獲取對(duì)象屬性名稱的數(shù)組，然后將其分配給常量。迭代器的缺點(diǎn)是它們不適合表示異步數(shù)據(jù)源。每次循環(huán)時(shí)，都會(huì)調(diào)用迭代器的方法，它返回一個(gè)。

原文地址：https://css-tricks.com/new-es2018-features-every-javascript-developer-should-know/

原文作者：Faraz Kelhini

譯者：Timbok

翻譯工具：Google Translate

本文首發(fā)于我的個(gè)人網(wǎng)站: Timbok.top

ECMAScript標(biāo)準(zhǔn)的第九版，官方稱為ECMAScript 2018（或簡(jiǎn)稱ES2018），于2018年6月發(fā)布。從ES2016開始，ECMAScript規(guī)范的新版本每年發(fā)布而不是每幾年發(fā)布一次，并且添加的功能少于主要版本以前。該標(biāo)準(zhǔn)的最新版本通過添加四個(gè)新RegExp功能，rest/spread屬性，asynchronous iteration，和Promise.prototype.finally。此外，ES2018從標(biāo)記模板中刪除了轉(zhuǎn)義序列的語法限制。

這些新變化將在后面的小節(jié)中解釋。

ES2015最有趣的功能之一是點(diǎn)差運(yùn)算符。該運(yùn)算符使復(fù)制和合并數(shù)組變得更加簡(jiǎn)單。您可以使用運(yùn)算符...，而不是調(diào)用concat()or slice()方法：

const arr1 = [10, 20, 30];

// make a copy of arr1
const copy = [...arr1];

console.log(copy);    // → [10, 20, 30]

const arr2 = [40, 50];

// merge arr2 with arr1
const merge = [...arr1, ...arr2];

console.log(merge);    // → [10, 20, 30, 40, 50]

在必須作為函數(shù)的多帶帶參數(shù)傳入數(shù)組的情況下，擴(kuò)展運(yùn)算符也派上用場(chǎng)。例如：

const arr = [10, 20, 30]

// equivalent to
// console.log(Math.max(10, 20, 30));
console.log(Math.max(...arr));    // → 30

ES2018通過向?qū)ο笪淖痔砑訑U(kuò)展屬性來進(jìn)一步擴(kuò)展此語法。使用spread屬性，您可以將對(duì)象的自身可枚舉屬性復(fù)制到新對(duì)象上。請(qǐng)考慮以下示例：

const obj1 = {
  a: 10,
  b: 20
};

const obj2 = {
  ...obj1,
  c: 30
};

console.log(obj2);    // → {a: 10, b: 20, c: 30}

在此代碼中，...運(yùn)算符用于檢索屬性obj1并將其分配給obj2。在ES2018之前，嘗試這樣做會(huì)引發(fā)錯(cuò)誤。如果有多個(gè)具有相同名稱的屬性，則將使用最后一個(gè)屬性：

const obj1 = {
  a: 10,
  b: 20
};

const obj2 = {
  ...obj1,
  a: 30
};

console.log(obj2);    // → {a: 30, b: 20}

Spread屬性還提供了一種合并兩個(gè)或多個(gè)對(duì)象的新方法，可以將其用作方法的替代Object.assign()方法：

const obj1 = {a: 10};
const obj2 = {b: 20};
const obj3 = {c: 30};

// ES2018
console.log({...obj1, ...obj2, ...obj3});    // → {a: 10, b: 20, c: 30}

// ES2015
console.log(Object.assign({}, obj1, obj2, obj3));    // → {a: 10, b: 20, c: 30}

但請(qǐng)注意，spread屬性并不總是產(chǎn)生相同的結(jié)果Object.assign()。請(qǐng)考慮以下代碼：

Object.defineProperty(Object.prototype, "a", {
  set(value) {
    console.log("set called!");
  }
});

const obj = {a: 10};

console.log({...obj});    
// → {a: 10}

console.log(Object.assign({}, obj));    
// → set called!
// → {}

在此代碼中，該Object.assign()方法執(zhí)行繼承的setter屬性。相反，傳播屬性完全忽略了setter。

重要的是要記住，spread屬性只復(fù)制可枚舉的屬性。在以下示例中，type屬性不會(huì)顯示在復(fù)制的對(duì)象中，因?yàn)槠?b>enumerable屬性設(shè)置為false：

const car = {
  color: "blue"
};

Object.defineProperty(car, "type", {
  value: "coupe",
  enumerable: false
});

console.log({...car});    // → {color: "blue"}

即使它們是可枚舉的，也會(huì)忽略繼承的屬性：

const car = {
  color: "blue"
};

const car2 = Object.create(car, {
  type: {
    value: "coupe",
    enumerable: true,
  }
});

console.log(car2.color);                      // → blue
console.log(car2.hasOwnProperty("color"));    // → false

console.log(car2.type);                       // → coupe
console.log(car2.hasOwnProperty("type"));     // → true

console.log({...car2});                       // → {type: "coupe"}

在此代碼中，car2繼承color屬性car。因?yàn)閟pread屬性只復(fù)制對(duì)象的自己的屬性，color所以不包含在返回值中。

請(qǐng)記住，spread屬性只能生成對(duì)象的淺表副本。如果屬性包含對(duì)象，則僅復(fù)制對(duì)象的引用：

const obj = {x: {y: 10}};
const copy1 = {...obj};    
const copy2 = {...obj}; 

console.log(copy1.x === copy2.x);    // → true

這里copy1和copy2的x是指在內(nèi)存中的同一對(duì)象，所以全等運(yùn)算返回true。

ES2015中添加的另一個(gè)有用功能是rest參數(shù)，它使JavaScript程序員可以使用它...來表示值作為數(shù)組。例如：

const arr = [10, 20, 30];
const [x, ...rest] = arr;

console.log(x);       // → 10
console.log(rest);    // → [20, 30]

這里，arr的第一個(gè)值被分配給對(duì)應(yīng)的x，而剩余的元素被分配給rest變量。這種稱為陣列解構(gòu)的模式變得如此受歡迎，以至于Ecma技術(shù)委員會(huì)決定為對(duì)象帶來類似的功能：

const obj = {
  a: 10,
  b: 20,
  c: 30
};

const {a, ...rest} = obj;

console.log(a);       // → 10
console.log(rest);    // → {b: 20, c: 30}

此代碼使用解構(gòu)賦值中的其余屬性將剩余的自身可枚舉屬性復(fù)制到新對(duì)象中。請(qǐng)注意，rest屬性必須始終出現(xiàn)在對(duì)象的末尾，否則會(huì)引發(fā)錯(cuò)誤：

const obj = {
  a: 10,
  b: 20,
  c: 30
};

const {...rest, a} = obj;    // → SyntaxError: Rest element must be last element

還要記住，在對(duì)象中使用多個(gè)rest會(huì)導(dǎo)致錯(cuò)誤，除非它們是嵌套的：

const obj = {
  a: 10,
  b: {
    x: 20,
    y: 30,
    z: 40
  }
};

const {b: {x, ...rest1}, ...rest2} = obj;    // no error

const {...rest, ...rest2} = obj;    // → SyntaxError: Rest element must be last element

8.0.0（運(yùn)行時(shí)需要加-harmony）

8.3.0（完全支持）

迭代數(shù)據(jù)集是編程的重要部分。此前ES2015，提供的JavaScript語句如for，for...in和while，和方法map()，filter()以及forEach()都用于此目的。為了使程序員能夠一次一個(gè)地處理集合中的元素，ES2015引入了迭代器接口。

如果對(duì)象具有Symbol.iterator屬性，則該對(duì)象是可迭代的。在ES2015中，字符串和集合對(duì)象（如Set，Map和Array）帶有Symbol.iterator屬性，因此可以迭代。以下代碼給出了如何一次訪問可迭代元素的示例：

const arr = [10, 20, 30];
const iterator = arr[Symbol.iterator]();
  
console.log(iterator.next());    // → {value: 10, done: false}
console.log(iterator.next());    // → {value: 20, done: false}
console.log(iterator.next());    // → {value: 30, done: false}
console.log(iterator.next());    // → {value: undefined, done: true}

Symbol.iterator是一個(gè)眾所周知的符號(hào)，指定一個(gè)返回迭代器的函數(shù)。與迭代器交互的主要方法是next()方法。此方法返回具有兩個(gè)屬性的對(duì)象：value和done。value屬性為集合中下一個(gè)元素的值。done屬性的值為true或false表示集合是否迭代完成。

默認(rèn)情況下，普通對(duì)象不可迭代，但如果在其上定義Symbol.iterator屬性，則它可以變?yōu)榭傻?，如下例所示?/p>

const collection = {
  a: 10,
  b: 20,
  c: 30,
  [Symbol.iterator]() {
    const values = Object.keys(this);
    let i = 0;
    return {
      next: () => {
        return {
          value: this[values[i++]],
          done: i > values.length
        }
      }
    };
  }
};

const iterator = collection[Symbol.iterator]();
  
console.log(iterator.next());    // → {value: 10, done: false}
console.log(iterator.next());    // → {value: 20, done: false}
console.log(iterator.next());    // → {value: 30, done: false}
console.log(iterator.next());    // → {value: undefined, done: true}

此對(duì)象是可迭代的，因?yàn)樗x了一個(gè)Symbol.iterator屬性。迭代器使用該Object.keys()方法獲取對(duì)象屬性名稱的數(shù)組，然后將其分配給values常量。它還定義了一個(gè)計(jì)數(shù)器變量i，并給它一個(gè)初始值0.當(dāng)執(zhí)行迭代器時(shí)，它返回一個(gè)包含next()方法的對(duì)象。每次調(diào)用next()方法時(shí)，它都返回一對(duì){value, done}，value保持集合中的下一個(gè)元素并done保持一個(gè)布爾值，指示迭代器是否已達(dá)到集合的需要。

雖然這段代碼完美無缺，但卻不必要。使用生成器函數(shù)可以大大簡(jiǎn)化過程：

const collection = {
  a: 10,
  b: 20,
  c: 30,
  [Symbol.iterator]: function * () {
    for (let key in this) {
      yield this[key];
    }
  }
};

const iterator = collection[Symbol.iterator]();
  
console.log(iterator.next());    // → {value: 10, done: false}
console.log(iterator.next());    // → {value: 20, done: false}
console.log(iterator.next());    // → {value: 30, done: false}
console.log(iterator.next());    // → {value: undefined, done: true}

在這個(gè)生成器中，for...in循環(huán)用于枚舉集合并產(chǎn)生每個(gè)屬性的值。結(jié)果與前一個(gè)示例完全相同，但它大大縮短了。

迭代器的缺點(diǎn)是它們不適合表示異步數(shù)據(jù)源。ES2018的補(bǔ)救解決方案是異步迭代器和異步迭代。異步迭代器與傳統(tǒng)迭代器的不同之處在于，它不是以形式返回普通對(duì)象{value, done}，而是返回履行的承諾{value, done}。異步迭代定義了一個(gè)返回異步迭代器的Symbol.asyncIterator方法（而不是Symbol.iterator）。

一個(gè)例子讓這個(gè)更清楚：

const collection = {
  a: 10,
  b: 20,
  c: 30,
  [Symbol.asyncIterator]() {
    const values = Object.keys(this);
    let i = 0;
    return {
      next: () => {
        return Promise.resolve({
          value: this[values[i++]], 
          done: i > values.length
        });
      }
    };
  }
};

const iterator = collection[Symbol.asyncIterator]();
  
console.log(iterator.next().then(result => {
  console.log(result);    // → {value: 10, done: false}
}));

console.log(iterator.next().then(result => {
  console.log(result);    // → {value: 20, done: false} 
}));

console.log(iterator.next().then(result => {
  console.log(result);    // → {value: 30, done: false} 
}));

console.log(iterator.next().then(result => {
  console.log(result);    // → {value: undefined, done: true} 
}));

請(qǐng)注意，不可使用promises的迭代器來實(shí)現(xiàn)相同的結(jié)果。雖然普通的同步迭代器可以異步確定值，但它仍然需要同步確定done的狀態(tài)。

同樣，您可以使用生成器函數(shù)簡(jiǎn)化過程，如下所示：

const collection = {
  a: 10,
  b: 20,
  c: 30,
  [Symbol.asyncIterator]: async function * () {
    for (let key in this) {
      yield this[key];
    }
  }
};

const iterator = collection[Symbol.asyncIterator]();
  
console.log(iterator.next().then(result => {
  console.log(result);    // → {value: 10, done: false}
}));

console.log(iterator.next().then(result => {
  console.log(result);    // → {value: 20, done: false} 
}));

console.log(iterator.next().then(result => {
  console.log(result);    // → {value: 30, done: false} 
}));

console.log(iterator.next().then(result => {
  console.log(result);    // → {value: undefined, done: true} 
}));

通常，生成器函數(shù)返回帶有next()方法的生成器對(duì)象。當(dāng)調(diào)用next()時(shí)，它返回一個(gè){value，done}，其value屬性保存了yield值。異步生成器執(zhí)行相同的操作，除了它返回一個(gè)履行{value，done}的promise。

迭代可迭代對(duì)象的一種簡(jiǎn)單方法是使用for...of語句，但是for...of不能與async iterables一起使用，因?yàn)?b>value和done不是同步確定的。因此，ES2018提供了for...await...of。我們來看一個(gè)例子：

const collection = {
  a: 10,
  b: 20,
  c: 30,
  [Symbol.asyncIterator]: async function * () {
    for (let key in this) {
      yield this[key];
    }
  }
};

(async function () {
  for await (const x of collection) {
    console.log(x);
  }
})();

// logs:
// → 10
// → 20
// → 30

在此代碼中，for...await...of語句隱式調(diào)用Symbol.asyncIterator集合對(duì)象上的方法以獲取異步迭代器。每次循環(huán)時(shí)，都會(huì)調(diào)用迭代器的next()方法，它返回一個(gè)promise。一旦解析了promise，就會(huì)將結(jié)果對(duì)象的value屬性讀取到x變量中。循環(huán)繼續(xù)，直到返回的對(duì)象的done屬性值為true。

請(qǐng)記住，該for...await...of語句僅在異步生成器和異步函數(shù)中有效。違反此規(guī)則會(huì)導(dǎo)致一個(gè)SyntaxError報(bào)錯(cuò)。

next()方法可能會(huì)返回拒絕的promise。要優(yōu)雅地處理被拒絕的promise，您可以將for...await...of語句包裝在語句中try...catch，如下所示：

const collection = {
  [Symbol.asyncIterator]() {
    return {
      next: () => {
        return Promise.reject(new Error("Something went wrong."))
      }
    };
  }
};

(async function() {
  try {
    for await (const value of collection) {}
  } catch (error) {
    console.log("Caught: " + error.message);
  }
})();

// logs:
// → Caught: Something went wrong.

8.0.0（運(yùn)行時(shí)需要加-harmony）

8.3.0（完全支持）

ES2018的另一個(gè)令人興奮的補(bǔ)充是finally()方法。一些JavaScript庫之前已經(jīng)實(shí)現(xiàn)了類似的方法，這在許多情況下證明是有用的。這鼓勵(lì)了Ecma技術(shù)委員會(huì)正式添加finally()到規(guī)范中。使用這個(gè)方法，程序員將能不管promise的結(jié)果如何，都能執(zhí)行一個(gè)代碼塊。我們來看一個(gè)簡(jiǎn)單的例子：

fetch("https://www.google.com")
  .then((response) => {
    console.log(response.status);
  })
  .catch((error) => { 
    console.log(error);
  })
  .finally(() => { 
    document.querySelector("#spinner").style.display = "none";
  });

finally()無論操作是否成功，當(dāng)您需要在操作完成后進(jìn)行一些清理時(shí)，該方法會(huì)派上用場(chǎng)。在此代碼中，該finally()方法只是在獲取和處理數(shù)據(jù)后隱藏加載微調(diào)器。代碼不是在then()和catch()方法中復(fù)制最終邏輯，而是在promise被fulfilled或rejected后注冊(cè)要執(zhí)行的函數(shù)。

你可以使用promise.then(func，func)而不是promise.finally(func)來實(shí)現(xiàn)相同的結(jié)果，但你必須在fulfillment處理程序和rejection處理程序中重復(fù)相同的代碼，或者為它聲明一個(gè)變量：

fetch("https://www.google.com")
  .then((response) => {
    console.log(response.status);
  })
  .catch((error) => { 
    console.log(error);
  })
  .then(final, final);

function final() {
  document.querySelector("#spinner").style.display = "none";
}

和then()和catch()一樣，finally()方法總是返回一個(gè)promise，因此可以鏈接更多的方法。通常，您希望使用finally()作為最后一個(gè)鏈，但在某些情況下，例如在發(fā)出HTTP請(qǐng)求時(shí)，最好鏈接另一個(gè)catch()以處理finally()中可能發(fā)生的錯(cuò)誤。

10.0.0（完全支持）

ES2018為該RegExp對(duì)象增加了四個(gè)新功能，進(jìn)一步提高了JavaScript的字符串處理能力。這些功能如下：

S（DOTALL）標(biāo)志

Named Capture Groups(命名捕獲組)

Lookbehind Assertions(后向斷言)

Unicode Property Escapes(Unicode屬性轉(zhuǎn)義)

點(diǎn)（.）是正則表達(dá)式模式中的特殊字符，它匹配除換行符之外的任何字符，例如換行符（ ）或回車符（ ）。匹配所有字符（包括換行符）的解決方法是使用具有兩個(gè)相反短字的字符類，例如[dD]。此字符類告訴正則表達(dá)式引擎找到一個(gè)數(shù)字（d）或非數(shù)字（D）的字符。因此，它匹配任何字符：

console.log(/one[dD]two/.test("one
two"));    // → true

ES2018引入了一種模式，其中點(diǎn)可用于實(shí)現(xiàn)相同的結(jié)果?？梢允褂胹標(biāo)志在每個(gè)正則表達(dá)式的基礎(chǔ)上激活此模式：

console.log(/one.two/.test("one
two"));     // → false
console.log(/one.two/s.test("one
two"));    // → true

使用標(biāo)志來選擇新行為的好處是向后兼容性。因此，使用點(diǎn)字符的現(xiàn)有正則表達(dá)式模式不受影響。

在一些正則表達(dá)式模式中，使用數(shù)字來引用捕獲組可能會(huì)令人困惑。例如，使用/(d{4})-(d{2})-(d{2})/與日期匹配的正則表達(dá)式。由于美式英語中的日期符號(hào)與英式英語不同，因此很難知道哪個(gè)組指的是哪一天，哪個(gè)組指的是月份：

const re = /(d{4})-(d{2})-(d{2})/;
const match= re.exec("2019-01-10");

console.log(match[0]);    // → 2019-01-10
console.log(match[1]);    // → 2019
console.log(match[2]);    // → 01
console.log(match[3]);    // → 10

ES2018引入了使用(?...)語法的命名捕獲組。因此，匹配日期的模式可以用不那么模糊的方式編寫：

const re = /(?d{4})-(?d{2})-(?d{2})/;
const match = re.exec("2019-01-10");

console.log(match.groups);          // → {year: "2019", month: "01", day: "10"}
console.log(match.groups.year);     // → 2019
console.log(match.groups.month);    // → 01
console.log(match.groups.day);      // → 10

您可以使用k語法在模式中稍后調(diào)用命名的捕獲組。例如，要在句子中查找連續(xù)的重復(fù)單詞，您可以使用/(?w+)s+k/：

const re = /(?w+)s+k/;
const match = re.exec("Get that that cat off the table!");        

console.log(match.index);    // → 4
console.log(match[0]);       // → that that

要將命名的捕獲組插入到方法的替換字符串中replace()，您需要使用$構(gòu)造。例如：

const str = "red & blue";

console.log(str.replace(/(red) & (blue)/, "$2 & $1"));    
// → blue & red

console.log(str.replace(/(?red) & (?blue)/, "$ & $"));    
// → blue & red

ES2018為JavaScript帶來了后向性斷言，這些斷言已經(jīng)在其他正則表達(dá)式實(shí)現(xiàn)中可用多年。以前，JavaScript只支持超前斷言。后向斷言用表示(?<=...)，并使您能夠匹配基于模式之前的子字符串的模式。例如，如果要在不捕獲貨幣符號(hào)的情況下以美元，英鎊或歐元匹配產(chǎn)品的價(jià)格，則可以使用/(?<=$|￡|€)d+(.d*)?/：

const re = /(?<=$|￡|€)d+(.d*)?/;

console.log(re.exec("199"));     
// → null

console.log(re.exec("$199"));    
// → ["199", undefined, index: 1, input: "$199", groups: undefined]

console.log(re.exec("€50"));     
// → ["50", undefined, index: 1, input: "€50", groups: undefined]

還有一個(gè)lookbehind的否定版本，用(?，只有當(dāng)模式前面沒有l(wèi)ookbehind中的模式時(shí)，負(fù)lookbehind才允許您匹配模式。例如，模式/(?匹配沒有“un”前綴的可用詞

const str = "?";

console.log(/d/u.test(str));    // → false
console.log(/p{Number}/u.test(str));     // → true

const str = "?";

console.log(/p{Alphabetic}/u.test(str));     // → true

// the w shorthand cannot match ?
  console.log(/w/u.test(str));    // → false

console.log(/P{Number}/u.test("?"));    // → false
console.log(/P{Number}/u.test("?"));    // → true

console.log(/P{Alphabetic}/u.test("?"));    // → true
console.log(/P{Alphabetic}/u.test("?"));    // → false

function fn(string, substitute) {
  if(substitute === "ES6") {
    substitute = "ES2015"
  }
  return substitute + string[1];
}

const version = "ES6";
const result = fn`${version} was a major update`;

console.log(result);    // → ES2015 was a major update

function fn(string, substitute) {
  console.log(substitute);    // → escape sequences:
  console.log(string[1]);     // → undefined
}

const str = "escape sequences:";
const result = fn`${str} ubuntu C:xxxuuu`;

const result = `ubuntu`;
// → SyntaxError: Invalid Unicode escape sequence