【译】ES2019的主要新特性

es2019的一些主要的新特性，主要译自 https://css-tricks.com/all-th...

戳我查看浏览器和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'

以上。