JavaScript 单行代码速查表：50 个常用片段，收藏备用！

作为一名程序员，你一定遇到过很多重复性工作，需要编写大量的代码来完成一些简单的任务。为了帮助你提升开发效率，我整理了 50 个实用 JavaScript 代码片段，涵盖字符串、数组、日期、数字、对象、Web 操作等多个方面。这些代码片段简洁易懂，可以直接复制粘贴到你的项目中使用，帮你节省时间，提高代码质量。

一：字符串操作

将字符串首字母大写
反转字符串
检查字符串是否为回文

二：数组操作

将数组扁平化一层
从数组中移除假值
创建一个从 0 到 99 的数组
随机打乱数组顺序
移除数组中所有重复元素，只保留一个
根据唯一值对数组去重
找到多个数组的交集
找到数组中最大值的索引
找到数组中最小值的索引
找到数组中与给定数字最接近的值
将多个数组合并成一个新的二维数组
转置矩阵的行和列

三：数制转换

将十进制数转换为 n 进制数
将 n 进制数转换为十进制数

四：正则表达式

从 URL 中提取域名
验证电子邮件地址
移除多余空格

五：Web 操作

重新加载当前页面
滚动到页面顶部
平滑滚动到元素的开头/末尾
检查当前浏览器是否为 IE
从文本中移除 HTML
重定向
复制文本

六：日期处理

判断日期是否为今天
将日期转换为 YYYY-MM-DD 格式
将秒数转换为 hh:mm:ss 格式
获取指定年份的某个月的第一天/最后一天
获取指定年份的某个月的天数

七：函数操作

判断函数是否为异步函数

八：数字操作

截断小数点后的数字，不进行舍入
截断小数点后的数字，并进行舍入
在数字前面补零，使其位数达到指定长度

九：对象操作

反转对象键和值
从对象中移除所有值为 null 或 undefined 的属性
交换对象的键值对
将字符串 '{name: "jack"}' 转换为对象

十：其他常用功能

比较两个对象
获取随机颜色
将 RGB 转换为 HEX
将 HEX 转换为 RGB
获取随机 IP
生成 UUID
获取 Cookie
强制等待

让我们一起探索这些代码片段，提升开发效率吧！

一：字符串操作

将字符串首字母大写
javascript 复制代码
```
const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1);
```
这个代码片段定义了一个名为 capitalize 的函数，它接受一个字符串作为参数，并返回一个新字符串，其中第一个字母被大写，其余字母保持不变。
反转字符串
javascript 复制代码
```
const reverseString = str => str.split('').reverse().join('');
```
这个代码片段定义了一个名为 reverseString 的函数，它接受一个字符串作为参数，并返回一个新字符串，其中所有字符的顺序被反转。
检查字符串是否为回文
javascript 复制代码
```
const isPalindrome = str => str === str.split('').reverse().join('');
```
这个代码片段定义了一个名为 isPalindrome 的函数，它接受一个字符串作为参数，并返回一个布尔值，指示该字符串是否为回文（正着读和反着读都一样）。

二：数组

