每天学习10个实用Javascript代码片段（五）：函数链、复制、定时器、科学计数、异常处理

每天学习10个实用Javascript代码片段（五）

每天学习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  10
console.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)); // 216
console.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)); // shenzhen
console.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.000000017160493827160499945830
console.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();