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

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

每天学习10个实用Javascript代码片段,加深对 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. 检查标签浏览器是否在视图中

根据浏览器标签页是否在视图/焦点中返回 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();

总结

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


相关文章
|
1月前
|
JavaScript 前端开发 程序员
分享18个用于处理 null、NaN 和undefined 的 JS 代码片段
Null、NaN 和 undefined 是程序员在使用 JavaScript 时遇到的常见值。 有效处理这些值对于确保代码的稳定性和可靠性至关重要。
|
1月前
|
JavaScript
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
27 0
|
1月前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
63 0
|
10天前
|
运维 JavaScript 前端开发
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
|
28天前
|
前端开发 搜索推荐 JavaScript
编程笔记 html5&css&js 001 学习编程从网页开始
编程笔记 html5&css&js 001 学习编程从网页开始
|
1月前
|
前端开发 JavaScript
从零开始学习前端开发:HTML、CSS、JavaScript入门指南
【2月更文挑战第1天】本文将带领读者从零开始学习前端开发,介绍HTML、CSS和JavaScript的基础知识与应用,帮助读者快速入门前端开发领域。
51 1
|
1月前
|
数据采集 机器学习/深度学习 JavaScript
画【Python折线图】的一百个学习报告(二、pyecharts引入js文件)
画【Python折线图】的一百个学习报告(二、pyecharts引入js文件)
37 0
|
1月前
|
JSON 前端开发 JavaScript
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
30 0
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
|
1月前
|
资源调度 JavaScript 关系型数据库
Node.js【文件系统模块、路径模块 、连接 MySQL、nodemon、操作 MySQL】(三)-全面详解(学习总结---从入门到深化)
Node.js【文件系统模块、路径模块 、连接 MySQL、nodemon、操作 MySQL】(三)-全面详解(学习总结---从入门到深化)
31 0
|
1月前
|
JavaScript 中间件 测试技术

相关产品

  • 云迁移中心
  • http://www.vxiaotou.com