将数组扁平化一层
javascript 复制代码
```
const flatten = arr => arr.reduce((a, v) => a.concat(v), []);
```
这个代码片段定义了一个名为 flatten 的函数，它接受一个数组作为参数，并返回一个新数组，其中所有嵌套在第一层的子数组都被扁平化到顶层数组中。
从数组中移除假值
javascript 复制代码
```
const compact = arr => arr.filter(Boolean);
```
这个代码片段定义了一个名为 compact 的函数，它接受一个数组作为参数，并返回一个新数组，其中所有假值（例如 false、0、null、undefined、NaN）都被移除。
创建一个从 0 到 99 的数组
javascript 复制代码
```
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 到该数字（不包括该数字）的所有整数的新数组。
随机打乱数组顺序
javascript 复制代码
```
const randomSort = list => list.sort(() => Math.random() - 0.5)
```
这个代码片段定义了一个名为 randomSort 的函数，它接受一个数组作为参数，并返回一个新数组，其中元素的顺序是随机的。
移除数组中所有重复元素，只保留一个
javascript 复制代码
```
const removeDuplicates = list => [...new Set(list)]
removeDuplicates([0, 0, 2, 4, 5]) // [0,2,4,5]
```
这个代码片段定义了一个名为 removeDuplicates 的函数，它接受一个数组作为参数，并返回一个新数组，其中每个元素只出现一次。

根据唯一值对数组去重

javascript 复制代码

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 属性去重。

找到多个数组的交集

javascript 复制代码

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 的函数，它接受多个数组作为参数，并返回一个新数组，其中包含所有数组中都存在的元素。

找到数组中最大值的索引

javascript 复制代码

const indexOfMax = (arr) => arr.reduce((prev, curr, i, a) => (curr > a[prev] ? i : prev), 0);
indexOfMax([1, 3, 9, 7, 5]); // 2

这个代码片段定义了一个名为 indexOfMax 的函数，它接受一个数组作为参数，并返回数组中最大值的索引。

找到数组中最小值的索引

javascript 复制代码

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 的函数，它接受一个数组作为参数，并返回数组中最小值的索引。

找到数组中与给定数字最接近的值

javascript 复制代码

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

这个代码片段定义了一个名为 closest 的函数，它接受一个数组和一个数字作为参数，并返回数组中与给定数字最接近的值。

将多个数组合并成一个新的二维数组

javascript 复制代码

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 的函数，它接受多个数组作为参数，并将它们合并成一个新的二维数组，其中每个子数组包含来自原始数组的对应元素。

转置矩阵的行和列

javascript 复制代码

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 的函数，它接受一个矩阵（二维数组）作为参数，并返回一个新的矩阵，其中行和列被转置。

三：数制转换

将十进制数转换为 n 进制数

javascript 复制代码

const toDecimal = (num, n = 10) => num.toString(n)
// 假设要将数字 10 转换为二进制
toDecimal(10, 2) // '1010'

这个代码片段定义了一个名为 toDecimal 的函数，它接受一个十进制数和一个进制数作为参数，并返回该数转换为指定进制后的字符串。

将 n 进制数转换为十进制数

javascript 复制代码

// 10 的二进制表示为 1010
const toDecimalism = (num, n = 10) => parseInt(num, n)
toDecimalism(1010, 2)

这个代码片段定义了一个名为 toDecimalism 的函数，它接受一个 n 进制数和一个进制数作为参数，并返回该数转换为十进制后的数字。

四：正则表达式

从 URL 中提取域名

javascript 复制代码

const extractDomain = url => url.replace(/^(?:https?:\/\/)?(?:www\.)?/i, "").split('/')[0];

这个代码片段定义了一个名为 extractDomain 的函数，它接受一个 URL 作为参数，并返回该 URL 的域名。

验证电子邮件地址

javascript 复制代码

const validateEmail = email => /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email);

这个代码片段定义了一个名为 validateEmail 的函数，它接受一个电子邮件地址作为参数，并返回一个布尔值，指示该电子邮件地址是否有效。

移除多余空格

javascript 复制代码

// 当需要将文本中的多个空格合并成一个时
const setTrimOut = str => str.replace(/\s\s+/g, ' ')
const str = setTrimOut('hello,   jack') //`

这个代码片段定义了一个名为 setTrimOut 的函数，它接受一个字符串作为参数，并返回一个新字符串，其中所有连续的空格都被合并成一个空格。

五：Web

重新加载当前页面

javascript 复制代码

const reload = () => location.reload();

这个代码片段定义了一个名为 reload 的函数，它会重新加载当前页面。

滚动到页面顶部

javascript 复制代码

const goToTop = () => window.scrollTo(0, 0);

这个代码片段定义了一个名为 goToTop 的函数，它会将页面滚动到顶部。

平滑滚动到元素的顶部

javascript 复制代码

const scrollToTop = (element) =>
  element.scrollIntoView({ behavior: "smooth", block: "start" })

scrollToTop(document.body)

这个代码片段定义了一个名为 scrollToTop 的函数，它接受一个 DOM 元素作为参数，并将该元素平滑滚动到视窗的顶部。

平滑滚动到元素的底部

