1. 90前端首页
  2. 前端开发
  3. JavaScript

【译】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\'

以上。

本文来自网络整理,转载请注明原出处:https://segmentfault.com/a/1190000021619946

展开阅读全文

发表评论

登录后才能评论