技术拾遗:那些相见恨晚的前端神级代码片段 🔧💎
日常业务开发总是充斥着各种重复性的劳动,复制粘贴当然爽,但把那些好用的代码片段封装起来,才是每个高级程序员(偷懒大师)的必修课!😎
今天就翻开我的祖传 utils.js 秘籍,分享几个像瑞士军刀一样顺手的小玩意儿 🇨🇭。
1. 究极缝合怪:深层数组扁平化并完全去重 🧹
面试遇到手写数组扁平化和去重?别再写那一堆 for 循环和递归了。一行代码,教面试官做人!(bushi) 🤪
/**
* 数组扁平化去重神器
* @param {Array} arr - 各种乱七八糟嵌套的数组
* @returns {Array} - 干干净净的一维不重复数组
*/
const flattenAndUnique = (arr) => [...new Set(arr.flat(Infinity))];
// 见证奇迹的时刻 ✨
console.log(flattenAndUnique([1, [2, 3], [[4, 2], 5, [1, [5]]]]));
// Output: [1, 2, 3, 4, 5]
2. 优雅异常捕捉:给 Async/Await 穿上一层防护服 🥼
还在为了捕获异步错误写满屏屎山一样的 try...catch 吗?🤮 快来试试模仿 Go 语言错误处理模式的高级写法吧!
/**
* Promise 包装器,受 Go 启发的多返回值模式
* @param {Promise} promise - 你的心塞异步请求
* @returns {Promise<[Error, any]>}
*/
const to = (promise) => {
return promise
.then(data => [null, data]) // 成功,左边没毛病,右边填数据 🟢
.catch(err => [err, undefined]); // 失败,左边抛出异常,右边为空 🔴
};
// 实际使用方法:告别嵌套,代码如平川一样直 🛣️
async function fetchUserData() {
const [error, data] = await to(axios.get('/api/user/super-secret-info'));
// 一眼就能看出的错误处理流程 👀
if (error) {
console.error('💥 翻车了兄弟!出错了:', error);
return;
}
console.log('🎉 搞定!数据在此:', data);
}
总结 💡
不要重复造轮子,但一定要有属于自己的神兵利器库 ⚔️!遇到好用的代码就记下来,慢慢积累,它会成为你升职加薪(或者准时下班回家打游戏)的最大底气!🎮