javascript 复制代码

const scrollToBottom = (element) =>
  element.scrollIntoView({ behavior: "smooth", block: "end" })

scrollToBottom(document.body)

这个代码片段定义了一个名为 scrollToBottom 的函数，它接受一个 DOM 元素作为参数，并将该元素平滑滚动到视窗的底部。

检查当前浏览器是否为 IE

javascript 复制代码

const isIE = !!document.documentMode;

这个代码片段定义了一个名为 isIE 的函数，它会返回一个布尔值，指示当前浏览器是否为 IE。

从文本中移除 HTML

javascript 复制代码

// 当需要过滤掉文本中的所有标签时
const stripHtml = (html) => new DOMParser().parseFromString(html, 'text/html').body.textContent || '';

stripHtml('<div>test</div>') // 'test'

这个代码片段定义了一个名为 stripHtml 的函数，它接受一个 HTML 字符串作为参数，并返回一个新字符串，其中所有 HTML 标签都被移除。

重定向

javascript 复制代码

const goTo = (url) => (location.href = url);

这个代码片段定义了一个名为 goTo 的函数，它接受一个 URL 作为参数，并将浏览器重定向到该 URL。

复制文本

javascript 复制代码

const copy = (text) => navigator.clipboard?.writeText && navigator.clipboard.writeText(text)

这个代码片段定义了一个名为 copy 的函数，它接受一个文本字符串作为参数，并将其复制到剪贴板。

六：日期

判断日期是否为今天

javascript 复制代码

const isToday = (date) => date.toISOString().slice(0, 10) === new Date().toISOString().slice(0, 10)

这个代码片段定义了一个名为 isToday 的函数，它接受一个日期对象作为参数，并返回一个布尔值，指示该日期是否为今天。

将日期转换为 YYYY-MM-DD 格式

javascript 复制代码

const formatYmd = (date) => date.toISOString().slice(0, 10);
formatYmd(new Date())

这个代码片段定义了一个名为 formatYmd 的函数，它接受一个日期对象作为参数，并返回一个字符串，其中包含该日期以 YYYY-MM-DD 格式表示。

将秒数转换为 hh:mm:ss 格式

javascript 复制代码

const formatSeconds = (s) => new Date(s * 1000).toISOString().substr(11, 8)
formatSeconds(200) // 00:03:20

这个代码片段定义了一个名为 formatSeconds 的函数，它接受一个秒数作为参数，并返回一个字符串，其中包含该秒数转换为 hh:mm:ss 格式表示。

获取指定年份的某个月的第一天

javascript 复制代码

const getFirstDate = (d = new Date()) => new Date(d.getFullYear(), d.getMonth(), 1);

这个代码片段定义了一个名为 getFirstDate 的函数，它接受一个日期对象作为参数，并返回一个新的日期对象，表示该日期对象的年份和月份的第一天。

获取指定年份的某个月的最后一天

javascript 复制代码

const getLastDate = (d = new Date()) => new Date(d.getFullYear(), d.getMonth() + 1, 0);

这个代码片段定义了一个名为 getLastDate 的函数，它接受一个日期对象作为参数，并返回一个新的日期对象，表示该日期对象的年份和月份的最后一天。

获取指定年份的某个月的天数

javascript 复制代码

const getDaysNum = (year, month) => new Date(year, month, 0).getDate()
const day = getDaysNum(2024, 2) // 29

这个代码片段定义了一个名为 getDaysNum 的函数，它接受一个年份和一个月份作为参数，并返回该年份的该月份的天数。

七：函数

判断函数是否为异步函数

javascript 复制代码

const isAsyncFunction = (v) => Object.prototype.toString.call(v) === '[object AsyncFunction]'
isAsyncFunction(async function () {}); // true

这个代码片段定义了一个名为 isAsyncFunction 的函数，它接受一个函数作为参数，并返回一个布尔值，指示该函数是否为异步函数。

八：数字

截断小数点后的数字，不进行四舍五入

javascript 复制代码

const toFixed = (n, fixed) => `${n}`.match(new RegExp(`^-?\d+(?:.\d{0,${fixed}})?`))[0]
toFixed(10.255, 2) // 10.25

