原文地址: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方法的组合。它通常非常有用,因为它以一种非常有效的方式做同样的事情。

下面是同时使用mapflatmap的简单示例:

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中文网其它相关文章!