ES2019 中的 JavaScript 新特性

JavaScript 从成立之初就已经走了很长一段路，提供了许多新的功能，这些功能是专门设计来使该语言更加人性化和提升效率。以下是我最近发现的一些有趣的JavaScript 新增内容。其中一些功能已在 Node，Chrome，Firefox 和 Safari 中可用，而其他功能仍处于建议阶段。

Optional chaining （可选链）

Optional chaining 可选链使用 ?. 操作符来表示，Optional Chaining 使我们能检查一个对象上面是否存在某属性。其它一些语言有类似的特性。例如 C# 有 Null Conditional 操作符。而 JavaScript 的 Optional chaining 在需要深度访问嵌套对象属性时就特别有用。

当我们在访问对象的属性前，我们需要用 ?. 操作符来确定该属性是否存在。

首先看看下面代码：

const users = [
  {
   name: "Olagunju Gbolahan",
   occupation: "Software Developer",
   sayName(){
    console.log(`my name is ${this.name}`);
   },
   address: { office: "New York" }
  },
  { name: "Olawaseyi Moses" },
  { name: "Tunde Ednut" }
];

在该数组对象中，第二个对象是 secondUser：

const secondUser = users[1];

我们需要知道该用户的办公室地址，在没有 Optional chaining 之前，我们需要使用一种很低效的方式来验证该属性是否已存在：

const theAddress = secondUser.address && secondUser.address.office;
console.log(theAddress); // undefined

如果我们是一个深度嵌套的对象，那就必须通过 && 操作符来判断每一层的对象是否有效：

但是有了 optional chaining ，代码便可简化如下：

const theAddress = secondUser?.address?.office;
console.log(theAddress); // undefined

我们还可以使用 optional chaining 来确认对象的某个方法是否存在：

const firstUser = users[0];
console.log(firstUser.sayName?.()); // 我的名字是 Olagunju Gbolahan

如果方法名不存在的话，它会简单的返回 undefined ：

console.log(firstUser.sayOccupation?.()); // undefined

目前该特性尚未添加到 JavaScript 规范中，目前还处于草案建议阶段。

你可以通过 babel-plugin-proposal-optional-chaining 这个插件来实现相同功能。

你也可以阅读 《Optional Chaining 特性进入 Stage 3，TypeScript 跟进》 这篇文章来了解更多关于该特性的进展。

Optional catch binding （可选的错误捕获绑定）

当我们事先知道错误将是什么，并且我们不希望冗余未使用的变量时，此功能将派上用场。 

首先看看常规的 try 和 catch 的代码块：

try {
  const parsedJsonData = JSON.parse(obj);
} catch (error) {
  //obj 变量在使用时没有进行定义
  console.log(obj);
}

而通过错误捕获绑定，我们无需提供未使用的变量，特别是当我们已经为 try 块提供默认处理的情况下：

function getName () {
  let name = "Gbolahan Olagunju";
  try {
    name = obj.details.name
  } catch {}
  console.log(name);
}

管道操作符

这是对 JavaScript 的拟议补充之一，目前处于第1阶段。本质上，它有助于使对同一参数的多个函数调用可读。

它通过将表达式的值作为参数传递给函数来实现。

在没有管道运算符的情况下调用以下函数|>。

const capitalize = (input) =>  input[0].toUpperCase() + input.substring(1);
const removeSpaces = (input) => input.trim();
const repeat = (input) => `${input}, ${input}`;

const withoutpipe = repeat(capitalize(removeSpaces('    i am gbols    ')));
console.log(withoutpipe); // I am gbols, I am gbols

而通过管道操作符，可读性大幅提升：

const withpipe = '    i am gbols    '
                |> removeSpaces
                |> capitalize
                |> repeat;
console.log(withpipe); // // I am gbols, I am gbols

String.trimStart 和 String.trimEnd

这两个方法在之前被命名为 trimRight 和 trimLeft，但在 ES2019 中将名字修改为 trimStart 和 trimEnd ，表述更加直观：

示例代码：

let message = "     Welcome to LogRocket      ";
message.trimStart(); // "Welcome to LogRocket      "
message.trimEnd(); // "Welcome to LogRocket";

Object.fromEntries

在聊 Object.fromEntries 之前，有必要先看看 Object.entries.

