前端开发攻略---极简精略又常用的JS代码片段，函数封装。

本文链接：https://blog.csdn.net/nibabaoo/article/details/137771489

本文介绍了JavaScript中的一些实用函数，包括文本复制、计算日期在当年的天数、RGB转灰度、URL参数解析、对象属性筛选、随机颜色生成、随机字符串生成以及去除HTML元素标记等技术应用。

摘要由CSDN通过智能技术生成

1、复制文本到剪切板

const copyToClipboard = text => navigator.clipboard.writeText(text)
解释：

const: 这是 JavaScript 中用于声明一个常量的关键字，意味着 copyToClipboard 是一个常量，它的值不能被重新赋值。

copyToClipboard: 这是一个函数名，它用于将文本复制到剪贴板。

text: 这是函数的参数，它表示要复制到剪贴板的文本内容。

=>: 这是箭头函数的语法，它表示函数的定义。

navigator.clipboard.writeText(text): 这是调用浏览器 API 的一部分。navigator 是一个全局对象，它代表了浏览器的状态和标识，而 clipboard 是 navigator 对象的一个属性，表示剪贴板。writeText(text) 是 clipboard 对象的一个方法，它用于将指定的文本写入剪贴板

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

new Date(date.getFullYear(), 0, 0) 创建了一个新的日期对象，表示给定日期的当年的第一天（即月份为0，日期为0表示上一年的最后一天）。
(date - new Date(date.getFullYear(), 0, 0)) 计算了给定日期与当年第一天的毫秒差值。
/ 1000 / 60 / 60 / 24 将毫秒差值转换为天数，即将毫秒转换为秒、小时、天。
Math.floor(...) 取整，确保结果是一个整数。

3、将rgb颜色灰度变化（基于光感加权平均）

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

灰度值是一种表示像素亮度的方法，它是将 RGB 颜色的红、绿、蓝三个分量按照一定的比例加权求和得到的。在这段代码中，采用了一种广泛使用的加权求和公式：
其中，0.2126、0.7152 和 0.0722 是对应红、绿、蓝三个分量的加权系数。这些系数是根据人眼对不同颜色敏感程度而确定的，通常认为人眼对绿色最敏感，其次是红色，对蓝色最不敏感。
这个加权求和的结果即为该像素的灰度值。这种转换方法可以简单地将彩色图像转换为黑白图像，保留了图像的亮度信息，但去除了颜色信息。

4、解析url中的参数

    const parseQuery = url => {
      const q = {}
      url.replace(/([^?&=]+)=([^&]+)/g, (_, k, v) => (q[k] = v))
      return q
    }
解释：

const parseQuery = url => {: 这行代码定义了一个名为parseQuery的箭头函数，它接受一个参数url，代表待解析的URL。

const q = {}: 这行代码创建了一个空对象q，用于存储解析后的查询参数键值对。

url.replace(/([^?&=]+)=([^&]+)/g, (_, k, v) => (q[k] = v)): 这行代码使用了正则表达式和replace方法来解析URL中的查询参数。正则表达式/([^?&=]+)=([^&]+)/g用于匹配URL中的键值对，其中([^?&=]+)表示匹配不包含?、&和=的字符序列（即键），([^&]+)表示匹配不包含&的字符序列（即值）。g标志表示全局匹配，匹配到所有符合条件的键值对。_代表匹配到的整个子串，k代表键，v代表值。箭头函数(_, k, v) => (q[k] = v)将匹配到的键值对添加到对象q中，键为k，值为v。

return q: 这行代码返回包含解析后查询参数的对象q。

5、筛选对象属性

const pick = (obj, ...props) => Object.fromEntries(Object.entries(obj).filter(([k]) => props.includes(k)))
解释：

参数说明：

obj: 输入的对象。
...props: 要选择的属性名称，作为函数的可变参数传递。

操作步骤：

使用 Object.entries(obj) 将对象转换为一个包含键值对的数组（每个键值对是一个数组 [key, value]）。
使用 filter 方法对键值对数组进行过滤。过滤器函数接收一个键值对 [k, v]，并检查键 k 是否在 props 数组中。
使用 Object.fromEntries() 将过滤后的键值对数组转换回一个对象，并返回该对象。

6、随机HEX颜色

    const randomColor = () => {
      return (
        '#' +
        Math.floor(Math.random() * 0xffffff)
          .toString(16)
          .padEnd(6, '0')
      )
    }
解释：

Math.random(): 这个函数返回一个0到1之间的随机数。
Math.floor(): 这个函数将传入的参数向下取整，得到一个整数。
Math.random() * 0xffffff: 将随机数乘以十六进制数0xffffff（相当于16777215），这样可以确保生成的数在0到16777215之间。
.toString(16): 将得到的随机数转换成十六进制字符串。
.padEnd(6, '0'): 如果得到的十六进制字符串长度不足6位，则在字符串末尾用0填充，直到达到6位长度。
'#' + ...: 将填充好的六位十六进制字符串加上 # 符号，得到一个完整的十六进制颜色表示。

7、生成随机字符串

const randomString = () => Math.random().toString(36).slice(2)
解释：

Math.random(): 这个函数返回一个0到1之间的随机数。
.toString(36): 将得到的随机数转换成36进制的字符串。36进制使用数字0-9和字母a-z表示数值，共36个字符。
.slice(2): 对转换后的36进制字符串进行截取，从索引为2的位置开始截取，这是因为转换成36进制后，会以"0."开头，我们不需要这部分，只需要保留随机生成的字符部分。

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

const removeTag = fragment => new DOMParser().parseFromString(fragment, 'text/html').body.textContent || ''
解释：

使用 DOMParser 创建一个 DOM 解析器对象。
将传入的 HTML 片段作为参数传递给 parseFromString 方法，以解析成一个 DOM 文档。
从解析后的 DOM 文档中获取 body 元素的文本内容，即 textContent。如果没有找到 body 元素，则返回空字符串。
返回提取到的文本内容。