JavaScript 2019 新特性
JavaScript 作为最流行的编程语言，也是web开发的主要内容。每次迭代都会出现新颖、便捷的特性。下面介绍2019新特性。
Array.flat()
flat()将嵌套数组递归展平到指定的深度。默认参数值为1，如果要进行全深度，参数设成Infinity。此方法不修改原始数组，而是创建一个新数组。
const arr1 = [1, 2, [3, 4]];
arr1.flat(); // [1, 2, 3, 4]
const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat(); // [1, 2, 3, 4, [5, 6]]
const arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2); // [1, 2, 3, 4, 5, 6]
const arr4 = [1, 2, [3, 4, [5, 6, [7, 8]]]];
arr4.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8]
如果原数组有空位，flat()方法会跳过空位。
const arr5 = [1, 2, , 4, 5];
arr5.flat(); // [1, 2, 4, 5]
Array.flatMap()
flatMap()方法对原数组的每个成员执行一个函数（相当于执行map()），然后对返回值组成的数组执行flat()方法。该方法返回一个新数组，不改变原数组。
const arr1 = [1, 2, 3];
arr1.map(x => [x * 4]); // [[4], [8], [12]]
arr1.flatMap(x => [x * 4]); // [4, 8, 12]
flatMap()只能展开一层数组。
[1, 2, 3, 4].flatMap(x => [[x * 2]])
// [[2], [4], [6], [8]]
flatMap()方法的参数是一个遍历函数，该函数可以接受三个参数，分别是当前数组成员、当前数组成员的位置（从零开始）、原数组。
flatMap()方法还可以有第二个参数，用来绑定遍历函数里面的this。
String.trimStart() 和 String.trimEnd()
trim() 是删除字符串两边的空格，而 trimStart() 和 trimEnd() 删除字符串开头和末尾由空格键、tab 键、换行符和不可见的空白符号产生的空格。
const test = " hello ";
test.trim(); // "hello";
test.trimStart(); // "hello ";
test.trimEnd(); // " hello";
Object.fromEntries
Object.fromEntries()是Object.entries()的逆操作，用于将一个键值对数组转为对象。
1. Object.entries()
const obj = { bar: 'bar', foo: 'foo' };
const array = Object.entries(obj);
// [["prop1", 2], ["prop2", 10], ["prop3", 15]]
2. Object.fromEntries()
Object.fromEntries([
['foo', 'bar'],
['baz', 42]
])
// { foo: "bar", baz: 42 }
该方法的主要目的，是将键值对的数据结构还原为对象，因此特别适合将 Map 结构转为对象。
const entries = new Map([
['foo', 'bar'],
['baz', 42]
]);
Object.fromEntries(entries)
// { foo: "bar", baz: 42 }
catch 参数可选
新特性允许忽略catch() 参数，因为在很多情况下并不会用到。
try {
//...
} catch {
//handle error without parameter
}
Symbol.description
为了区分Symbol，通过给参数添加描述，读取描述时需要将Symbol转成字符串：
const symbol = Symbol('foo');
String(symbol) // "Symbol(foo)"
symbol.toString() // "Symbol(foo)"
ES2019 提供了一个实例属性description，直接返回 Symbol 的描述。
const symbol = Symbol('foo');
symbol.description // "foo"
Function.toString()
以前toString()方法会省略注释和空格。
function /* foo comment */ foo () {}
foo.toString()
// function foo() {}
ES2019 返回一模一样的原始代码。
function /* foo comment */ foo () {}
foo.toString(); // "function /* foo comment */ foo () {}"
JSON.parse() 改进
行分隔符 (\u2028) 和段落分隔符 (\u2029)，现在被正确解析，而不是报一个语法错误。
const str = '{"name":"Bottle\u2028AnGe"}'
JSON.parse(str)
/* {name: "Bottle
AnGe"}
/*
JavaScript optional chaining
嵌套属性
我们在开发中经常会得到缺少预期属性的对象，甚至整个对象都是null。因此，如果我们的某个对象没有所需的属性，并且我们尝试访问其属性的属性，则会报错：
const user = {
address: {
// city: {
// name: "London",
// code: 20
// }
}
};
const cityCode = user.address.city.code;
// Uncaught TypeError: Cannot read property code of undefined
解决方式：
- 检查对象中某个属性是否存在：
const cityCode1 = user.address && user.address.city && user.address.city.code;
const cityCode2 = (((user || {}).address || {}).city || {}).code;
try {
const cityCode3 = user.address.city.code;
} catch (e) {}
或者使用类似于lodash的三方工具库：
import _ from "lodash";
_.get(cityCode, "user.address.city.code");
- 新增特性 可选链式运算符
?
使用可选的链接运算符来检测左侧的属性是否有值，如果值为null 或 undefined，则短路并返回undefined。这样就可以安全放心的使用深层嵌套对象的属性，即便它们可能不存在，我们将 ?链接到我们想要访问的属性即可。
const user = {
address: {
city: {
name: "London"
//code: 20
}
},
firstName: "Jane",
lastName: "Doe",
getFullName() {
return `${this.firstName} ${this.lastName}`;
}
};
user?.address?.city?.code; // undefined
使用括号表示，获取动态添加的属性
let prop = "address";
user?.[prop]?.city?.name; // “London”
甚至可以调用可能不存在的函数：
user?.getFullName?.(); // "Jane Doe"
还可访问数组中的元素
const arr = ["Jane", "Mark", "Joan"];
arr?.[1] // 'Mark'
或者删除属性
delete user?.address?.city?.code;
- Babel插件
该功能长期以来一直是C＃，Groovy和Swift等许多语言的一部分，它最终在不久的将来会出现在JavaScript中。但是，如果您现在想要开始使用它，那么Babel的人们会为您提供他们的插件。只需确保使用Babel7并安装插件：
npm install --save-dev @babel/plugin-proposal-optional-chaining
然后将其添加到.babelrc配置中：
{
"plugins": ["@babel/plugin-proposal-optional-chaining"]
}