Object.entries 是在 ES2017 规范中引入的，用于将对象转成数组，并可通过数组相关的函数进行访问。

示例代码:

const devs = {
  gbols: 5,
  andrew: 3,
  kelani: 10,
  dafe: 8,
};
const arrOfDevs = Object.entries(devs);
console.log(arrOfDevs);
//[
//  ["gbols", 5]
//  ["andrew", 3]
//  ["kelani", 10]
//  ["dafe", 8]
//]

然后我们可以使用 filter 方法来获取数组中超过 5 年经验的对象：

const expDevs = arrOfDevs.filter(([name, yrsOfExp]) => yrsOfExp > 5);
console.log(expDevs);
//[
//  ["kelani", 10]
//  ["dafe", 8]
//]

那么就会有一个新的问题：没有一个简单的方法将最新的数组重新变成对象。通常我们需要自己编写代码将数组变成对象：

const expDevsObj = {};
for (let [name, yrsOfExp] of expDevs) {
expDevsObj[name] = yrsOfExp;
}
console.log(expDevsObj);
//{
 //dafe: 8
 //kelani: 10
//}

但是现在通过 Object.fromEntries 就可以把这个过程极大简化：

console.log(Object.fromEntries(expDevs));
//{
 //dafe: 8
 //kelani: 10
//}

Flat

很多使用我们需要处理深度嵌套的数组，这个时候将数组展平就特别重要。

先看看如下代码:

const developers = [
  {
    name: 'Gbolahan Olagunju',
    yrsOfExp: 6,
    stacks: ['Javascript', 'NodeJs', ['ReactJs', ['ExpressJs', 'PostgresSql']]]
  },
  {
    name: 'Daniel Show',
    yrsOfExp: 2,
    stacks: ['Ruby', 'Jest', ['Rails', ['JQuery', 'MySql']]]
  },
  {
    name: 'Edafe Emunotor',
    yrsOfExp: 9,
    stacks: ['PHP', 'Lumen', ['Angular', 'NgRx']]
  }
];

const allStacks = developers.map(({stacks}) => stacks);
console.log(allStacks);
// [
// ['Javascript', 'NodeJs', ['ReactJs', ['ExpressJs', 'PostgresSql']]]
// ['Ruby', 'Jest', ['Rails', ['JQuery', 'MySql']]]
// ['PHP', 'Lumen', ['Angular', 'NgRx']]
// ]

allstacks 变量包含深度嵌套的数组，为了将该数组展平，我们可以使用 Array.prototype.flat 方法。

示例代码:

const flatSingle = allStacks.flat();
console.log(flatSingle);
//[
// "JavaScript",
//  "NodeJs",
// ['ReactJs', ['ExpressJs', 'PostgresSql']]]
// "Ruby",
// "Jest",
// ['Rails', ['JQuery', 'MySql']]]
// "PHP",
// "Lumen"
// ["Angular", "NgRx"]
//]

从上面代码可以推断出数组被展平了一层深，这是 array.prototype.flat 的默认参数。

我们可以向flat方法传递一个参数，以确定要展平的程度。

defaults 参数的值为1。为了完全展平数组，我们可以传递一个无穷大的参数。参数 infinity 使数组完全变平，与数组的深度无关。

示例代码:

const completelyFlat = allStacks.flat(Infinity);
console.log(completelyFlat);
//[
// "JavaScript",
// "NodeJs",
// "ReactJs",
// "ExpressJs",
// "PostgresSql",
// "Ruby",
// "Jest",
// "Rails",
// "JQuery",
// "MySql",
// "PHP",
// "Lumen",
// "Angular",
// "NgRx"
//]

FlatMap

FlatMap 相当于将 map 方法和 flat 方法合并起来，并默认使用深度为 1 的新方法。相当于是以更简洁的代码实现两种逻辑的组合。

下面是一个简单使用 map 和 flatMap 的代码：

let arr = ['my name is Gbols', ' ', 'and i am great developer']; 
console.log(arr.map(word => word.split(' ')));
//[
// ["my", "name", "is", "Gbols"],
// ["", ""],
// ["and", "i", "am", "great", "developer"]
//]

console.log(arr.flatMap(word => word.split(' ')));
//[ "my"
//  "name"
//  "is"
//  "Gbols"
//   ""
//   ""
//   "and"
//   "i"
//   "am"
//   "great"
//   "developer"
//]