ES2019 JavaScript 的新特性值得每个开发人员兴奋

2025-05-24

ES2019 JavaScript 的新特性值得每个开发人员兴奋

由Gbolahan Olagunju撰写✏️

JavaScript 自诞生以来已经取得了长足的进步，许多新增功能和特性旨在提高该语言的用户友好度和简洁性。以下是一些我认为非常有趣的 JavaScript 新增功能。

其中一些功能已经在 Node、Chrome、Firefox 和 Safari 中提供，而其他功能仍处于提案阶段。

LogRocket 免费试用横幅

可选链式调用

可选链式调用使用运算符完成?.。它主要确保问号前面的值既不是 undefined 也不是 null。这在评估深层嵌套对象的属性时非常有用。

?.在评估属性之前，需要确保操作员存在。

请考虑以下示例：

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" }
];
Enter fullscreen mode Exit fullscreen mode

让我们考虑用户数组中的第二个用户：

const secondUser = users[1];
Enter fullscreen mode Exit fullscreen mode

我们可能想获取此用户的办公室地址。在可选链式运算符出现之前，我们必须经过一个相对低效的过程来获取这些信息：

const theAddress = secondUser.address && secondUser.address.office;
console.log(theAddress); // undefined
Enter fullscreen mode Exit fullscreen mode

如果我们有一个深度嵌套的对象，我们必须&&在每个级别上使用运算符检查它的值是否存在。

但是使用可选链，我们只需执行以下操作：

const theAddress = secondUser?.address?.office;
console.log(theAddress); // undefined
Enter fullscreen mode Exit fullscreen mode

我们还可以使用可选链和对象方法来确认它们在执行之前存在：

const firstUser = users[0];
console.log(firstUser.sayName?.()); // my name is Olagunju Gbolahan
Enter fullscreen mode Exit fullscreen mode

undefined如果对象上不存在具有给定名称的方法，它将直接返回。

console.log(firstUser.sayOccupation?.()); // undefined
Enter fullscreen mode Exit fullscreen mode

由于可选链运算符尚未添加到 JavaScript 规范中，因此它仍处于提案阶段。

您现在就可以将它与babel-plugin-proposal-optional-chaining插件一起使用。

可选的 catch 绑定

当我们预先知道错误是什么，并且不希望出现未使用的变量的冗余时，此功能就非常有用。

考虑传统的 try 和 catch 块：

try {
  const parsedJsonData = JSON.parse(obj);
} catch (error) {
  //the variable error has to be declared weather used or unused
  console.log(obj);
}
Enter fullscreen mode Exit fullscreen mode

但是通过添加可选的 catch 绑定，我们不必提供未使用的变量 - 特别是当我们的 try 块有默认值时。

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

管道运营商

这是对 Javascript 提出的新增功能之一，目前处于第 1 阶段。

它本质上有助于使对同一参数的多个函数调用变得可读。

它通过将表达式的值作为参数传递给函数来实现这一点。考虑在不使用管道运算符的情况下调用以下函数|>。

const capitalize = (input) =>  input[0].toUpperCase() + input.substring(1);
const removeSpaces = (input) => input.trim();
const repeat = (input) => `${input}, ${input}`;
Enter fullscreen mode Exit fullscreen mode 
const withoutpipe = repeat(capitalize(removeSpaces('    i am gbols    ')));
console.log(withoutpipe); // I am gbols, I am gbols
Enter fullscreen mode Exit fullscreen mode

但使用管道运算符，可读性可以大大提高：

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

String.trimStart 和 String.trimEnd

它的正式名称是 trimRight 和 trimLeft，但在 ES2019 中，名称被更改为别名 trimStart 和 trimEnd，以使用户更直观。

请考虑以下示例：

let massage = "     Welcome to LogRocket      ";
message.trimStart(); // "Welcome to LogRocket      "
message.trimEnd(); // "Welcome to LogRocket";
Enter fullscreen mode Exit fullscreen mode

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]
//]
Enter fullscreen mode Exit fullscreen mode

现在，我们可以filter对数组使用该方法来获取具有 5 年以上经验的开发人员：

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

然后问题出现了：没有简单的方法将结果转换回对象。通常，我们会编写自己的代码将其转换回对象：

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

但是通过引入 Object.fromEntries，我们只需轻轻一划就可以完成此操作：

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

Flat 和 FlatMap

我们经常需要在 API 调用过程中处理深度嵌套的数组。在这种情况下，扁平化数组就显得尤为重要。

请考虑以下示例：

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']]
  }
];
Enter fullscreen mode Exit fullscreen mode 
const allStacks = developers.map(({stacks}) => stacks);
console.log(allStacks);
// [
// ['Javascript', 'NodeJs', ['ReactJs', ['ExpressJs', 'PostgresSql']]]
// ['Ruby', 'Jest', ['Rails', ['JQuery', 'MySql']]]
// ['PHP', 'Lumen', ['Angular', 'NgRx']]
// ]
Enter fullscreen mode Exit fullscreen mode

该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"]
//]
Enter fullscreen mode Exit fullscreen mode

我们可以从上面推断出数组已经被扁平化了一层，这是 array.prototype.flat 的默认参数。

我们可以将参数传递给 flat 方法来确定我们想要展平的程度。

defaults 参数的值为 1。为了完全展开数组，我们可以传递一个 Infinity 参数。该Infinity参数会完全展开数组，无论数组的深度是多少。

方法如下：

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

平面图

FlatMap 是调用 map 方法和深度为 1 的 flat 方法的组合。它通常非常有用，因为它以非常有效的方式执行相同的操作。

下面是一个同时使用 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"]
//]
Enter fullscreen mode Exit fullscreen mode 
console.log(arr.flatMap(word => word.split(' ')));
//[ "my"
//  "name"
//  "is"
//  "Gbols"
//   ""
//   ""
//   "and"
//   "i"
//   "am"
//   "great"
//   "developer"
//]
Enter fullscreen mode Exit fullscreen mode

结论

在本文中，我们列举了 JavaScript 新增功能的诸多优势。这些新增功能通过减少代码冗余度并提升可读性，提升了开发者的体验。

下面，查看一些我们未介绍的新功能：

JSON.stringify

排序稳定性

编者注：觉得这篇文章有什么问题？您可以在这里找到正确版本。

插件：LogRocket，一个用于 Web 应用的 DVR

 
LogRocket 仪表板免费试用横幅
 
LogRocket是一款前端日志工具，可让您重播问题，就像它们发生在您自己的浏览器中一样。无需猜测错误发生的原因，也无需要求用户提供屏幕截图和日志转储，LogRocket 让您重播会话，快速了解问题所在。它可与任何应用程序完美兼容，不受框架限制，并且提供插件来记录来自 Redux、Vuex 和 @ngrx/store 的额外上下文。
 
除了记录 Redux 操作和状态外，LogRocket 还记录控制台日志、JavaScript 错误、堆栈跟踪、带有标头 + 正文的网络请求/响应、浏览器元数据以及自定义日志。它还会对 DOM 进行插桩，以记录页面上的 HTML 和 CSS，即使是最复杂的单页应用程序，也能重现像素完美的视频。
 
免费试用。

每个开发人员都应该为之兴奋的 ES2019 JavaScript 新特性一文首先出现在LogRocket 博客上。

文章来源：https://dev.to/bnevilleoneill/new-es2019-javascript-features-every-developer-should-be-excited-about-1655
Devto 翻译
PREV
适合您的下一个 Node.js 项目的完美架构流程
NEXT
学习这些键盘快捷键，成为 VS Code 忍者