javascript的10个开发技巧

Myth丶恋晨 2023-06-04 04:51 4阅读 0赞

总结10个提高开发效率的JavaScript开发技巧。

1.生成随机的uid。

2.不用循环生成指定长度的数组。

const List = len => [...new Array(len).keys()];
    const list = List(10); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

3.一行代码对数组去重。

const list = [1, 1, 2, 3, 6, 45, 8, 5, 4, 6, 5];
    const uniqueList = [...new Set(list)]; // [1, 2, 3, 6, 45, 8, 5, 4]

4.RGB色值生成16进制色值。

const rgb2Hex = (r, g, b) => {
        r = Math.max(Math.min(Number(r), 100), 0) * 2.55;
        g = Math.max(Math.min(Number(g), 100), 0) * 2.55;
        b = Math.max(Math.min(Number(b), 100), 0) * 2.55;
        r = ('0' + (Math.round(r) || 0).toString(16)).slice(-2);
        g = ('0' + (Math.round(g) || 0).toString(16)).slice(-2);
        b = ('0' + (Math.round(b) || 0).toString(16)).slice(-2);
        return '#' + r + g + b;
    }
    rgb2Hex(100, 50, 0); // "#ff7f00"

5.颜色混合。

const colourBlend = (c1, c2, ratio) => {
        ratio = Math.max(Math.min(Number(ratio), 1), 0);
        let r1 = parseInt(c1.substring(1, 3), 16);
        let g1 = parseInt(c1.substring(3, 5), 16);
        let b1 = parseInt(c1.substring(5, 7), 16);
        let r2 = parseInt(c2.substring(1, 3), 16);
        let g2 = parseInt(c2.substring(3, 5), 16);
        let b2 = parseInt(c2.substring(5, 7), 16);
        let r = Math.round(r1 * (1 - ratio) + r2 * ratio);
        let g = Math.round(g1 * (1 - ratio) + g2 * ratio);
        let b = Math.round(b1 * (1 - ratio) + b2 * ratio);
        r = ('0' + (r || 0).toString(16)).slice(-2);
        g = ('0' + (g || 0).toString(16)).slice(-2);
        b = ('0' + (b || 0).toString(16)).slice(-2);
        return '#' + r + g + b;
    }
    colourBlend('#ff0000', '#3333ff', 0.5); // "#991a80"

6.判断一个整数是否为质数。

7.遍历类数组对象。

const elements = document.querySelectorAll(selector);
    [].prototype.forEach.call(elements, (el, idx, list) => {
        console.log(el); // 元素节点
    })

8.判断对象的类型。

const type = data => Object.prototype.toString.call(data).replace(/^\[object (.+)\]$/, '$1').toLowerCase()
    type({}); // object

9.优化多层判断的条件。

const getScore = score => {
        const scoreData = new Array(101).fill(0)
        .map((data, idx) => ([idx, () => (idx < 60 ? '不及格' : '及格')]))
        const scoreMap = new Map(scoreData);
        return (scoreMap.get(score) 
              ? scoreMap.get(score)() 
              : '未知分数');
    }
    getScore(30); // 不及格

10.时间格式化。

const dateFormatter = (formatter, date) => {
        date = (date ? new Date(date) : new Date)
        const Y = date.getFullYear() + '',
              M = date.getMonth() + 1,
              D = date.getDate(),
              H = date.getHours(),
              m = date.getMinutes(),
              s = date.getSeconds();
        return formatter.replace(/YYYY|yyyy/g, Y)
                        .replace(/YY|yy/g, Y.substr(2, 2))
                        .replace(/MM/g, (M < 10 ? '0' : '') + M)
                        .replace(/DD/g, (D < 10 ? '0' : '') + D)
                        .replace(/HH|hh/g, (H < 10 ? '0' : '') + H)
                        .replace(/mm/g, (m < 10 ? '0' : '') + m)
                        .replace(/ss/g, (s < 10 ? '0' : '') + s);
    }
    dateFormatter('YYYY-MM-DD HH:mm', '2019/08/15 13:55'); // 2019-08-15 13:55

"讲的人不相信，听的人也不相信。"

转载于:https://www.cnblogs.com/yanggb/p/11369192.html