每天学习10个实用Javascript代码片段(五)

每天学习10个实用Javascript代码片段,加深对 Javascript 语法的理解,积累代码优化经验,第阿飘重生五年前军人老公终于来了,如果觉得内容能够带来点帮助,可以查看专栏《碎片时间学习Javascript代码》其他内容,又或者有用到的需求片段,不妨在留言区留言。

1. 函数链

初次接触函数链是在 jQuery 刚出来的时候,那时觉得链式调用很酷。函前端开发需要掌握什么技术数链是 JavaScrip前端开发工程师工作内容t 的一个概念,常用于单个对象或者类中的多个函数,自己喜欢在公共方法集中以支持方法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 语句常用apink于处理程序阿飘是什么意思异常,将代码放入 try 块中,如果一切正常,就完全javascript面试题按照 tjavascript什么意思ry 块中的逻辑执行,如果发生异常,代码会执行 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.查找重复次数最多

查找重复项或者重复javascript百炼成仙免费阅读次数最多的元素,算是一个常见的需求,下面的片段适合字符串数组和数字数组,如下:前端开发工程师;

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 返回javascript高级程序设计数字是以科学计数法的前端开发有前景吗方式,在页面上需要显示完整的数字,通常并不清楚科学计数的数字是小数点多少位,因此在精度方面不好固定。下面代码实现了一个小数点后大于 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. 定时器

定时器,在项目开发过程中结果过,使用定时器需要严格控制定时器的启阿飘是什么意思动与关闭,避免过javascript百炼成仙多定时器没有关闭导致内存泄露,下面代码实现了一个定时器的开启与停止:

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. 检查标签浏览器是否在视图中

根据浏览器标签页是否在视图/焦点中返回 truefalse

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();

总结

在项目开发中,有很多代码片段会被重复利用,借此机会为自己做一个收藏。