【译】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'
复制代码