后端开发教程 - Java、Spring Boot 实战 - msg200.com
2020 年即将推出的 JavaScript 新功能必将震撼您的世界！！
这又一篇关于 JavaScript 的炒作文章了吗？或许吧！或许读完之后，你会和我一样兴奋😁。2020 年，JavaScript 将迎来一些激动人心的新功能。其中大多数功能已经进入提案的最终阶段，计划于 2020 年发布。
其中一些功能已在最新版本的 Chrome 和 Firefox 浏览器中可用。因此您可以立即在浏览器中体验它们。如果没有，您也可以访问https://codesandbox.io，这是一个允许您在浏览器中编写代码的在线 IDE。
如果您想查看有关新 JavaScript 功能的所有提案，您可以在以下 github 链接中找到它们。⚡️
https://github.com/tc39/proposals
兴奋！！！让我们开始吧。
对象.fromEntries()
我们列表上的第一个是Object方法。在 JavaScript 中，将对象转换为数组，反之亦然，这非常常见。尤其是在使用 Firebase 或其他 No-SQL 服务等数据库时，我们经常需要进行此类转换。ES2017引入了一种方法，它可以从具有自身 key 属性的Object.entries()数组中返回一个数组。Object
我们来看一个例子。
const object1 = {
foo: "somestring",
bar: 100
};
for (let [key, value] of Object.entries(object1)) {
console.log(`${key}: ${value}`);
}
// Outputs-->
// foo: somestring
// bar: 100
Object.fromEntries与 相反Object.entries。给定一个数组，它将输出一个对象。以下是示例
const entries = new Map([
['foo', 'bar'],
['baz', 42]
]);
const obj = Object.fromEntries(entries);
console.log(obj);
// expected output: Object { foo: "bar", baz: 42 }
动态的import
这项新功能将允许 JavaScript 根据需要动态加载模块。目前，当我们在 JavaScript 中导入模块时，它们会被加载pre-runtime。这就是为什么我们将它们放在文件顶部的原因。这在大多数情况下都适用。但是，为了提高性能，如果我们可以在运行时动态加载某些模块，情况会怎样呢？这项新功能可以实现这一点。以下是动态模块导入的示例。
const main = document.querySelector("main");
for (const link of document.querySelectorAll("nav > a")) {
link.addEventListener("click", e => {
e.preventDefault();
import(`./section-modules/${link.dataset.entryModule}.js`)
.then(module => {
module.loadPageInto(main);
})
.catch(err => {
main.textContent = err.message;
});
});
}
动态导入将允许开发人员更好地控制模块在应用程序中的加载方式。
- 它使我们能够通过不加载代码来提高性能，直到它可能会用到
- 它允许在应用程序无法加载非关键模块时捕获错误场景
- 它可以确保相互依赖的模块不会陷入竞争状态
您可以在以下 GitHub 链接中阅读有关动态导入的更多信息
⚡️ https://github.com/tc39/proposal-dynamic-import
String.prototype.matchAll()
此方法返回一个迭代器对象，用于迭代字符串中的所有匹配项。让我们直接看一个例子
const re = /(Dr\. )\w+/g;
const str = 'Dr. Smith and Dr. Anderson';
const matches = str.matchAll(re);
for (const match of matches) {
console.log(match);
}
// outputs:
// => ["Dr. Smith", "Dr. ", index: 0, input: "Dr. Smith and Dr. Anderson", groups: undefined]
// => ["Dr. Anderson", "Dr. ", index: 14, input: "Dr. Smith and Dr. Anderson", groups: undefined]
这种方法使得处理字符串、子字符串和正则表达式的模式匹配变得非常容易。
Promise.allSettled
这可能是我目前为止最喜欢的一个了。它的功能正如其名，追踪已解决的 Promise。我们来通过一个例子来解释一下。
假设我们有一个 Promise 数组，可以用 来执行它们Promise.all。但是，为了知道它们的状态（哪些已解决，哪些失败了），我们需要迭代它们并返回包含状态的新值。
function reflect(promise) {
return promise.then(
(v) => {
return { status: 'fulfilled', value: v };
},
(error) => {
return { status: 'rejected', reason: error };
}
);
}
const promises = [ fetch('index.html'), fetch('https://does-not-exist/') ];
const results = await Promise.all(promises.map(reflect));
const successfulPromises = results.filter(p => p.status === 'fulfilled');
如您所见，我们传入了一个用于reflect返回状态的函数。新提出的 API 不需要此reflect函数。我们可以执行以下操作
const promises = [ fetch('index.html'), fetch('https://does-not-exist/') ];
const results = await Promise.allSettled(promises);
const successfulPromises = results.filter(p => p.status === 'fulfilled');
JavaScript 的可选链
如果你使用过 Angular 或 Typescript，你很可能对这个功能很熟悉。我们经常需要检查树中是否存在类似深层对象的中间节点。
var street = user.address && user.address.street;
可选链接运算符允许开发人员处理许多此类情况，而无需重复操作和/或在临时变量中分配中间结果：
var street = user.address?.street
var fooValue = myForm.querySelector('input[name=foo]')?.value
Example taken from offcial github proposal page.
可选链式调用可以在三个位置使用
obj?.prop // optional static property access
obj?.[expr] // optional dynamic property access
func?.(...args) // optional function or method call
对 JavaScript 来说，这的确是一个激动人心的时刻。2020 年还将发布一些值得关注的功能。希望这篇文章对您有所帮助，想阅读更多类似文章，请关注我BigInt并globalThis点赞🌞🌞🌞