DOM
1、检查元素是否被聚焦
const hasFocus = ( ele) => ele === document. activeElement;
2、获取元素的所有兄弟元素
const siblings = ( ele ) => [ ] . slice . call ( ele. parentNode. children) . filter ( ( child ) => child !== ele) ;
3、获取选定的文本
const getSelectedText = ( ) => window. getSelection ( ) . toString ( ) ;
4、返回上一个页面
history. back ( ) ;
history. go ( - 1 ) ;
5、清除所有 cookie
const clearCookies = ( ) => document. cookie. split ( ';' ) . forEach ( ( c ) => ( document. cookie = c. replace ( / ^ + / , '' ) . replace ( / =.* / , ` =;expires= ${ new Date ( ) . toUTCString ( ) } ;path=/ ` ) ) ) ;
6、将 cookie 转换为对象
const cookies = document. cookie. split ( ';' ) . map ( ( item ) => item. split ( '=' ) ) . reduce ( ( acc, [ k, v] ) => ( acc[ k. trim ( ) . replace ( '"' , '' ) ] = v) && acc, { } ) ;
数组
1、比较两个数组
const isEqual = ( a, b ) => JSON . stringify ( a) === JSON . stringify ( b) ;
const isEqual = ( a, b ) => a. length === b. length && a. every ( ( v, i ) => v === b[ i] ) ;
isEqual ( [ 1 , 2 , 3 ] , [ 1 , 2 , 3 ] ) ;
isEqual ( [ 1 , 2 , 3 ] , [ 1 , '2' , 3 ] ) ;
2、将对象数组转换为单个对象
const toObject = ( arr, key ) => arr. reduce ( ( a, b ) => ( { ... a, [ b[ key] ] : b } ) , { } ) ;
const toObject = ( arr, key ) => Object. fromEntries ( arr. map ( ( it ) => [ it[ key] , it] ) ) ;
toObject ( [
{ id: '1' , name: 'Alpha' , gender: 'Male' } ,
{ id: '2' , name: 'Bravo' , gender: 'Male' } ,
{ id: '3' , name: 'Charlie' , gender: 'Female' } ] ,
'id' ) ;
3、按对象数组的属性计数
const countBy = ( arr, prop ) => arr. reduce ( ( prev, curr ) => ( ( prev[ curr[ prop] ] = ++ prev[ curr[ prop] ] || 1 ) , prev) , { } ) ;
countBy ( [
{ branch: 'audi' , model: 'q8' , year: '2019' } ,
{ branch: 'audi' , model: 'rs7' , year: '2020' } ,
{ branch: 'ford' , model: 'mustang' , year: '2019' } ,
{ branch: 'ford' , model: 'explorer' , year: '2020' } ,
{ branch: 'bmw' , model: 'x7' , year: '2020' } ,
] ,
'branch' ) ;
4、检查数组是否为空
const isNotEmpty = ( arr ) => Array. isArray ( arr) && Object. keys ( arr) . length > 0 ;
isNotEmpty ( [ ] ) ;
isNotEmpty ( [ 1 , 2 , 3 ] ) ;
对象
1、检查多个对象是否相等
const isEqual = ( ... objects) => objects. every ( ( obj ) => JSON . stringify ( obj) === JSON . stringify ( objects[ 0 ] ) ) ;
isEqual ( { foo: 'bar' } , { foo: 'bar' } ) ;
isEqual ( { foo: 'bar' } , { bar: 'foo' } ) ;
2、从对象数组中提取属性的值
const pluck = ( objs, property ) => objs. map ( ( obj ) => obj[ property] ) ;
pluck ( [
{ name: 'John' , age: 20 } ,
{ name: 'Smith' , age: 25 } ,
{ name: 'Peter' , age: 30 } ,
] ,
'name' ) ;
3、反转对象的键和值
const invert = ( obj ) => Object. keys ( obj) . reduce ( ( res, k ) => Object. assign ( res, { [ obj[ k] ] : k } ) , { } ) ;
const invert = ( obj ) => Object. fromEntries ( Object. entries ( obj) . map ( ( [ k, v] ) => [ v, k] ) ) ;
invert ( { a: '1' , b: '2' , c: '3' } ) ;
4、从对象中删除所有空和未定义的属性
const removeNullUndefined = ( obj ) =>
Object. entries ( obj)
. reduce ( ( a, [ k, v] ) => ( v == null ? a : ( ( a[ k] = v) , a) ) , { } ) ;
const removeNullUndefined = ( obj ) =>
Object. entries ( obj)
. filter ( ( [ _, v] ) => v != null )
. reduce ( ( acc, [ k, v] ) => ( { ... acc, [ k] : v } ) , { } ) ;
const removeNullUndefined = ( obj ) => Object. fromEntries ( Object. entries ( obj) . filter ( ( [ _, v] ) => v != null ) ) ;
removeNullUndefined ( {
foo: null ,
bar: undefined ,
fuzz: 42 } ) ;
5、按属性对对象进行排序
const sort = ( obj ) =>
Object. keys ( obj)
. sort ( )
. reduce ( ( p, c ) => ( ( p[ c] = obj[ c] ) , p) , { } ) ;
const colors = {
white: '#ffffff' ,
black: '#000000' ,
red: '#ff0000' ,
green: '#008000' ,
blue: '#0000ff' ,
} ;
sort ( colors) ;
6、检查一个对象是否是一个 Promise
const isPromise = ( obj ) =>
! ! obj && ( typeof obj === 'object' || typeof obj === 'function' ) && typeof obj. then === 'function' ;
7、检查对象是否为数组
const isArray = ( obj ) => Array. isArray ( obj) ;
字符串
1、检查路径是否是相对的
const isRelative = ( path ) => ! / ^([a-z]+:)?[\\/] / i . test ( path) ;
isRelative ( '/foo/bar/baz' ) ;
isRelative ( 'C:\\foo\\bar\\baz' ) ;
isRelative ( 'foo/bar/baz.txt' ) ;
isRelative ( 'foo.md' ) ;
2、使字符串的第一个字符小写
const lowercaseFirst = ( str ) => ` ${ str. charAt ( 0 ) . toLowerCase ( ) } ${ str. slice ( 1 ) } ` ;
lowercaseFirst ( 'Hello World' ) ;
3、重复一个字符串
const repeat = ( str, numberOfTimes ) => str. repeat ( numberOfTimes) ;
4、检查字符串是否为十六进制颜色
const isHexColor = ( color ) => / ^#([0-9A-F]{3}|[0-9A-F]{4}|[0-9A-F]{6}|[0-9A-F]{8})$ / i . test ( color) ;
isHexColor ( '#012' ) ;
isHexColor ( '#A1B2C3' ) ;
isHexColor ( '012' ) ;
isHexColor ( '#GHIJKL' ) ;
日期
1、给一个小时添加“am/pm”后缀
const suffixAmPm = ( h ) => ` ${ h % 12 === 0 ? 12 : h % 12 } ${ h < 12 ? 'am' : 'pm' } ` ;
suffixAmPm ( 0 ) ;
suffixAmPm ( 5 ) ;
suffixAmPm ( 12 ) ;
suffixAmPm ( 15 ) ;
suffixAmPm ( 23 ) ;
2、计算两个日期之间的不同天数
const diffDays = ( date, otherDate ) => Math. ceil ( Math. abs ( date - otherDate) / ( 1000 * 60 * 60 * 24 ) ) ;
diffDays ( new Date ( '2014-12-19' ) , new Date ( '2020-01-01' ) ) ;
3、检查日期是否有效
const isDateValid = ( ... val) => ! Number. isNaN ( new Date ( ... val) . valueOf ( ) ) ;
isDateValid ( "December 17, 1995 03:24:00" ) ;
其他的
1、检查代码是否在 Node.js 中运行
const isNode = typeof process !== 'undefined' && process. versions != null && process. versions. node != null ;
2、检查代码是否在浏览器中运行
const isBrowser = typeof window === 'object' && typeof document === 'object' ;
3、将 URL 参数转换为对象
const getUrlParams = ( query ) => Array. from ( new URLSearchParams ( query) ) . reduce ( ( p, [ k, v] ) => Object. assign ( { } , p, { [ k] : p[ k] ? ( Array. isArray ( p[ k] ) ? p[ k] : [ p[ k] ] ) . concat ( v) : v } ) , { } ) ;
getUrlParams ( location. search) ;
getUrlParams ( 'foo=Foo&bar=Bar' ) ;
getUrlParams ( 'foo=Foo&foo=Fuzz&bar=Bar' ) ;
4、检测暗模式
const isDarkMode = window. matchMedia && window. matchMedia ( '(prefers-color-scheme: dark)' ) . matches;
5、交换两个变量
[ a, b] = [ b, a] ;
6、复制到剪贴板
const copyToClipboard = ( text ) => navigator. clipboard. writeText ( text) ;
copyToClipboard ( "Hello World" ) ;
7、将 RGB 转换为十六进制
const rgbToHex = ( r, g, b ) => "#" + ( ( 1 << 24 ) + ( r << 16 ) + ( g << 8 ) + b) . toString ( 16 ) . slice ( 1 ) ;
rgbToHex ( 0 , 51 , 255 ) ;
8、生成随机十六进制颜色
const randomColor = ( ) => ` # ${ Math. random ( ) . toString ( 16 ) . slice ( 2 , 8 ) . padEnd ( 6 , '0' ) } ` ;
const randomColor = ( ) => ` # ${ ( ~ ~ ( Math. random ( ) * ( 1 << 24 ) ) ) . toString ( 16 ) } ` ;
9、生成随机IP地址
const randomIp = ( ) => Array ( 4 ) . fill ( 0 )
. map ( ( _, i ) => Math. floor ( Math. random ( ) * 255 ) + ( i === 0 ? 1 : 0 ) )
. join ( '.' ) ;
randomIp ( ) ;
10、使用 Node crypto 模块生成随机字符串
const randomStr = ( ) => require ( 'crypto' ) . randomBytes ( 32 ) . toString ( 'hex' )