攜手創作，共同成長！這是我參與「掘金日新計劃 · 8 月更文挑戰」的第 17 天，點選檢視活動詳情

之前在掘金寫了一篇介紹 JavaScript 小技巧的文章，很受大家歡迎。但是有朋友說還是不夠用，於是我決定再寫一篇更多更全的文章。
原文：你需要知道的 12 個常用的 JavaScript 函式
原來是 12 個函式，現在直接乘以 3 倍，搞 36 個函式！
JavaScript 是一個很複雜的語言，很多新手在使用它開發應用的時候會發現很多功能無從下手。有了我根據功能分類總結的 36 個 JavaScript 技巧，複製貼上一鍵搞定！
幫助你提高開發效率、快速解決問題，早點下班，早點摸魚！

DOM 相關

1. 檢測某個元素是否聚焦

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

2. 獲取某個元素所有的兄弟元素

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

3. 獲取當前選擇的文字

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

4. 返回上一個頁面

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

5. 獲取所有 cookie 並轉為物件

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

6. 清除所有 cookie

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

7. 將 URL 引數轉換為物件

javascript 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. 檢測是否為暗模式

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

陣列相關

9. 比較兩個陣列

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

10. 將陣列轉為物件

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

11. 將陣列按照屬性計數

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

12. 判斷陣列是否不為空

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

13. 展開多維陣列

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

14. 獲取陣列最後一個元素

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

物件相關

15. 檢測多個物件是否相等

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

16. 從物件陣列中提取屬性值

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

17. 反轉物件的 key value

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

18. 從物件中刪除值為 null 和 undefined 的屬性

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

19. 按照物件的屬性對物件排序

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

20. 檢測物件是否為陣列

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

21. 檢測物件是否為 Promise

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

22. 交換兩個物件

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

字串相關

23. 檢查路徑是否是相對路徑

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

24. 將字串的第一個字元變小寫

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

25. 重複一個字串

javascript const repeat = (str, numberOfTimes) => str.repeat(numberOfTimes);

26. 生成 IP 地址

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

27. 生成十六進位制顏色字串

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

28. 生成 rgb 顏色字串

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

29. 下劃線轉駝峰

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

30. 駝峰轉下劃線橫線

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

31. 檢查字串是否是十六進位制顏色

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

32. RGB 字串轉十六進位制字串

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

日期相關

33. 兩個日期之間相差的天數

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

34. 檢查日期是否有效

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

其他

35. 檢測程式碼是否處於 Node.js 環境

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

36. 檢測程式碼是否處於瀏覽器環境

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

如果你也有一些常用的函式，或者文章中的某些函式有更好的實現方式，也可以進行補充！