后端开发教程 - Java、Spring Boot 实战 - msg200.com
有趣的 JavaScript 技巧
1）可选的 Catch Binding
2）JSON字符串化格式
3）事件.currentTarget
4）Promise.any()
5）快速数字转换
6）Object.seal()
在这篇文章中，我们将学习一些流行的 JavaScript 技巧。这些技巧让我兴奋不已。我相信读完这篇文章后，你也会感到兴奋。
1）可选的 Catch Binding
作为一名 Web 开发者，我们应该在应用程序中处理错误。例如，在使用async/await发出 API 请求时，我们可能会遇到错误的情况。请考虑以下代码
async function getDetails() {
try {
let result = await fetch('/getdetails');
console.log(result);
} catch (e) {
console.error('Error:', e);
}
}
在这段代码中，如果 API 失败，它会抛出一个错误，而我们捕获了该错误。不过，考虑到常见的错误，我们不需要捕获该错误。
async function getDetails() {
try {
let result = await fetch('/getdetails');
console.log(result);
} catch {
console.error('Seems we got an issue in our end. Can you try after sometime?');
}
}
在可选的 catch 绑定 (ES10/2019) 之前，这是不可能的。即使没有使用，我们也应该捕获错误。
浏览器支持的版本在这里。
2）JSON字符串化格式
我们都知道这JSON.stringify会将 JS 对象转换为 JSON 字符串。但问题是，你能读取给定的 JSON 字符串吗？请考虑以下代码
let obj = {
Name: 'Alwar',
Age: 23,
Degree: 'B.E(ECE)',
Hobbies: 'Working in Web Apps, Drawing, Playing cricket,'
Country: 'India'
};
JSON.stringify(obj);
它将给出如下输出
"{"Name":"Alwar","Age":23,"Degree":"B.E(ECE)","Hobbies":"Working in Web Apps, Drawing, Playing cricket","Country":"India"}"
上面的字符串读起来是不是有点难？我们应该怎么做才能提高可读性呢？🤔。别担心，JSON.stringify 方法里有个选项。也就是说，我们可以把上面的代码写成这样：
JSON.stringify(obj, null, 2);
现在我们可以得到如下输出
"{
"Name": "Alwar",
"Age": 23,
"Degree": "B.E(ECE)",
"Hobbies": "Working in Web Apps, Drawing, Playing cricket",
"Country": "India"
}"
有关 JSON.stringify 的更多信息，请参阅
3）事件.currentTarget
我希望我们大多数人都使用过事件。从事件对象获取元素时，我们可以用它event.target来修改该特定元素。但是，如果我们遇到如下情况，该怎么办？
这里有外层 div（红色）、中间层 div（绿色）和内层 div（蓝色）。我想把外层 div 的颜色改成灰色。为此，我使用了 event.target 方法。但是，如果我们点击中间层 div（绿色）和内层 div（蓝色），它们就会变成灰色，而不是外层 div（红色）变成灰色。这就event.currentTarget来了😎。
现在，如果我们点击中间的 div（绿色）和内部的 div（值），它们不会变成灰色。相反，它会将外部的 div（红色）变为灰色。这表明它会将事件处理程序附加到的元素传递给它。
4）Promise.any()
此方法将返回一个 Promise，一旦可迭代对象中的某个 Promise 满足条件，该 Promise 就会解析并返回该 Promise 的值。您可以通过一个实际用例来理解这一点。假设我们在打开 Web 应用的索引页时应该加载以下任意一项信息
- 家庭信息
- 教育信息
- 诞生信息
因此我们应该进行三次 API 调用来获取这些信息。
let familyInfo = fetch('/getfamilyinfo').then((val) => return val);
let educationInfo= fetch('/educationinfo').then((val) => return val);
let nativityInfo = fetch('/nativityinfo').then((val) => return val);
Promise.any([familyInfo, educationInfo, nativityInfo ]).then((value) => console.log(value));
它将加载第一个已解析的 Promise 信息 💪。请注意，我发出了三个请求。这些请求稍后将在我的应用程序中使用。为了提升用户体验，我至少会显示一条信息。使用此方法前，
请检查浏览器支持的版本。
5）快速数字转换
在 javascript 中，我们有一种Number将字符串转换为数字的方法。
console.log(Number('5')) // 5
+但是，我们可以通过在给定字符串前面添加符号将字符串转换为数字。
console.log(+'5') // 5
6）Object.seal()
与 object.freeze 方法不同，此方法可防止添加新属性，但允许编辑现有属性。
let detailsInfo = {
name: 'Alwar',
age: 23
};
Object.seal(detailsInfo);
detailsInfo.education = 'B.E';
console.log(detailsInfo);
上述代码将产生如下输出
{
name: 'Alwar',
age: 23
}
这里我不想添加任何其他属性。这就是为什么我密封了这个对象。另外，请记住，密封对象的属性是可编辑的。
let detailsInfo = {
name: 'Alwar',
age: 23
};
Object.seal(detailsInfo);
detailsInfo.name = 'Alwar G'
console.log(detailsInfo);
现在我们得到的输出是
{
name: 'Alwar G',
age: 23
}
如果您不想编辑现有属性，可以尝试object.freeze方法。
感谢您阅读这篇文章🙏。如果您有任何想分享的内容，欢迎随时发表评论。