首页 >> js开发 >> jsES2021 已定稿,真实场景案例分析js大全
jsES2021 已定稿,真实场景案例分析js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
近年来，JavaScript 的发展非常迅速。 尤其是在2021 年 ES6 发布之后，情况变得更好。现在 许多新的特性被提议包括在 ES2021版本中。好消息是这些已经已经敲定。 现在，我们获得了最终定稿的功能清单，它们将在被批准发布之后出现在备受期待的 ES2021 中。 其中一些功能使我非常兴奋，因为在它们存在之前编写代码时遇到将会遇到很多麻烦。 让我们看看它们是什么吧！可选链操作符（Optional Chaining Operator）可选链操作符（Optional Chaining Operator）可选链操作符（Optional Chaining Operator）对我个人来说，这是 ES2021最令人兴奋的特点之一。 我已经编写了很多程序，这些程序将会从这个新特性中获益匪浅。可选链操作符允许您安全地访问对象的深嵌套属性，而不必检查每个属性是否存在。 让我们看看这个特性对我们有什么帮助。拥有可选链操作符之前
const user = {
firstName: "Joseph",
lastName: "Kuruvilla",
age: 38,
address: {
number: "239",
street: "Ludwig Lane",
city: "Chennai",
zip: "600028",
prop1: {
prop2: {
prop3: {
prop4: {
value: "sample",
},
},
},
},
},
};
if (user && user.address) {
console.log(user.address.zip);
//600028
}
if (
user &&
user.address &&
user.address.prop1 &&
user.address.prop1.prop2 &&
user.address.prop1.prop2.prop3 &&
user.address.prop1.prop2.prop3.prop4
) {
console.log(user.address.prop1.prop2.prop3.prop4.value);
//sample
}
//Accessing unexisting property
console.log(user.address.prop102.po);
//Error
const user = {
firstName: "Joseph",
lastName: "Kuruvilla",
age: 38,
address: {
number: "239",
street: "Ludwig Lane",
city: "Chennai",
zip: "600028",
prop1: {
prop2: {
prop3: {
prop4: {
value: "sample",
},
},
},
},
},
};
if (user && user.address) {
console.log(user.address.zip);
//600028
}
if (
user &&
user.address &&
user.address.prop1 &&
user.address.prop1.prop2 &&
user.address.prop1.prop2.prop3 &&
user.address.prop1.prop2.prop3.prop4
) {
console.log(user.address.prop1.prop2.prop3.prop4.value);
//sample
}
//Accessing unexisting property
console.log(user.address.prop102.po);
//Error正如您在上面看到的，您必须检查每个级别中是否存在该属性，以避免出现无法读取未定义属性“ po”的错误。 随着嵌套级别的增加，手动检查的属性数量也会增加。 这意味着我们必须检查每个级别，以确保它不会在遇到未定义或空对象时崩溃。拥有可选链式操作符之后拥有可选链式操作符之后拥有可选链式操作符之后随着可选链式操作符 (Optional Chaining) 的引入，我们前端的工作变得容易多了。 通过简单地使用可选链式操作符?.我们可以访问深嵌套的对象，而不必检查未定义或空对象。?.让我们看看它是如何运作的。
const user = {
firstName: "Joseph",
lastName: "Kuruvilla",
age: 38,
address: {
number: "239",
street: "Ludwig Lane",
city: "Chennai",
zip: "600028",
prop1: {
prop2: {
prop3: {
prop4: {
value: "sample",
},
},
},
},
},
};
console.log(user?.address?.zip);
// 600028
console.log(user?.address?.prop1?.prop2?.prop3?.prop4?.value);
// sample
//Accessing unexisting property
console.log(user?.address?.prop102?.po);
//undefined
const user = {
firstName: "Joseph",
lastName: "Kuruvilla",
age: 38,
address: {
number: "239",
street: "Ludwig Lane",
city: "Chennai",
zip: "600028",
prop1: {
prop2: {
prop3: {
prop4: {
value: "sample",
},
},
},
},
},
};
console.log(user?.address?.zip);
// 600028
console.log(user?.address?.prop1?.prop2?.prop3?.prop4?.value);
// sample
//Accessing unexisting property
console.log(user?.address?.prop102?.po);
//undefined太神奇了！ ES2021 成功地通过引入一个单独的代码操作符?.来减少了如此多的代码行数！?.空值合并操作符（Nullish coalescing operator）空值合并操作符（Nullish coalescing operator）空值合并操作符（Nullish coalescing operator）这是另一个令我兴奋的功能，当我第一次在proposal stage， 了解到的时候，我由衷的喜欢这个特性，因为我已经历了编写单独的函数来手动检查这个特性的麻烦。proposal stage空值合并操作符允许您检查nullish值而不是
falsey值。 Nullish 值是指
null或undefined的值。 而 falsey 值是诸如空字符串、数字0、
undefined、
null、
false、
NaN等等的值。 这对你来说可能听起来没什么不同，但是在现实中，这意味着很多。nullishfalseynullundefinedundefinednullfalseNaN让我们看看这是怎么回事。在有空值合并操作符之前在有空值合并操作符之前在有空值合并操作符之前我最近做了一个项目，我需要允许黑暗模式（Dark Mode）切换功能。 我必须检查输入是true还是
false。 如果用户没有设置任何值，则默认为
true。 下面就是我如何在有空值合并操作符之前实现它的：truefalsetrue
const darkModePreference1 = true;
const darkModePreference2 = false;
const darkModePreference3 = undefined;
const darkModePreference4 = null;
const getUserDarkModePreference = (darkModePreference) => {
if (darkModePreference || darkModePreference === false) {
return darkModePreference;
}
return true;
};
getUserDarkModePreference(darkModePreference1);
// true
getUserDarkModePreference(darkModePreference2);
// false
getUserDarkModePreference(darkModePreference3);
// true
getUserDarkModePreference(darkModePreference4);
// true
const darkModePreference1 = true;
const darkModePreference2 = false;
const darkModePreference3 = undefined;
const darkModePreference4 = null;
const getUserDarkModePreference = (darkModePreference) => {
if (darkModePreference || darkModePreference === false) {
return darkModePreference;
}
return true;
};
getUserDarkModePreference(darkModePreference1);
// true
getUserDarkModePreference(darkModePreference2);
// false
getUserDarkModePreference(darkModePreference3);
// true
getUserDarkModePreference(darkModePreference4);
// true在有空值合并操作符之后在有空值合并操作符之后在有空值合并操作符之后在有空值合并操作符之后，您所要做的就是使用??操作符。不需要
if语句：??if
const darkModePreference1 = true;
const darkModePreference2 = false;
const darkModePreference3 = undefined;
const darkModePreference4 = null;
const getUserDarkModePreference = (darkModePreference) => {
return darkModePreference ?? true;
};
getUserDarkModePreference(darkModePreference1);
// true
getUserDarkModePreference(darkModePreference2);
// false
getUserDarkModePreference(darkModePreference3);
// true
getUserDarkModePreference(darkModePreference4);
// true
const darkModePreference1 = true;
const darkModePreference2 = false;
const darkModePreference3 = undefined;
const darkModePreference4 = null;
const getUserDarkModePreference = (darkModePreference) => {
return darkModePreference ?? true;
};
getUserDarkModePreference(darkModePreference1);
// true
getUserDarkModePreference(darkModePreference2);
// false
getUserDarkModePreference(darkModePreference3);
// true
getUserDarkModePreference(darkModePreference4);
// true这里基本上发生的情况是，如果变量 darkModePreference 包含一个nullish值，那么将值 true 赋给它。 简单，简短，易于理解。nullish动态 import（Dynamic Imports）动态 import（Dynamic Imports）动态 import（Dynamic Imports）这个特性将帮助您的应用程序更加高效的执行， 动态 import 允许您将 JS 文件作为原生应用用程序中的模块动态导入。 在 ES2021之前，不管是否使用模块，都应该导入模块。例如，假设我们需要添加一个功能来下载 pdf 格式的文件。让我们看看如何在 动态 import 之前和之后实现这一点。在 动态 import
之前在 动态 import
之前在 动态 import
之前实际上，不会所有的页面访问者使用下载 pdf 的选项。 但是，无论我们的访客是否使用它，它仍然需要被导入。 这意味着这个 pdf 模块也可以在页面加载期间被下载。
import { exportAsPdf } from "./export-as-pdf.js";
const exportPdfButton = document.querySelector(".exportPdfBtn");
exportPdfButton.addEventListener("click", exportAsPdf);
import { exportAsPdf } from "./export-as-pdf.js";
const exportPdfButton = document.querySelector(".exportPdfBtn");
exportPdfButton.addEventListener("click", exportAsPdf);这种开销可以通过使用延迟加载模块（lazy loaded modules）来减少。 可以通过称为代码分割 （code-splitting）的方法来实现，这在 Webpack 或其他模块打包工具已经可以使用了。但是对于 ES2021，我们可以直接使用它了，而不需要模块打包工具，如 Webpack。code-splitting在动态导入（动态 import）之后在动态导入（动态 import）之后在动态导入（动态 import）之后
const exportPdfButton = document.querySelector('.exportPdfBtn');
exportPdfButton.addEventListener('click', () => {
import('./export-as-pdf.js')
.then(module => {
module.exportAsPdf()
})
.catch(err => {
// handle the error if the module fails to load
})
})
const exportPdfButton = document.querySelector('.exportPdfBtn');
exportPdfButton.addEventListener('click', () => {
import('./export-as-pdf.js')
.then(module => {
module.exportAsPdf()
})
.catch(err => {
// handle the error if the module fails to load
})
})正如您在上面的代码中看到的，现在只有在需要模块时才延迟加载模块。 从而减少开销和页面加载时间。Promise.allSettled如果你有一个场景，在所有 Promise 都完成之后必须执行一个任务，那么你可能使用Promise.all()方法。 但是这个方法有一个缺点。 当你的任何一个 Promise 被 Rejected 时，Promise 方法就会抛出一个错误。 这意味着您的代码不会等到所有的 Promise 都完成。Promise.all()这可能不是你想要的。 如果你想要这样的东西: “我不在乎他们的结果。 只需全部运行” ，那么你可以使用新的Promise.allSettled()方法。 这种方法只有在你的所有 Promise 都
settledーー 要么
Resolved，要么
Rejectedーー 时才会
Resolved。Promise.allSettled()settledResolvedRejectedResolved在拥有 Promise.allSettled 之前在拥有 Promise.allSettled 之前在拥有 Promise.allSettled 之前
const PromiseArray = [
Promise.resolve(100),
Promise.reject(null),
Promise.resolve("Data release"),
Promise.reject(new Error("Something went wrong")),
];
Promise.all(PromiseArray)
.then((data) =>
console.log("all resolved! here are the resolve values:", data)
)
.catch((err) => console.log("got rejected! reason:", err));
//got rejected! reason: null
const PromiseArray = [
Promise.resolve(100),
Promise.reject(null),
Promise.resolve("Data release"),
Promise.reject(new Error("Something went wrong")),
];
Promise.all(PromiseArray)
.then((data) =>
console.log("all resolved! here are the resolve values:", data)
)
.catch((err) => console.log("got rejected! reason:", err));
//got rejected! reason: null如上所述，当其中一个 Promise 被rejected时， Promise 就会抛出错误。rejected在拥有 Promise.allSettled 之后
const PromiseArray = [
Promise.resolve(100),
Promise.reject(null),
Promise.resolve("Data release"),
Promise.reject(new Error("Something went wrong")),
];
Promise.allSettled(PromiseArray)
.then((res) => {
console.log(res);
})
.catch((err) => console.log(err));
//[
// {status: "fulfilled", value: 100},
// {status: "rejected", reason: null},
// {status: "fulfilled", value: "Data release"},
// {status: "rejected", reason: Error: Something went wrong ...}
//]
const PromiseArray = [
Promise.resolve(100),
Promise.reject(null),
Promise.resolve("Data release"),
Promise.reject(new Error("Something went wrong")),
];
Promise.allSettled(PromiseArray)
.then((res) => {
console.log(res);
})
.catch((err) => console.log(err));
//[
// {status: "fulfilled", value: 100},
// {status: "rejected", reason: null},
// {status: "fulfilled", value: "Data release"},
// {status: "rejected", reason: Error: Something went wrong ...}
//]尽管有些 Promise 被rejected了，Promise.allSettled 返回了所有的 Promise 的结果。rejectedglobalThisglobalThis包含对全局对象的引用，与环境无关。 在浏览器中，全局对象是
window对象。 在 Node 环境中，全局对象是
global或者 Web workers 中的
self。globalThiswindowglobalself在拥有 globalThis 之前我们在工作中会有需要编写一份同时运行在 Node 和浏览器中的通用代码，当我们要取得全局对象时，通常需要做很多工作和逻辑判断：
beforeGlobalThis = (typeof window !== "undefined"
? window
: (typeof process === 'object' &&
typeof require === 'function' &&
typeof global === 'object')
? global
: this);
beforeGlobalThis.tuture = '小若燕雀，亦可一展宏图';
beforeGlobalThis = (typeof window !== "undefined"
? window
: (typeof process === 'object' &&
typeof require === 'function' &&
typeof global === 'object')
? global
: this);
beforeGlobalThis.tuture = '小若燕雀，亦可一展宏图';在拥有 globalThis 之后在拥有 globalThis 之后在拥有 globalThis 之后我们可以直接使用globalThis去引用全局对象，而不用去担心环境的问题：globalThis
globalThis.tuture = '小若燕雀，亦可一展宏图';
globalThis.tuture = '小若燕雀，亦可一展宏图';上面的代码在浏览器或者 Node 环境中都是通用的，你可以放心使用！BigInt允许您使用大于 Javascript 中允许的最大值的数字。 这个数字是pow(2,53)-1。 尽管这不能向后兼容，因为传统的数字系统(IEEE 754)不能支持这种大小的数字。pow(2,53)-1String.matchallmatchAll()是一个与正则表达式相关的方法。 此方法返回与正则表达式匹配的字符串的所有结果的迭代器，包括捕获组。 这个方法已经被添加到 String 原型中。matchAll()正则表达式迭代器参考资源参考资源参考资源ECMA
InfoQ
Article by Tyler HawkinsECMAInfoQArticle by Tyler Hawkins总结总结总结
const user = {
firstName: "Joseph",
lastName: "Kuruvilla",
age: 38,
address: {
number: "239",
street: "Ludwig Lane",
city: "Chennai",
zip: "600028",
prop1: {
prop2: {
prop3: {
prop4: {
value: "sample",
},
},
},
},
},
};
if (user && user.address) {
console.log(user.address.zip);
//600028
}
if (
user &&
user.address &&
user.address.prop1 &&
user.address.prop1.prop2 &&
user.address.prop1.prop2.prop3 &&
user.address.prop1.prop2.prop3.prop4
) {
console.log(user.address.prop1.prop2.prop3.prop4.value);
//sample
}
//Accessing unexisting property
console.log(user.address.prop102.po);
//Error
const user = {
firstName: "Joseph",
lastName: "Kuruvilla",
age: 38,
address: {
number: "239",
street: "Ludwig Lane",
city: "Chennai",
zip: "600028",
prop1: {
prop2: {
prop3: {
prop4: {
value: "sample",
},
},
},
},
},
};
if (user && user.address) {
console.log(user.address.zip);
//600028
}
if (
user &&
user.address &&
user.address.prop1 &&
user.address.prop1.prop2 &&
user.address.prop1.prop2.prop3 &&
user.address.prop1.prop2.prop3.prop4
) {
console.log(user.address.prop1.prop2.prop3.prop4.value);
//sample
}
//Accessing unexisting property
console.log(user.address.prop102.po);
//Error正如您在上面看到的，您必须检查每个级别中是否存在该属性，以避免出现无法读取未定义属性“ po”的错误。 随着嵌套级别的增加，手动检查的属性数量也会增加。 这意味着我们必须检查每个级别，以确保它不会在遇到未定义或空对象时崩溃。拥有可选链式操作符之后拥有可选链式操作符之后拥有可选链式操作符之后随着可选链式操作符 (Optional Chaining) 的引入，我们前端的工作变得容易多了。 通过简单地使用可选链式操作符?.我们可以访问深嵌套的对象，而不必检查未定义或空对象。?.让我们看看它是如何运作的。
const user = {
firstName: "Joseph",
lastName: "Kuruvilla",
age: 38,
address: {
number: "239",
street: "Ludwig Lane",
city: "Chennai",
zip: "600028",
prop1: {
prop2: {
prop3: {
prop4: {
value: "sample",
},
},
},
},
},
};
console.log(user?.address?.zip);
// 600028
console.log(user?.address?.prop1?.prop2?.prop3?.prop4?.value);
// sample
//Accessing unexisting property
console.log(user?.address?.prop102?.po);
//undefined
const user = {
firstName: "Joseph",
lastName: "Kuruvilla",
age: 38,
address: {
number: "239",
street: "Ludwig Lane",
city: "Chennai",
zip: "600028",
prop1: {
prop2: {
prop3: {
prop4: {
value: "sample",
},
},
},
},
},
};
console.log(user?.address?.zip);
// 600028
console.log(user?.address?.prop1?.prop2?.prop3?.prop4?.value);
// sample
//Accessing unexisting property
console.log(user?.address?.prop102?.po);
//undefined太神奇了！ ES2021 成功地通过引入一个单独的代码操作符?.来减少了如此多的代码行数！?.空值合并操作符（Nullish coalescing operator）空值合并操作符（Nullish coalescing operator）空值合并操作符（Nullish coalescing operator）这是另一个令我兴奋的功能，当我第一次在proposal stage， 了解到的时候，我由衷的喜欢这个特性，因为我已经历了编写单独的函数来手动检查这个特性的麻烦。proposal stage空值合并操作符允许您检查nullish值而不是
falsey值。 Nullish 值是指
null或undefined的值。 而 falsey 值是诸如空字符串、数字0、
undefined、
null、
false、
NaN等等的值。 这对你来说可能听起来没什么不同，但是在现实中，这意味着很多。nullishfalseynullundefinedundefinednullfalseNaN让我们看看这是怎么回事。在有空值合并操作符之前在有空值合并操作符之前在有空值合并操作符之前我最近做了一个项目，我需要允许黑暗模式（Dark Mode）切换功能。 我必须检查输入是true还是
false。 如果用户没有设置任何值，则默认为
true。 下面就是我如何在有空值合并操作符之前实现它的：truefalsetrue
const darkModePreference1 = true;
const darkModePreference2 = false;
const darkModePreference3 = undefined;
const darkModePreference4 = null;
const getUserDarkModePreference = (darkModePreference) => {
if (darkModePreference || darkModePreference === false) {
return darkModePreference;
}
return true;
};
getUserDarkModePreference(darkModePreference1);
// true
getUserDarkModePreference(darkModePreference2);
// false
getUserDarkModePreference(darkModePreference3);
// true
getUserDarkModePreference(darkModePreference4);
// true
const darkModePreference1 = true;
const darkModePreference2 = false;
const darkModePreference3 = undefined;
const darkModePreference4 = null;
const getUserDarkModePreference = (darkModePreference) => {
if (darkModePreference || darkModePreference === false) {
return darkModePreference;
}
return true;
};
getUserDarkModePreference(darkModePreference1);
// true
getUserDarkModePreference(darkModePreference2);
// false
getUserDarkModePreference(darkModePreference3);
// true
getUserDarkModePreference(darkModePreference4);
// true在有空值合并操作符之后在有空值合并操作符之后在有空值合并操作符之后在有空值合并操作符之后，您所要做的就是使用??操作符。不需要
if语句：??if
const darkModePreference1 = true;
const darkModePreference2 = false;
const darkModePreference3 = undefined;
const darkModePreference4 = null;
const getUserDarkModePreference = (darkModePreference) => {
return darkModePreference ?? true;
};
getUserDarkModePreference(darkModePreference1);
// true
getUserDarkModePreference(darkModePreference2);
// false
getUserDarkModePreference(darkModePreference3);
// true
getUserDarkModePreference(darkModePreference4);
// true
const darkModePreference1 = true;
const darkModePreference2 = false;
const darkModePreference3 = undefined;
const darkModePreference4 = null;
const getUserDarkModePreference = (darkModePreference) => {
return darkModePreference ?? true;
};
getUserDarkModePreference(darkModePreference1);
// true
getUserDarkModePreference(darkModePreference2);
// false
getUserDarkModePreference(darkModePreference3);
// true
getUserDarkModePreference(darkModePreference4);
// true这里基本上发生的情况是，如果变量 darkModePreference 包含一个nullish值，那么将值 true 赋给它。 简单，简短，易于理解。nullish动态 import（Dynamic Imports）动态 import（Dynamic Imports）动态 import（Dynamic Imports）这个特性将帮助您的应用程序更加高效的执行， 动态 import 允许您将 JS 文件作为原生应用用程序中的模块动态导入。 在 ES2021之前，不管是否使用模块，都应该导入模块。例如，假设我们需要添加一个功能来下载 pdf 格式的文件。让我们看看如何在 动态 import 之前和之后实现这一点。在 动态 import
之前在 动态 import
之前在 动态 import
之前实际上，不会所有的页面访问者使用下载 pdf 的选项。 但是，无论我们的访客是否使用它，它仍然需要被导入。 这意味着这个 pdf 模块也可以在页面加载期间被下载。
import { exportAsPdf } from "./export-as-pdf.js";
const exportPdfButton = document.querySelector(".exportPdfBtn");
exportPdfButton.addEventListener("click", exportAsPdf);
import { exportAsPdf } from "./export-as-pdf.js";
const exportPdfButton = document.querySelector(".exportPdfBtn");
exportPdfButton.addEventListener("click", exportAsPdf);这种开销可以通过使用延迟加载模块（lazy loaded modules）来减少。 可以通过称为代码分割 （code-splitting）的方法来实现，这在 Webpack 或其他模块打包工具已经可以使用了。但是对于 ES2021，我们可以直接使用它了，而不需要模块打包工具，如 Webpack。code-splitting在动态导入（动态 import）之后在动态导入（动态 import）之后在动态导入（动态 import）之后
const exportPdfButton = document.querySelector('.exportPdfBtn');
exportPdfButton.addEventListener('click', () => {
import('./export-as-pdf.js')
.then(module => {
module.exportAsPdf()
})
.catch(err => {
// handle the error if the module fails to load
})
})
const exportPdfButton = document.querySelector('.exportPdfBtn');
exportPdfButton.addEventListener('click', () => {
import('./export-as-pdf.js')
.then(module => {
module.exportAsPdf()
})
.catch(err => {
// handle the error if the module fails to load
})
})正如您在上面的代码中看到的，现在只有在需要模块时才延迟加载模块。 从而减少开销和页面加载时间。Promise.allSettled如果你有一个场景，在所有 Promise 都完成之后必须执行一个任务，那么你可能使用Promise.all()方法。 但是这个方法有一个缺点。 当你的任何一个 Promise 被 Rejected 时，Promise 方法就会抛出一个错误。 这意味着您的代码不会等到所有的 Promise 都完成。Promise.all()这可能不是你想要的。 如果你想要这样的东西: “我不在乎他们的结果。 只需全部运行” ，那么你可以使用新的Promise.allSettled()方法。 这种方法只有在你的所有 Promise 都
settledーー 要么
Resolved，要么
Rejectedーー 时才会
Resolved。Promise.allSettled()settledResolvedRejectedResolved在拥有 Promise.allSettled 之前在拥有 Promise.allSettled 之前在拥有 Promise.allSettled 之前
const PromiseArray = [
Promise.resolve(100),
Promise.reject(null),
Promise.resolve("Data release"),
Promise.reject(new Error("Something went wrong")),
];
Promise.all(PromiseArray)
.then((data) =>
console.log("all resolved! here are the resolve values:", data)
)
.catch((err) => console.log("got rejected! reason:", err));
//got rejected! reason: null
const PromiseArray = [
Promise.resolve(100),
Promise.reject(null),
Promise.resolve("Data release"),
Promise.reject(new Error("Something went wrong")),
];
Promise.all(PromiseArray)
.then((data) =>
console.log("all resolved! here are the resolve values:", data)
)
.catch((err) => console.log("got rejected! reason:", err));
//got rejected! reason: null如上所述，当其中一个 Promise 被rejected时， Promise 就会抛出错误。rejected在拥有 Promise.allSettled 之后
const PromiseArray = [
Promise.resolve(100),
Promise.reject(null),
Promise.resolve("Data release"),
Promise.reject(new Error("Something went wrong")),
];
Promise.allSettled(PromiseArray)
.then((res) => {
console.log(res);
})
.catch((err) => console.log(err));
//[
// {status: "fulfilled", value: 100},
// {status: "rejected", reason: null},
// {status: "fulfilled", value: "Data release"},
// {status: "rejected", reason: Error: Something went wrong ...}
//]
const PromiseArray = [
Promise.resolve(100),
Promise.reject(null),
Promise.resolve("Data release"),
Promise.reject(new Error("Something went wrong")),
];
Promise.allSettled(PromiseArray)
.then((res) => {
console.log(res);
})
.catch((err) => console.log(err));
//[
// {status: "fulfilled", value: 100},
// {status: "rejected", reason: null},
// {status: "fulfilled", value: "Data release"},
// {status: "rejected", reason: Error: Something went wrong ...}
//]尽管有些 Promise 被rejected了，Promise.allSettled 返回了所有的 Promise 的结果。rejectedglobalThisglobalThis包含对全局对象的引用，与环境无关。 在浏览器中，全局对象是
window对象。 在 Node 环境中，全局对象是
global或者 Web workers 中的
self。globalThiswindowglobalself在拥有 globalThis 之前我们在工作中会有需要编写一份同时运行在 Node 和浏览器中的通用代码，当我们要取得全局对象时，通常需要做很多工作和逻辑判断：
beforeGlobalThis = (typeof window !== "undefined"
? window
: (typeof process === 'object' &&
typeof require === 'function' &&
typeof global === 'object')
? global
: this);
beforeGlobalThis.tuture = '小若燕雀，亦可一展宏图';
beforeGlobalThis = (typeof window !== "undefined"
? window
: (typeof process === 'object' &&
typeof require === 'function' &&
typeof global === 'object')
? global
: this);
beforeGlobalThis.tuture = '小若燕雀，亦可一展宏图';在拥有 globalThis 之后在拥有 globalThis 之后在拥有 globalThis 之后我们可以直接使用globalThis去引用全局对象，而不用去担心环境的问题：globalThis
globalThis.tuture = '小若燕雀，亦可一展宏图';
globalThis.tuture = '小若燕雀，亦可一展宏图';上面的代码在浏览器或者 Node 环境中都是通用的，你可以放心使用！BigInt允许您使用大于 Javascript 中允许的最大值的数字。 这个数字是pow(2,53)-1。 尽管这不能向后兼容，因为传统的数字系统(IEEE 754)不能支持这种大小的数字。pow(2,53)-1String.matchallmatchAll()是一个与正则表达式相关的方法。 此方法返回与正则表达式匹配的字符串的所有结果的迭代器，包括捕获组。 这个方法已经被添加到 String 原型中。matchAll()正则表达式迭代器参考资源参考资源参考资源ECMA
InfoQ
Article by Tyler HawkinsECMAInfoQArticle by Tyler Hawkins总结总结总结
相关文章:
- jsJS实现audio音频剪裁剪切复制播放与上传(步骤详解)js大全
- jsvue中touch和click共存的解决方式js大全
- js在vue中使用防抖函数组件操作js大全
- js解决vue的router组件component在import时不能使用变量问题js大全
- js谈一谈vue请求数据放在created好还是mounted里好js大全
- js解决vue页面渲染但dom没渲染的操作js大全
- js解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题js大全
- jsElement Breadcrumb 面包屑的使用方法js大全
- js代码处理JavaScript值为undefined的7个小技巧
- js解决vue动态路由异步加载import组件,加载不到module的问题js大全
刚刚发布热门点击发布时间
- [05/19]前端外包开发:git 舍弃本地代码强制从远程库更新
- [05/19]git 提交 忽略husky git 提交 忽略eslint 检测
- [05/18]前端外包工具:如何npm清理缓冲yarn,pnpm 清理缓存
- [05/18]前端开发工具:npm和pnpm有什么区别?pnpm安装
- [05/18]前端开发:npm与yarn的区别
- [07/09]Chrome抓取页面内容代码|chrome插件获取页面数据
- [07/09]谷歌浏览器数据采集插件开发|谷歌浏览器的采集功能
- [07/09]Chrome插件轻松抓取网络数据,Chrome插件轻松抓取网页源码数据
- [07/09]chrome插件怎么安装?chrome插件开发如何安装chrome插件
- [07/09]快速chrome插件开发-北京chrome插件开发外包
- [12/31]清大光德落地护眼灯|清大光德儿童护眼灯
- [07/20]网站无障碍适老化外包改造私有化过程遇到问题整理
- [07/19]适老化改造工信部明确APP适老化规范：禁广告弹窗，网站需提供特大字体
- [07/19]适老化改造包括哪些方面?
- [07/19]什么是适老化改造？
