JavaScript 单行代码速查表：50 个常用片段，收藏备用！
前言
作为一名程序员，一定遇到过很多重复性工作，需要编写大量的代码来完成一些简单的任务。为了帮助提升开发效率，整理了 50 个实用 JavaScript 代码片段，涵盖字符串、数组、日期、数字、对象、Web 操作等多个方面。这些代码片段简洁易懂，可以直接复制粘贴到你的项目中使用，节省时间，提高代码质量。
一：字符串操作
1. 将字符串首字母大写
const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1);
这个代码片段定义了一个名为 capitalize 的函数，它接受一个字符串作为参数，并返回一个新字符串，其中第一个字母被大写，其余字母保持不变。
2. 反转字符串
const reverseString = str => str.split('').reverse().join('');
这个代码片段定义了一个名为 reverseString 的函数，它接受一个字符串作为参数，并返回一个新字符串，其中所有字符的顺序被反转。
3. 检查字符串是否为回文
const isPalindrome = str => str === str.split('').reverse().join('');
这个代码片段定义了一个名为 isPalindrome 的函数，它接受一个字符串作为参数，并返回一个布尔值，指示该字符串是否为回文（正着读和反着读都一样）。
二：数组
4. 将数组扁平化一层
const flatten = arr => arr.reduce((a, v) => a.concat(v), []);
这个代码片段定义了一个名为 flatten 的函数，它接受一个数组作为参数，并返回一个新数组，其中所有嵌套在第一层的子数组都被扁平化到顶层数组中。
5. 从数组中移除假值
const compact = arr => arr.filter(Boolean);
这个代码片段定义了一个名为 compact 的函数，它接受一个数组作为参数，并返回一个新数组，其中所有假值（例如 false、0、null、undefined、NaN）都被移除。
6. 创建一个从 0 到 99 的数组
const createArr = (n) => Array.from(new Array(n), (v, i) => i)
const arr = createArr(100) // 0 - 99
// 或者
const createArr = (n) => new Array(n).fill(0).map((v, i) => i)
createArr(100) // 0 - 99
这个代码片段定义了一个名为 createArr 的函数，它接受一个数字作为参数，并返回一个包含从 0 到该数字（不包括该数字）的所有整数的新数组。
7. 随机打乱数组顺序
const randomSort = list => list.sort(() => Math.random() - 0.5)
这个代码片段定义了一个名为 randomSort 的函数，它接受一个数组作为参数，并返回一个新数组，其中元素的顺序是随机的。
8. 移除数组中所有重复元素，只保留一个
const removeDuplicates = list => [...new Set(list)]
removeDuplicates([0, 0, 2, 4, 5]) // [0,2,4,5]
这个代码片段定义了一个名为 removeDuplicates 的函数，它接受一个数组作为参数，并返回一个新数组，其中每个元素只出现一次。
9. 根据唯一值对数组去重
const duplicateById = list => [...list.reduce((prev, cur) => prev.set(cur.id, cur), new Map()).values()]
duplicateById([{id: 1, name: 'jack'}, {id: 2, name: 'rose'}, {id: 1, name: 'jack'}])
// [{id: 1, name: 'jack'}, {id: 2, name: 'rose'}]
这个代码片段定义了一个名为 duplicateById 的函数，它接受一个数组作为参数，并返回一个新数组，其中每个元素根据 id 属性去重。
10. 找到多个数组的交集
const intersection = (a, ...arr) => [...new Set(a)].filter((v) => arr.every((b) => b.includes(v)))
intersection([1, 2, 3, 4], [2, 3, 4, 7, 8], [1, 3, 4, 9])
// [3, 4]
这个代码片段定义了一个名为 intersection 的函数，它接受多个数组作为参数，并返回一个新数组，其中包含所有数组中都存在的元素。
11. 找到数组中最大值的索引
const indexOfMax = (arr) => arr.reduce((prev, curr, i, a) => (curr > a[prev] ? i : prev), 0);
indexOfMax([1, 3, 9, 7, 5]); // 2
这个代码片段定义了一个名为 indexOfMax 的函数，它接受一个数组作为参数，并返回数组中最大值的索引。
12. 找到数组中最小值的索引
const indexOfMin = (arr) => arr.reduce((prev, curr, i, a) => (curr < a[prev] ? i : prev), 0)
indexOfMin([2, 5, 3, 4, 1, 0, 9]) // 5
这个代码片段定义了一个名为 indexOfMin 的函数，它接受一个数组作为参数，并返回数组中最小值的索引。
13. 找到数组中与给定数字最接近的值
const closest = (arr, n) => arr.reduce((prev, curr) => (Math.abs(curr - n) < Math.abs(prev - n) ? curr : prev))
closest([29, 87, 8, 78, 97, 20, 75, 33, 24, 17], 50) // 33
14. 将多个数组合并成一个新的二维数组
const zip = (...arr) => Array.from({ length: Math.max(...arr.map((a) => a.length)) }, (_, i) => arr.map((a) => a[i]))
zip([1,2,3,4], ['a', 'b', 'c', 'd'], ['A', 'B', 'C', 'D'])
// [[1, 'a', 'A'], [2, 'b', 'B'], [3, 'c', 'C'], [4, 'd', 'D']]
这个代码片段定义了一个名为 zip 的函数，它接受多个数组作为参数，并将它们合并成一个新的二维数组，其中每个子数组包含来自原始数组的对应元素。
15. 转置矩阵的行和列
const transpose = (matrix) => matrix[0].map((col, i) => matrix.map((row) => row[i]));
transpose(
[ // [
[1, 2, 3], // [1, 4, 7],
[4, 5, 6], // [2, 5, 8],
[7, 8, 9], // [3, 6, 9],
] // ]
);
这个代码片段定义了一个名为 transpose 的函数，它接受一个矩阵（二维数组）作为参数，并返回一个新的矩阵，其中行和列被转置。
三：数制转换
16. 将十进制数转换为 n 进制数
const toDecimal = (num, n = 10) => num.toString(n)
// 假设要将数字 10 转换为二进制
toDecimal(10, 2) // '1010'
这个代码片段定义了一个名为 toDecimal 的函数，它接受一个十进制数和一个进制数作为参数，并返回该数转换为指定进制后的字符串。
17. 将 n 进制数转换为十进制数
// 10 的二进制表示为 1010
const toDecimalism = (num, n = 10) => parseInt(num, n)
toDecimalism(1010, 2)
这个代码片段定义了一个名为 toDecimalism 的函数，它接受一个 n 进制数和一个进制数作为参数，并返回该数转换为十进制后的数字。
四：正则表达式
18. 从 URL 中提取域名
const extractDomain = url => url.replace(/^(?:https?:\/\/)?(?:www\.)?/i, "").split('/')[0];
这个代码片段定义了一个名为 extractDomain 的函数，它接受一个 URL 作为参数，并返回该 URL 的域名。
19. 验证电子邮件地址
const validateEmail = email => /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email);
这个代码片段定义了一个名为 validateEmail 的函数，它接受一个电子邮件地址作为参数，并返回一个布尔值，指示该电子邮件地址是否有效。
20. 移除多余空格
// 当需要将文本中的多个空格合并成一个时
const setTrimOut = str => str.replace(/\s\s+/g, ' ')
const str = setTrimOut('hello, jack') //`
这个代码片段定义了一个名为 setTrimOut 的函数，它接受一个字符串作为参数，并返回一个新字符串，其中所有连续的空格都被合并成一个空格。
五：Web
21. 重新加载当前页面
const reload = () => location.reload();
这个代码片段定义了一个名为 reload 的函数，它会重新加载当前页面。
22. 滚动到页面顶部
const goToTop = () => window.scrollTo(0, 0);
这个代码片段定义了一个名为 goToTop 的函数，它会将页面滚动到顶部。
23. 平滑滚动到元素的顶部
const scrollToTop = (element) =>
element.scrollIntoView({ behavior: "smooth", block: "start" })
scrollToTop(document.body)
这个代码片段定义了一个名为 scrollToTop 的函数，它接受一个 DOM 元素作为参数，并将该元素平滑滚动到视窗的顶部。
24. 平滑滚动到元素的底部
const scrollToBottom = (element) =>
element.scrollIntoView({ behavior: "smooth", block: "end" })
scrollToBottom(document.body)
这个代码片段定义了一个名为 scrollToBottom 的函数，它接受一个 DOM 元素作为参数，并将该元素平滑滚动到视窗的底部。
25. 检查当前浏览器是否为 IE
const isIE = !!document.documentMode;
这个代码片段定义了一个名为 isIE 的函数，它会返回一个布尔值，指示当前浏览器是否为 IE。
26. 从文本中移除 HTML
// 当需要过滤掉文本中的所有标签时
const stripHtml = (html) => new DOMParser().parseFromString(html, 'text/html').body.textContent || '';
stripHtml('<div>test</div>') // 'test'
这个代码片段定义了一个名为 stripHtml 的函数，它接受一个 HTML 字符串作为参数，并返回一个新字符串，其中所有 HTML 标签都被移除。
27. 重定向
const goTo = (url) => (location.href = url);
这个代码片段定义了一个名为 goTo 的函数，它接受一个 URL 作为参数，并将浏览器重定向到该 URL。
28. 复制文本
const copy = (text) => navigator.clipboard?.writeText && navigator.clipboard.writeText(text)
这个代码片段定义了一个名为 copy 的函数，它接受一个文本字符串作为参数，并将其复制到剪贴板。
六：日期
29. 判断日期是否为今天
const isToday = (date) => date.toISOString().slice(0, 10) === new Date().toISOString().slice(0, 10)
这个代码片段定义了一个名为 isToday 的函数，它接受一个日期对象作为参数，并返回一个布尔值，指示该日期是否为今天。
30. 将日期转换为 YYYY-MM-DD 格式
const formatYmd = (date) => date.toISOString().slice(0, 10);
formatYmd(new Date())
这个代码片段定义了一个名为 formatYmd 的函数，它接受一个日期对象作为参数，并返回一个字符串，其中包含该日期以 YYYY-MM-DD 格式表示。
31. 将秒数转换为 hh:mm:ss 格式
const formatSeconds = (s) => new Date(s * 1000).toISOString().substr(11, 8)
formatSeconds(200) // 00:03:20
这个代码片段定义了一个名为 formatSeconds 的函数，它接受一个秒数作为参数，并返回一个字符串，其中包含该秒数转换为 hh:mm:ss 格式表示。
32. 获取指定年份的某个月的第一天
const getFirstDate = (d = new Date()) => new Date(d.getFullYear(), d.getMonth(), 1);
这个代码片段定义了一个名为 getFirstDate 的函数，它接受一个日期对象作为参数，并返回一个新的日期对象，表示该日期对象的年份和月份的第一天。
33. 获取指定年份的某个月的最后一天
const getLastDate = (d = new Date()) => new Date(d.getFullYear(), d.getMonth() + 1, 0);
这个代码片段定义了一个名为 getLastDate 的函数，它接受一个日期对象作为参数，并返回一个新的日期对象，表示该日期对象的年份和月份的最后一天。
34. 获取指定年份的某个月的天数
const getDaysNum = (year, month) => new Date(year, month, 0).getDate()
const day = getDaysNum(2024, 2) // 29
这个代码片段定义了一个名为 getDaysNum 的函数，它接受一个年份和一个月份作为参数，并返回该年份的该月份的天数。
七：函数
35.判断函数是否为异步函数
const isAsyncFunction = (v) => Object.prototype.toString.call(v) === '[object AsyncFunction]'
isAsyncFunction(async function () {}); // true
这个代码片段定义了一个名为 isAsyncFunction 的函数，它接受一个函数作为参数，并返回一个布尔值，指示该函数是否为异步函数。
八：数字
36. 截断小数点后的数字，不进行四舍五入
const toFixed = (n, fixed) => `${n}`.match(new RegExp(`^-?\d+(?:.\d{0,${fixed}})?`))[0]
toFixed(10.255, 2) // 10.25
这个代码片段定义了一个名为 toFixed 的函数，它接受一个数字和一个保留小数位数作为参数，并返回一个新的字符串，其中小数点后的数字被截断到指定的位数。
37. 截断小数点后的数字，并进行四舍五入
const round = (n, decimals = 0) => Number(`${Math.round(`${n}e${decimals}`)}e-${decimals}`)
round(10.255, 2) // 10.26
这个代码片段定义了一个名为 round 的函数，它接受一个数字和一个保留小数位数作为参数，并返回一个新的数字，其中小数点后的数字被截断到指定的位数，并进行四舍五入。
38. 在数字前面补零，使其位数达到指定长度
const replenishZero = (num, len, zero = 0) => num.toString().padStart(len, zero)
replenishZero(8, 2) // 08
这个代码片段定义了一个名为 replenishZero 的函数，它接受一个数字、一个长度和一个填充字符作为参数，并在数字前面补零，使其位数达到指定的长度。
九：对象
39. 反转对象的键值对
const invertObject = (obj) => Object.fromEntries(Object.entries(obj).map(([key, value]) => [value, key]));
const statusMessages = { 200: 'OK', 404: 'NotFound', 500: 'InternalServerError' };
const inverted = invertObject(statusMessages);
console.log(inverted); // { 'OK': '200', 'NotFound': '404', 'InternalServerError': '500' }
这个代码片段定义了一个名为 invertObject 的函数，它接受一个对象作为参数，并返回一个新对象，其中所有键值对都被反转。
40. 从对象中移除所有值为 null 或 undefined 的属性
const removeNullUndefined = (obj) => Object.entries(obj).reduce((a, [k, v]) => (v == null ? a : ((a[k] = v), a)), {});
removeNullUndefined({name: '', age: undefined, sex: null}) // { name: '' }
这个代码片段定义了一个名为 removeNullUndefined 的函数，它接受一个对象作为参数，并返回一个新对象，其中所有值为 null 或 undefined 的属性都被移除。
41. 交换对象的键值对
const invert = (obj) => Object.keys(obj).reduce((res, k) => Object.assign(res, { [obj[k]]: k }), {})
invert({name: 'jack'}) // {jack: 'name'}
这个代码片段定义了一个名为 invert 的函数，它接受一个对象作为参数，并返回一个新对象，其中所有键值对都被交换。
42. 将字符串 '{name: "jack"}' 转换为对象
const strParse = (str) => JSON.parse(str.replace(/(\w+)\s*:/g, (_, p1) => `"${p1}":`).replace(/\'/g, "\""))
strParse('{name: "jack"}')
这个代码片段定义了一个名为 strParse 的函数，它接受一个字符串作为参数，并返回一个新对象，其中包含该字符串解析后的键值对。
十：其它
43. 比较两个对象
const isEqual = (...objects) => objects.every(obj => JSON.stringify(obj) === JSON.stringify(objects[0]))
isEqual({name: 'jack'}, {name: 'jack'}) // true
isEqual({name: 'jack'}, {name: 'jack1'}, {name: 'jack'}) // false
这个代码片段定义了一个名为 isEqual 的函数，它接受多个对象作为参数，并返回一个布尔值，指示所有对象是否完全相同。
44. 获取随机颜色
const getRandomColor = () => `#${Math.floor(Math.random() * 0xffffff).toString(16)}`
getRandomColor() // '#4c2fd7'
这个代码片段定义了一个名为 getRandomColor 的函数，它返回一个随机的十六进制颜色代码。
45. 将 RGB 转换为 HEX
const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
这个代码片段定义了一个名为 rgbToHex 的函数，它接受三个 RGB 值作为参数，并返回一个十六进制颜色代码。
46. 将 HEX 转换为 RGB
const hexToRgb = hex => hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (_, r, g, b) => `#${r}${r}${g}${g}${b}${b}`).substring(1).match(/.{2}/g).map((x) => parseInt(x, 16));
hexToRgb('#00ffff'); // [0, 255, 255]
hexToRgb('#0ff'); // [0, 255, 255]
这个代码片段定义了一个名为 hexToRgb 的函数，它接受一个十六进制颜色代码作为参数，并返回一个包含三个 RGB 值的数组。
47. 获取随机 IP 地址
const randomIp = () =>
Array(4)
.fill(0)
.map((_, i) => Math.floor(Math.random() * 255) + (i === 0 ? 1 : 0))
.join('.');
这个代码片段定义了一个名为 randomIp 的函数，它返回一个随机的 IPv4 地址。
48. 生成 UUID
const uuid = (a) => (a ? (a ^ ((Math.random() * 16) >> (a / 4))).toString(16) : ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, uuid))
uuid()
这个代码片段定义了一个名为 uuid 的函数，它返回一个随机生成的 UUID。
49. 获取 Cookie
const getCookie = () => document.cookie
.split(';')
.map((item) => item.split('='))
.reduce((acc, [k, v]) => (acc[k.trim().replace('"', '')] = v) && acc, {})
getCookie()
这个代码片段定义了一个名为 getCookie 的函数，它返回一个包含所有 Cookie 的对象。
50.强制等待
// 当需要等待一段时间，但不想使用 setTimeout 函数，避免出现回调地狱时
const sleep = async (t) => new Promise((resolve) => setTimeout(resolve, t));
sleep(2000).then(() => {console.log('time')});
这个代码片段定义了一个名为 sleep 的函数，它接受一个毫秒数作为参数，并返回一个 Promise 对象，该对象将在指定的时间后解析。
总结
这些代码片段涵盖了各种 JavaScript 的常见操作，从字符串操作和数组操作，到数字转换、日期处理、Web 操作和一些其他实用功能。它们可以帮助你快速完成各种任务，提高代码的效率和可读性。