这个代码片段定义了一个名为 toFixed 的函数，它接受一个数字和一个保留小数位数作为参数，并返回一个新的字符串，其中小数点后的数字被截断到指定的位数。

截断小数点后的数字，并进行四舍五入

javascript 复制代码

const round = (n, decimals = 0) => Number(`${Math.round(`${n}e${decimals}`)}e-${decimals}`)
round(10.255, 2) // 10.26

这个代码片段定义了一个名为 round 的函数，它接受一个数字和一个保留小数位数作为参数，并返回一个新的数字，其中小数点后的数字被截断到指定的位数，并进行四舍五入。

在数字前面补零，使其位数达到指定长度

javascript 复制代码

const replenishZero = (num, len, zero = 0) => num.toString().padStart(len, zero)
replenishZero(8, 2) // 08

这个代码片段定义了一个名为 replenishZero 的函数，它接受一个数字、一个长度和一个填充字符作为参数，并在数字前面补零，使其位数达到指定的长度。

九：对象

反转对象的键值对

javascript 复制代码

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 的函数，它接受一个对象作为参数，并返回一个新对象，其中所有键值对都被反转。

从对象中移除所有值为 null 或 undefined 的属性

javascript 复制代码

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 的属性都被移除。

交换对象的键值对

javascript 复制代码

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

这个代码片段定义了一个名为 invert 的函数，它接受一个对象作为参数，并返回一个新对象，其中所有键值对都被交换。

将字符串 '{name: "jack"}' 转换为对象

javascript 复制代码

const strParse = (str) => JSON.parse(str.replace(/(\w+)\s*:/g, (_, p1) => `"${p1}":`).replace(/\'/g, "\""))
strParse('{name: "jack"}')

这个代码片段定义了一个名为 strParse 的函数，它接受一个字符串作为参数，并返回一个新对象，其中包含该字符串解析后的键值对。

十：其它

比较两个对象

javascript 复制代码

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 的函数，它接受多个对象作为参数，并返回一个布尔值，指示所有对象是否完全相同。

获取随机颜色

javascript 复制代码

const getRandomColor = () => `#${Math.floor(Math.random() * 0xffffff).toString(16)}`
getRandomColor() // '#4c2fd7'

这个代码片段定义了一个名为 getRandomColor 的函数，它返回一个随机的十六进制颜色代码。

将 RGB 转换为 HEX

javascript 复制代码

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

这个代码片段定义了一个名为 rgbToHex 的函数，它接受三个 RGB 值作为参数，并返回一个十六进制颜色代码。

将 HEX 转换为 RGB

javascript 复制代码

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 值的数组。

获取随机 IP 地址

javascript 复制代码

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

这个代码片段定义了一个名为 randomIp 的函数，它返回一个随机的 IPv4 地址。

生成 UUID

javascript 复制代码

const uuid = (a) => (a ? (a ^ ((Math.random() * 16) >> (a / 4))).toString(16) : ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, uuid))
uuid()

这个代码片段定义了一个名为 uuid 的函数，它返回一个随机生成的 UUID。

获取 Cookie

javascript 复制代码

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

这个代码片段定义了一个名为 getCookie 的函数，它返回一个包含所有 Cookie 的对象。

强制等待

javascript 复制代码

// 当需要等待一段时间，但不想使用 setTimeout 函数，避免出现回调地狱时
const sleep = async (t) => new Promise((resolve) => setTimeout(resolve, t));
sleep(2000).then(() => {console.log('time')});

这个代码片段定义了一个名为 sleep 的函数，它接受一个毫秒数作为参数，并返回一个 Promise 对象，该对象将在指定的时间后解析。

总结

这些代码片段涵盖了各种 JavaScript 的常见操作，从字符串操作和数组操作，到数字转换、日期处理、Web 操作和一些其他实用功能。它们可以帮助你快速完成各种任务，提高代码的效率和可读性。

最后，如果本文的内容对你有启发，帮我点个赞加收藏，关注一波，分享出去，也许你的转发能给别人带来一点帮助。