每天学习 10 个实用 Javascript 代码片段，加深对 Javascript 语法的理解，积累代码优化经验，第五天终于来了，如果觉得内容能够带来点帮助，可以收藏，又或者有用到的需求片段，不妨在留言区留言。
1. 函数链
初次接触函数链是在 jQuery 刚出来的时候，那时觉得链式调用很酷。函数链是 JavaScript 的一个概念，常用于单个对象或者类中的多个函数，自己喜欢在公共方法集中以支持方法的链式调用。下面就是一个简单的片段：
function CusModal() { const This = this; this.options = { theme: "default", title: "modal", visible: false, }; const setOptions = function (key, value) { This.options[key] = value; }; this.setTheme = function (theme) { setOptions("theme", theme); return this; }; this.setTitle = function (title) { setOptions("title", title); return this; }; this.show = function () { setOptions("visible", true); }; this.close = function () { setOptions("visible", false); }; this.getOptions = function () { return this.options; };}
const modalHelper = new CusModal();// 设置弹窗主题、设置标题、显示modalHelper.setTheme("dark").setTitle("发布文章窗口").show();
console.log(modalHelper.getOptions()); // { theme: 'dark', title: '发布文章窗口', visible: true }
复制代码
上面的代码片段模拟了一个 Modal 方法类，可以设置主题、标题、显示和关闭。
2. Error handling
try catch 语句常用于处理程序异常，将代码放入 try 块中，如果一切正常，就完全按照 try 块中的逻辑执行，如果发生异常，代码会执行 catch 块，可以在 catch 块中加入异常处理的逻辑，finally 对于 try catch 也非常重要，finally 块是在 try catch 语句执行后执行，即不管是否有异常都会执行finally 。
const testError = (val) => { try { const number = 100 / val; return number; } catch (error) { return error; } finally { console.log("finally"); }};console.log(testError(10)); // finally 10console.log(testError(0)); // finally Infinity
复制代码
从上面执行结果可以看出，不管有没有异常都会执行 finally 块中的语句。
3. 数组最大数最小数
这是一种查找数组中最大数或者最小数的方法之一，也可以通过循环来实现这一需求，下面分享一种简单方法：
const findMax = (arrayNumbers) => Math.max(...arrayNumbers);const findMin = (arrayNumbers) => Math.min(...arrayNumbers);const arrNumbers = [10, 13, 1, 48, 6, 216];console.log(findMax(arrNumbers)); // 216console.log(findMin(arrNumbers)); // 1
复制代码
4.查找重复次数最多
查找重复项或者重复次数最多的元素，算是一个常见的需求，下面的片段适合字符串数组和数字数组，如下：
function maxRepeated(array) { return array .sort( (a, b) => array.filter((v) => v === a).length - array.filter((v) => v === b).length ) .pop();}const arrString = ["china", "beijing", "shenzhen", "shanghai", "shenzhen"];const arrNumbers = [10, 20, 30, 10, 20, 10];console.log(maxRepeated(arrString)); // shenzhenconsole.log(maxRepeated(arrNumbers)); // 10
复制代码
5. 科学计数完整显示
在项目中有遇到 API 返回数字是以科学计数法的方式，在页面上需要显示完整的数字，通常并不清楚科学计数的数字是小数点多少位，因此在精度方面不好固定。下面代码实现了一个小数点后大于 0 的数字三位，如下：
function flatNumber(num) { const strNumber = num.toFixed(30); console.log(strNumber); const arrayNumbers = [...strNumber]; const numberIndex = arrayNumbers.findIndex( (item) => parseInt(item, 10) > 0 ); const precision = numberIndex >= 0 ? numberIndex + 1 : 0; return num.toFixed(precision);}
const number = 1.71604938271605e-8;console.log(number.toFixed(30)); // 0.000000017160493827160499945830console.log(flatNumber(number)); // 0.0000000172
复制代码
6. 定时器
定时器，在项目开发过程中结果过，使用定时器需要严格控制定时器的启动与关闭，避免过多定时器没有关闭导致内存泄露，下面代码实现了一个定时器的开启与停止：
class Timer { constructor(fn, delay) { this._triggerTimer = null; this._delay = delay; this._fn = fn; }
stop() { if (this._triggerTimer) { clearTimeout(this._triggerTimer); this._triggerTimer = null; } }
begin() { this.stop(); this._triggerTimer = setTimeout(() => { this._fn(); }, this._delay); }}let timerCount = 0;const timerHelper = new Timer(() => { timerCount++; if (timerCount < 5) { console.log(timerCount); timerHelper.begin(); } else { timerHelper.stop(); }}, 2000);timerHelper.begin();
复制代码
上面代码将输出 1 2 3 4 后停止。
7. 将输入复制到剪贴板
function copyToClipboard(inputID) { navigator.clipboard.writeText(document.querySelector(inputID).value);}
复制代码
8. 检查标签浏览器是否在视图中
根据浏览器标签页是否在视图/焦点中返回 true 或 false。
const isBrowserTabIsFocus = () => document.hidden;
复制代码
9. 捕获鼠标右击
window.oncontextmenu = () => { console.log("点击了右键");};
复制代码
10. 返回顶部
返回顶部，在内容比较多的网页上常见，方便用户快速回到页面顶部，实现的代码如下：
const scrollToTop = () => { const scrollToTop = document.documentElement.scrollTop || document.body.scrollTop; if (scrollToTop > 0) { window.requestAnimationFrame(scrollToTop); window.scrollTo(0, scrollToTop - scrollToTop / 8); }};scrollToTop();
复制代码
总结
在项目开发中，有很多代码片段会被重复利用，借此机会为自己做一个收藏。
评论