前端必备工具函数和方法

1.复制文本到剪切板

//复制文本到剪切板
const copyToClipboard = (text) => navigator.clipboard.writeText(text);

//test
copyToClipboard('复制到剪切板')

2.获取某个日期位于当年的第几天

//获取某个日期位于当年的第几天
const dayOfYear = (date)=>
Math.floor((date - new Date(date.getFullYear(), 0 ,0)) / 1000 / 60 /60 / 24);

//test
dayOfYear(new Date(2023, 10. 17))

3.将rgb颜色灰度化 (基于光感加权平均)

用于把彩色图片变成黑白色的图片，需处理颜色数据

//将xgb颜色灰度化（基于光感加权平均）

const gray = (r, g, b) => 0.2126 * r + 0.7152 * g + 0.0722 *b

//test
gray(50, 100, 150) // 92.98, 92.98, 92.98

4.解析url中的参数

//解析url中的参数
const parseQuery = (url) => {
    
    q = {};
    url.replace(/([^?&=]+)=([^&]+)/g, (_, k, v) => (q[k] =  v));
    return q;
}

//rest
parseQuery('http://aaa.com/?a=1&b=2');  // {a:1, b:2}
parseQuery('a=1&b=2'); //{a:1, b:2}

    

5.筛选对象属性

//筛选对象属性
const pick = (obj, ...props) =>
Object.fromEntries(Object.entries(obj).filter(([k]) =>
props.includes(k)));

//test
pick({ a : 1, b: 2, c: 3 }, 'a', 'b');

6.随机HEX颜色

const randomColor = () =>
    '#' + Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, '0');
//test
randomColor(); // #272e39

7.生成随机字符串

const randomString = () => Math.random().toString(36).slice(2);

randomString();

8.去掉字符串中的元素标记

//去掉字符串中的元素标记
const removeTag = (fragment) =>
    new DOMParser().parseFromString(fragment, 'text/html').body.textContent || '';
//test
removeTag('<div>Hello Word</div>'); // Hello Word