👋🏼 🅱️ ✏️ 您应该了解的预期JavaScript新功能 🦍 🤙🏼 👰🏾

自ECMAScript 2015标准（也称为ES6）发布以来，JavaScript进行了认真的更改和改进。对于所有JS开发人员而言，这都是一个好消息。此外，现在每年都会发布新版本的ECMAScript。也许您对2019年6月发布的标准最新版本中出现的内容没有多少关注。这篇文章的作者（我们今天要翻译的译本）希望简述一下JavaScript的创新，以及下一版ECMAScript标准的预期。

提案处于批准第三阶段（第3阶段）的机会将在此处提及。这意味着它们可能会出现在ECMAScript标准的下一版本中，但这不能绝对确定。这是一个存储库，您可以在其中找到有关处于不同批准阶段的投标的信息。

功能ECMAScript 2019（ES10）

ES10标准具有许多新功能。在这里，我们将只考虑其中的一些。即，几个新的数组方法。

▍方法Array.prototype.flat

此方法使您可以使包含其他数组的数组更“平坦”，“压缩”到给定的深度级别。

const array = [1, 2, [3, 4]]; array.flat(); // [1, 2, 3, 4];

这是一个非常有用的功能，尤其是在需要使用嵌套数组的情况下。如果数据结构中数组的嵌套深度超过1，则对flat方法的单次调用无法使数组完全“平坦”。此方法接受可选的参数depth ，它允许您指定应减少已处理数组的维数的嵌套级别。

 //   const crazyArray = [1, 2, [3, 4], [[5], [6, [7,8]]]]; crazyArray.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8]; // ,  flat,

阵列越深，将需要更多的计算资源来处理它。请注意，IE和Edge不支持此功能。

▍Array.prototype.flatMap方法

此方法首先使用传递给它的函数处理数组的元素，然后将数组转换为平面结构。

 const arr = ["it's Sunny in", "", "California"]; arr.flatMap(x => x.split(" ")); // ["it's","Sunny","in", "", "California"]

flat和flatMap之间的区别在于，您可以将自己的函数传递给flatMap方法，该方法可以转换原始数组的元素。除此之外，与flat不同， flatMap仅将数组元素“提高”一级。此方法返回一个新数组。在某些情况下，在使某个数组为“扁平”之前，您需要以某种方式处理其元素时，这可能会很有用。

第3阶段批准中的新JS功能

在协调的第三阶段，有许多有趣的新建议用于扩展和改进语言。让我们考虑其中的一些。

▍数字位数分隔符

它发生在您身上：在变量中写一个长数字并怀疑其正确的拼写吗？有问题的句子使我们可以用下划线分隔数字的各个位。这样可以轻松处理数字。

 1_000_000_000      // ,   101_475_938.38     //     -     let fee = 123_00;    // $123 (, , 12300 ) let fee = 12_300;    // $12,300 (  !) let amount = 12345_00; // 12,345 (,  , 1234500 ) let amount = 123_45.00; // 12345 (, -  ) let amount = 1_234_500; // 1,234,500 let budget = 1_000_000_000_000; //   `budget`?  - 1 ! // // : console.log(budget === 10 ** 12); // true

每个开发人员在接受此功能后，将自行决定是否使用排放分离器。但是可以肯定的是：此功能可以减少与计算大数位相关的不便。

at使用顶级代码

在代码的顶层使用await关键字允许模块充当大型异步函数。由于此功能，ECMAScript模块可以期望出现一些资源。这导致以下事实：导入它们的其他模块将等待，直到导入模块的主体准备好工作为止。

此功能的原因是，当导入的模块具有使用async声明的函数时，该函数的输出将是undefined 。

以下示例显示了两个文件。如果在完成由promise表示的任务之前调用该函数，则可能在output undefined 。

 // awaiting.mjs import { process } from "./some-module.mjs"; const dynamic = import(computedModuleSpecifier); const data = fetch(url); export const output = process((await dynamic).default, await data); // usage.mjs import { output } from "./awaiting.mjs"; export function outputPlusValue(value) { return output + value } console.log(outputPlusValue(100)); setTimeout(() => console.log(outputPlusValue(100), 1000);

一切都将停止在awaiting.js直到在awaiting.js中解决了awaiting.js 。

▍操作员?? 并仅检查null和undefined上的值

也许，在所有第3阶段的报价中，这是最有用的。我们经常不得不这样写：

 const obj = {  name: 'James' }; const name = obj.name || 'Jane'; // James

如果obj.name由某个假值表示，则字符串Jane进入name 。结果，该name将不会类似于undefined 。但是问题在于，在这种情况下，空字符串将被视为错误值。如果考虑到这一点，则应按以下方式重写此代码：

 const name = (obj.name && obj.name !== '') || 'Jane';

经常这样写很不方便。运算子?? （两个问号）仅允许检查null和undefined值：

 const response = {  settings: {    nullValue: null,    height: 400,    animationDuration: 0,    headerText: '',    showSplashScreen: false  } }; const undefinedValue = response.settings.undefinedValue ?? 'some other default'; // : 'some other default' const nullValue = response.settings.nullValue ?? 'some other default'; // : 'some other default' const headerText = response.settings.headerText ?? 'Hello, world!'; // : '' const animationDuration = response.settings.animationDuration ?? 300; // : 0 const showSplashScreen = response.settings.showSplashScreen ?? true; // : false

▍操作员？和可选链

该建议与刚刚检查过的建议相结合，结合了null检查和undefined检查。已知TypeScript用户对此功能感兴趣。
考虑一个例子：

 const city = country && country.city; // undefined  city

为了获得country对象的city属性，您需要检查country对象的存在以及其中的city属性的存在。

通过使用运算符?. （问号和句点），此代码可以这样转换：

 const city = country?.city; // undefined  city

在以下情况下，此功能似乎很有用：

 import { fetch } from '../yourFetch.js'; (async () => {  const res = await fetch();  // res && res.data && res.data.cities || undefined  const cities = res?.data?.cities; })();

▍方法承诺

Promise.any方法接受一个包含promise对象的Promise.any对象，并在成功解析传递给它的至少一个promise对象后，返回一个成功解析的promise。如果所有的诺言对象都被拒绝，它将返回一个数组，其中包含有关拒绝它们的原因的信息。

这就是将Promise.any与async / await构造一起使用的样子：

 try {  const first = await Promise.any(promises);  //      . } catch (error) {  //    . }

这是使用诺言实现的同一件事：

 Promise.any(promises).then(  (first) => {    //      .  },  (error) => {    //    .  } );

JavaScript已经具有Promise.all ， .allSettled ， .race ，但是类似的方法。 any ，不是。结果，我们有了新的机会来补充现有机会，并且在某些情况下可能会有用。尽管该建议已经在批准的第三阶段，但由于需要进行额外的测试，因此它可能不会包含在下一版ECMAScript标准中。

总结

在批准的第三阶段，有许多有趣的关于JavaScript开发的建议。在ES11和ES12标准中看到它们将很有趣。当然，任何人都不太可能会全部使用它们，但是其中某些肯定会得到广泛的应用，并将为JS代码质量的提高做出贡献。

亲爱的读者们！ 您是否已经使用了几乎准备包含在该标准的下一版本中的任何JavaScript功能？

您应该了解的预期JavaScript新功能