Javascript在ES2019中又新增了8个功能！你还学的动么?

苦逼学习的ES6还没玩溜呢，现在又更新了8个功能，不得不感叹前端在这几年的快速发展。

不过好在，基础夯实之后，再学习新的内容，分分钟的事情。

废话不多说，直接来看这回又更新了些什么幺蛾子。

Catch BInding

主要调整了try catch的使用方法，现在当Catch Binding没有使用的时候，可以移除
之前是这样写的

try{

……

}catch(exception){

……

}

现在没有使用exception时，直接可以忽略不写

try{

……

}catch{

……

}

倒是也方便了一丢丢奥

JSON 超集

提出这个修改建议的动机是因为ES2019之前不支持转义\u2028与\u2029字符
在ES2019之前，转义这两个字符会报错SyntaxError: Invalid or unexpected token.

const LS = eval('"\u2028"');
const PS = eval("'\u2029'");

Symbol Description

Symbol 是在ES2015中非常独特的功能
在ES2019中，它现在可以直接使用description，其目标是避免间接的从Symbol.prototype.toString获得所提供的Description

const mySymbol = Symbol('myDescription');
 
console.log(mySymbol); // Symbol(myDescription)
 
console.log(mySymbol.toString()); // Symbol(myDescription)
 
console.log(mySymbol.description); // myDescription

Function.prototype.toString

在ES2019之前，JS原型就已经存在toString方法，这次主要是做了一些小的调整，toString现在输出的内容包含了注释内容

function /* 闹闹*/ foo /*吃鱼*/ (){}
 
// Before
console.log(foo.toString()); // function foo(){}
 
// Now ES2019
console.log(foo.toString()); // function /* 闹闹*/ foo /*吃鱼*/ (){}
 
 
// Arrow Syntax
const bar /* 闹闹*/ = /*吃鱼*/ () => {}
 
console.log(bar.toString()); // () => {}

**注意：**从上方的console输出可以看出，箭头函数的注释内容，是不会输出的，依然跟之前一样

Object.fromEntries

Object.fromEntries是Object.entries的反向方法，文档里是如下说明

Object.fromEntries() performs the reverse of [Object.entries()]

Object.entries是将一个键值对对象，转换为Array
Object.fromEntries是将Array或Map等对象，转换为键值对对象

咱们看看code，实际感受一下

const obj = {
    prop1: 1,
    prop2: 2,
};
 
const entries = Object.entries(obj);
 
console.log(entries); // [ [ 'prop1', 1 ], [ 'prop2', 2 ] ]  得到的是数组
 
const fromEntries = Object.fromEntries(entries);
 
console.log(fromEntries); // Object { prop1: 1, prop2: 2 } 得到的是对象
 
console.log(obj === fromEntries); // false

可能看到最后一行结果为false，可能会有疑问，为什么得到的对象并不等于最开始定义的obj？

注意了，任何嵌入式对象/数组都只是通过引用复制。

要证明也不难，请看下面的code

const obj = {
    prop1: 1,
    prop2: 2,
    deepCopy: {
        mutateMe: true
    }
};
//将对象转为数组
const entries = Object.entries(obj);
//将数组再转换为对象fromEntries
const fromEntries = Object.fromEntries(entries);
//修改fromEntries属性的值
fromEntries.deepCopy.mutateMe = false;
//obj属性的值发生了改变
console.log(obj.deepCopy.mutateMe); // false

这里牵扯到JavaScript的深浅拷贝，以后再细说，记住上面的结论就好

Well-formed JSON.stringify

这跟提出JSON超集的是同一个人，并且也与其特征有关。

ES2019不是将未配对的代理代码点作为单个UTF-16代码单元返回，而是用JSON转义序列表示它们。

// Before
console.log(JSON.stringify('\uD800')); // "�"
 
// Now ES2019
console.log(JSON.stringify('\uD800')); // "\ud800"

String.prototype trimStart and trimEnd

String原型中已经存在了trim方法，可以删除字符串开头和结尾之间的空格。

但是现在ES2019引入了trimStart和trimEnd，顾名思义，只删除开头或者结尾的空格

// trim
const name = "   Codedam ";
console.log(name.trim());   // "Codedam"
 
// trimStart
const description = "   Unlocks Secret Codes    ";
console.log(description.trimStart());   // "Unlocks Secret Codes    "
 
// trimEnd
const category = "  JavaScript    ";
console.log(category.trimEnd());    // "  JavaScript"

Array.prototype flat and flatMap

flat方法创建一个新数组，所有子数组元素以递归方式连接到指定的深度。

flat默认情况下，深度为1，使数组上第一层嵌套数组变平。

const arr = [1, 2, [3, 4, [5, 6]]];
arr.flat(); // [1, 2, 3, 4, [5, 6]]
arr.flat(2); // [1, 2, 3, 4, 5, 6]
 
//无论数组深度有多深，都可以使用Infinity平展所有嵌套数组

const arrExtreme = [1, [2, [3, [4, [5, 6, 7, [8, 9]]]]]];
arrExtreme.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

flatMap类似于flat并且与map相关，在map中它映射数组然后将其展平。

const arr = ['Codedam', 'is Awsome', '!'];

const mapResult = arr.map(item => item.split(' '));
console.log(mapResult); // [ [ 'Codedam' ], [ 'is', 'Awsome' ], [ '!' ] ]

const flatMapResult = arr.flatMap(chunk => chunk.split(' '));
console.log(flatMapResult); // ['Codedam', 'is',  'Awsome', '!'];