ES2019中JavaScript的新功能

2019-10-31 | 转载 | 前端 | 1.8k 字 | 8 分钟

0 条评论

原文地址：https://mp.weixin.qq.com/s/_cmQAQlexXGQc-3Kuay5Sg

JavaScript从成立之初就已经走了很长一段路，提供了许多新的添加和功能，这些功能是专门设计来使该语言更加人性化和省时。以下是我最近发现的一些有趣的JavaScript新增内容。

xuehuayu.cn

其中一些功能已经在node、chrome、firefox和safari中可用，而其他功能仍处于建议阶段。

可选链接

可选的链接是使用?.运算符完成的。它主要确保问号之前的先前值既不不确定也不为空。这在评估深度嵌套对象的属性时非常有用。

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

考虑以下示例：

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" }];

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

const secondUser = users[1];

我们可能想要得到这个用户的办公地址。在可选的链接操作符出现之前，我们必须通过一个相对低效的过程来获得这些信息:

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

如果我们有一个深度嵌套的对象，我们必须在每一层使用&&操作符检查它的值是否存在。

但对于可选的链接，我们只需执行以下操作：

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

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

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

如果对象上不存在具有给定名称的方法，则只返回undefined。

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

由于可选的链接运算符尚未添加到javascript规范中，因此它仍处于建议阶段。

您今天可以将其与babel-plugin-proposal-optional-chaining插件一起使用。

可选的捕捉绑定

当我们事先知道我们的错误是什么，并且我们不想要未使用变量的冗余时，这个特性就派上用场了。

考虑一下传统的try and catch块:

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

但是，通过添加可选的catch绑定，我们不必提供未使用的变量——特别是当我们为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是很重要的。

在ES2017规范中添加了object.entries方法，以提供一种将对象转换为其等效数组的方法，从而允许它访问所有用于处理的数组方法。

考虑以下对象:

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]
//]

现在，我们可以使用数组上的筛选方法来获得拥有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

通常，由于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']]
  }
];

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方法传递一个参数来确定我们想要的flatten的程度。

默认参数的值为1。为了使数组完全平坦化，我们可以传递一个无穷大的参数。无穷大参数使数组完全平坦化，而不考虑数组的深度。

方法如下:

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方法和深度为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"]
//]

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

英文原文地址：https://blog.logrocket.com/new-es2019-javascript-features-every-developer-should-be-excited-about/

以上就是ES2019中JavaScript的新功能的详细内容，更多请关注html中文网其它相关文章！

本文作者：搬砖大老
本文链接：https://xuehuayu.cn/article/3760.html
版权声明：① 标为原创的文章为博主原创，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接。② 标为转载的文章来自网络，已标明出处，侵删。

转载