能让你早点下班的36个JavaScript实用函数！早点摸鱼、早点下班！

 DOM 相关

1. 检测某个元素是否聚焦 

const hasFocus = el => el === document.activeElement

2. 获取某个元素所有的兄弟元素

const a = el => [].slice.call(el.parentNode.children).filter(child => child !== el)

 

 3. 获取当前选择的文本

const getSelectedText = () => window.getSelection().toString()

 

 4. 返回上一个页面

---

const goBack = () => history.go(-1)

5. 获取所有 cookie 并转为对象

---

const getCookies = () => document.cookie
.split(';')
.map(item => item.split('='))
.reduce((acc, [k, v]) => (acc[k.trim().replace('"', '')] =v) && acc, {})

 

6. 清除所有 cookie

---

const clearCookies = () => document.cookie
.split(';')
.forEach(c => document.cookie = c.splace(/^+/, '')
.replace(/=.*/,`=;expires=${new Date().toUTCString()};path=/`))
)

7. 将 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 }),{});

8. 返检测是否为暗模式

---

const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

数组相关

9. 比较两个数组

---

const isEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b);

10. 将数组转为对象

---

const arrayToObject = (arr, key) => arr.reduce((a, b) => ({ ...a, [b[key]]: b }), {});

11. 将数组按照属性计数

---

const countBy = (arr, prop) => arr.reduce((prev, curr) => ((prev[curr[prop]] = ++prev[curr[prop]] || 1), prev), {} );

12. 判断数组是否不为空

---

const arrayIsNotEmpty = (arr) => Array.isArray(arr) && Object.keys(arr).length > 0;

13. 展开多维数组

---

const flat_entries = arr => [].concat(...arr);

14. 获取数组最后一个元素

---

const lastItem = arr => arr.slice(-1)[0]

对象相关

15. 检测多个对象是否相等

---

const isEqual = (...objects) => objects.every((obj) => JSON.stringify(obj) === JSON.stringify(objects[0]));

16. 从对象数组中提取属性值

---

const pluck = (objs, property) => objs.map((obj) => obj[property]);

17. 反转对象的 key value

---

const invert = (obj) => Object.keys(obj).reduce((res, k) => Object.assign(res, { [obj[k]]: k }), {});

18. 从对象中删除值为 null 和 undefined 的属性

---

const removeNullAndUndefined = (obj) =>
Object.entries(obj)
.reduce((a, [k, v]) => (v == null ? a : ((a[k] = v), a)), {});

19. 按照对象的属性对对象排序

---

const sort = (obj) => Object
.keys(obj)
.sort()
.reduce((p, c) => ((p[c] = obj[c]), p), {});

20. 检测对象是否为数组

---

const isArray = (obj) => Array.isArray(obj);

21. 检测对象是否为 Promise

---

const isPromise = (obj) =>
!!obj && (typeof obj === 'object' || typeof obj === 'function') && typeof obj.then === 'function';

22. 交换两个对象

---

const exchange = (a, b) => [a, b] = [b, a]

 字符串相关

23. 检查路径是否是相对路径

---

const isRelative = (path) => !/^([az]+:)?[\\/]/i.test(path);

24. 将字符串的第一个字符变小写

---

const lowercaseFirst = (str) => `${str.charAt(0).toLowerCase()}${str.slice(1)}`;

25. 重复一个字符串

---

cconst repeat = (str, numberOfTimes) => str.repeat(numberOfTimes);

26. 生成 IP 地址

---

const randomIp = () => Array(4).fill(0)
.map((_, i) => Math.floor(Math.random() * 255) + (i === 0 ? 1 : 0) )
.join('.');

27. 生成十六进制颜色字符串

---

const randomColor = () => `#${Math.random().toString(16).slice(2, 8).padEnd(6, '0')}`;

28. 生成 rgb 颜色字符串

---

const randomRgbColor = () => `rgb(${Math.floor(Math.random()*255)}, ${Math.floor(Math.random()*255)}, ${Math.floor(Math.random()*255)})`

29. 下划线转驼峰

---

const toHump = str => str.replace(/\_(\w)/g, (all, letter) => letter.toUpperCase());

30. 驼峰转下划线横线

---

const toLine = str => str.replace(/([A-Z])/g,"_$1").toLowerCase()

31. 检查字符串是否是十六进制颜色

---

const isHexColor = (color) => /^#([0-9A-F]{3}|[0-9A-F]{4}|[0-9A-F]{6}|[0-9A-F]{8})$/i.test(color);

32. RGB 字符串转十六进制字符串

---

const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1) ; 

 日期相关

33. 两个日期之间相差的天数

---

const diffDays = (date, otherDate) => Math.ceil(Math.abs(date - otherDate) / (1000 * 60 * 60 * 24));

34. 检查日期是否有效

---

const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());

 其他

35. 检测代码是否处于 Node.js 环境

---

const isNode = typeof process !== 'undefined' && process.versions != null && process.versions.node != null;

36. 检测代码是否处于浏览器环境

---

const isBrowser = typeof window === 'object' && typeof document === 'object';

 注：引用于微信公众号 ‘前端面试题库MST’ 这里只为方便自己使用