【譯】ES2019一些主要的新特性

es2019的一些主要的新特性，主要譯自 css-tricks.com/all-the-new…

戳我查看瀏覽器和babel支持版本

Object.fromEntries

做用：將嵌套數組/Map轉換爲對象

參數：可迭代對象，好比Array，Map，Set

在ES2017中提出了Object.entries，它能夠將Object轉換爲相應的鍵值對數組，e.g.

let students = {amelia: 20, beatrice: 22, cece: 20, deirdre: 19, eloise: 21}

Object.entries(students) 
// [
// [ 'amelia', 20 ],
// [ 'beatrice', 22 ],
// [ 'cece', 20 ],
// [ 'deirdre', 19 ],
// [ 'eloise', 21 ]
// ]
複製代碼

由此，對象可使用一系列內置的數組方法，好比map, filter, reduce等。但這帶來的問題是，經處理後的鍵值對數組須要額外的人工操做纔可再轉化爲對象。好比對於students對象，

let overTwentyOne = Object.entries(students).filter(([name, age]) => {
  return age >= 21
}) // [ [ 'beatrice', 22 ], [ 'eloise', 21 ] ]

// extra object
let DrinkingAgeStudents = {}
for (let [name, age] of overTwentyOne) {
    DrinkingAgeStudents[name] = age;
}
// { beatrice: 22, eloise: 21 }
複製代碼

Object.fromEntries的做用就是簡化這一步驟。它能夠直接將鍵值對數組轉化爲相應的對象，

let DrinkingAgeStudents = Object.fromEntries(overTwentyOne); 
// { beatrice: 22, eloise: 21 }
複製代碼

注：1）因爲對象和數組仍然是不一樣的數據結構，在使用Object.fromEntries轉化鍵值對數組爲對象時，會自動合併key相同的項，value值以最後的value決定；

let students = [
  [ 'amelia', 22 ], 
  [ 'beatrice', 22 ], 
  [ 'eloise', 21], 
  [ 'beatrice', 20 ]
]

let studentObj = Object.fromEntries(students); 
// { amelia: 22, beatrice: 20, eloise: 21 }
複製代碼

2）Object.fromEntries的參數必須爲一個鍵值對的列表參數，好比嵌套的數組或Map對象等

const map = new Map([ ['foo', 'bar'], ['baz', 42] ]);
Object.fromEntries(map);
// { foo: "bar", baz: 42 }
複製代碼

Array.prototype.flat

做用：將多維數組扁平化

參數：扁平化的深度，默認值爲1

多維數組是咱們在開發過程當中常遇到的數據結構，Array.prototype.flat爲多維數組的扁平化提供了一個方便的接口。它接收一個表示扁平化深度的參數，

let courseStudents = [
  [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace' ] ],
  [ 'Wilson', 'Taylor' ],
  [ 'Edith', 'Jacob', 'Peter', 'Betty' ]
]

let flattenOneLevel = courseStudents.flat(1)
console.log(flattenOneLevel)
// [
// 'Janet',
// 'Martha',
// 'Bob',
// [ 'Phil', 'Candace' ],
// 'Wilson',
// 'Taylor',
// 'Edith',
// 'Jacob',
// 'Peter',
// 'Betty'
// ]

let flattenTwoLevels = courseStudents.flat(2)
console.log(flattenTwoLevels)
// [
// 'Janet', 'Martha',
// 'Bob', 'Phil',
// 'Candace', 'Wilson',
// 'Taylor', 'Edith',
// 'Jacob', 'Peter',
// 'Betty'
// ]
複製代碼

不指定參數時默認參數爲1。對於不知道嵌套深度的多維數組，若想將其徹底扁平化，可傳入參數Infinity。

let courseStudents = [
  [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace' ] ],
  [ 'Wilson', 'Taylor' ],
  [ 'Edith', 'Jacob', 'Peter', 'Betty' ]
]

let alwaysFlattened = courseStudents.flat(Infinity)
console.log(alwaysFlattened)
// [
// 'Janet', 'Martha',
// 'Bob', 'Phil',
// 'Candace', 'Wilson',
// 'Taylor', 'Edith',
// 'Jacob', 'Peter',
// 'Betty'
// ]
複製代碼

Array.prototype.flatMap

做用：將flat與map結合，遍歷數組後再將其扁平化

參數：function

Array.prototype.flat只能夠將數組扁平化，但是當咱們想要在數組中插入數據時，還須要遍歷數組，

let grades = [78, 62, 80, 64]

let flatMapped = grades.map(grade => [grade, grade + 7]).flat()
// [
// 78, 85, 62, 69,
// 80, 87, 64, 71
// ]
複製代碼

Array.prototype.flatMap能夠對以上的鏈式操做再作簡化，

let grades = [78, 62, 80, 64]

let flatMapped = grades.flatMap(grade => [grade, grade + 7]);
// [
// 78, 85, 62, 69,
// 80, 87, 64, 71
// ]
複製代碼

注：Array.prototype.flatMap的扁平化深度只能爲1，由於它至關因而無參數的flat方法與map方法的結合

String.trimStart and String.trimEnd

做用：去除字符串頭尾空格

和String.trimRight、String.trimLeft做用相似，String.trimStart 和 String.trimEnd 也是用來去除字符串先後空格的方法，不過它們是更清楚的語義化表達。

let message = " Welcome to CS 101 "
message.trimEnd()
// ' Welcome to CS 101'
message.trimStart()
// 'Welcome to CS 101 '
message.trimEnd().trimStart()
// 'Welcome to CS 101'
複製代碼

Optional catch binding

做用：try...catch中catch參數可選

在此以前，try...catch塊中始終須要將一個參數傳遞給catch塊，儘管有時候此參數並不會被用到

try {
  let parsed = JSON.parse(obj)
} catch(e) {
  // ignore e, or use
  console.log(obj)
}
複製代碼

在es2019中，新提出的特性使得傳遞給catch塊的參數成爲一個可選項，當不須要用到錯誤參數或者已經知道錯誤是什麼時，能夠選擇不傳遞

try {
  let parsed = JSON.parse(obj)
} catch {
  console.log(obj)
}
複製代碼

Function.toString() changes

做用：Function.toString()方法會返回表示當前函數源代碼的精確字符串，包括空格和註釋等

function greeting() {
  const name = 'CSS Tricks'
  console.log(`hello from ${name}`)
}

greeting.toString()
// 'function greeting() {\n' +
// " const name = 'CSS Tricks'\n" +
// ' console.log(`hello from ${name}`)\n' +
// '}'
複製代碼

Symbol-description

做用：直接獲取Symbol對象的描述字符串

js中Symbol()是一個能夠返回獨一無二symbol值的函數，其參數爲描述此值的字符串

const symbol1 = Symbol('foo');
複製代碼

在此以前若要獲取此描述字符串需將其轉換爲string再取值，而es2019中提出的Symbol.prototype.description爲讀此描述字符串提供了方便的接口

cosnt symbol1 = Symbol('foo');

symbol1.description; // 'foo'
複製代碼