点击下方“前端开发爱好者”，选择“设为星标”
第一时间关注技术干货！
大家好，我是
xy👨🏻💻。弃用 try catch , 这一次有更好的选择！
JavaScript 作为一门动态语言，其错误处理一直是一个让开发者头疼的问题。
传统的try-catch块虽然功能强大，但往往会导致代码结构变得复杂且难以维护。
幸运的是，ECMAScript 提出了一个新的提案——安全赋值操作符（?=），旨在简化错误处理，让代码更加清晰和高效。
什么是安全赋值操作符？
安全赋值操作符（?=）是一种新的语法，它允许开发者在赋值时直接处理错误不会抛出异常。这使得错误处理变得更加直观和简洁。
如何使用安全赋值操作符？
假设我们有一个异步函数fetchData，它可能会抛出错误。使用传统的try-catch块，我们需要这样写：
async function fetchData() {
try {
const response = await fetch("https://api.example.com/data");
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
} catch (error) {
console.error('Fetch error:', error);
return null;
}
}
使用安全赋值操作符，我们可以简化为：
async function fetchData() {
const [error, data] ?= await fetch("https://api.example.com/data").json();
if (error) {
console.error('Fetch error:', error);
return null;
}
return data;
}
安全赋值操作符的优点
减少代码嵌套： ?=操作符减少了try-catch块的使用，使代码更加简洁。提高可读性：错误处理逻辑更加直观，代码更易于阅读和维护。 跨 API 一致性：无论使用哪个 API，都可以使用相同的错误处理方式。 提高安全性：自动处理错误，减少因忽略错误而导致的安全风险。
与Symbol.result结合使用
Symbol.result是一个特殊方法，当对象实现了这个方法时，?=操作符可以用来定义自己的错误处理逻辑。例如：
function example() {
return {
[Symbol.result]() {
return [new Error("Error message"), null];
},
};
}
const [error, result] ?= example();
if (error) {
console.error('Error:', error.message);
}
递归错误处理
?=操作符还可以递归处理嵌套对象的错误，这对于处理复杂的错误场景非常有用。
const obj = {
[Symbol.result]() {
return [
null,
{ [Symbol.result]: () => [new Error("Nested error"), null] }
];
},
};
const [error, data] ?= obj;
异步函数和 Promise
?=操作符与 Promise 和 async/await 无缝协作，使得异步代码中的错误处理变得简单。
const [error, data] ?= await fetch("https://api.example.com");
结论
安全赋值操作符（?=）是 JavaScript 错误处理的一次重大进步，它有望减少对try-catch块的依赖，使代码更加清晰和安全。虽然这个提案还在开发中，但它的潜力已经显而易见。
代码示例
最后，让我们通过一个实际的例子来展示?=操作符的用法：
async function getUserData(userId) {
const [error, user] ?= await database.getUser(userId);
if (error) {
console.error('Database error:', error);
return null;
}
return user;
}
在这个例子中，如果getUser函数抛出错误，error变量将捕获这个错误，而user变量将为null。这样，我们就可以在不使用try-catch块的情况下优雅地处理错误。
当然，目前这个提案还处于初期阶段，现阶段想要尝试的话需要使用 polyfill：https://github.com/arthurfiorette/proposal-safe-assignment-operator/blob/main/polyfill.js
参考链接：
https://es.discourse.group/t/safe-assignment-operator/2111
写在最后
公众号：前端开发爱好者专注分享web前端相关技术文章、视频教程资源、热点资讯等，如果喜欢我的分享，给 🐟🐟 点一个赞👍 或者 ➕关注都是对我最大的支持。
欢迎长按图片加好友，我会第一时间和你分享前端行业趋势，面试资源，学习途径等等。
添加好友备注【进阶学习】拉你进技术交流群
关注公众号后，在首页：
回复 面试题，获取最新大厂面试资料。 回复 简历，获取 3200 套 简历模板。 回复 React 实战，获取 React 最新实战教程。 回复 Vue 实战，获取 Vue 最新实战教程。 回复 ts，获取 TypeScript 精讲课程。 回复 vite，获取 Vite 精讲课程。 回复 uniapp，获取 uniapp 精讲课程。 回复 js 书籍，获取 js 进阶 必看书籍。 回复 Node，获取 Nodejs+koa2 实战教程。 回复 数据结构算法，获取数据结构算法教程。 回复 架构师，获取 架构师学习资源教程。 更多教程资源应有尽有，欢迎 关注获取。
