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

解决方式：

1. 检查对象中某个属性是否存在：

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");

2. 新增特性 可选链式运算符 ?

使用可选的链接运算符来检测左侧的属性是否有值，如果值为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; 

3. Babel插件

该功能长期以来一直是C＃，Groovy和Swift等许多语言的一部分，它最终在不久的将来会出现在JavaScript中。但是，如果您现在想要开始使用它，那么Babel的人们会为您提供他们的插件。只需确保使用Babel7并安装插件：

npm install --save-dev @babel/plugin-proposal-optional-chaining

然后将其添加到.babelrc配置中：

{
  "plugins": ["@babel/plugin-proposal-optional-chaining"]
}