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
元素,则返回空字符串。- 返回提取到的文本内容。