作为一名程序员,你一定遇到过很多重复性工作,需要编写大量的代码来完成一些简单的任务。为了帮助你提升开发效率,我整理了 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
- 强制等待
让我们一起探索这些代码片段,提升开发效率吧!
一:字符串操作
-
将字符串首字母大写
javascriptconst capitalize = str => str.charAt(0).toUpperCase() + str.slice(1);
这个代码片段定义了一个名为
capitalize
的函数,它接受一个字符串作为参数,并返回一个新字符串,其中第一个字母被大写,其余字母保持不变。 -
反转字符串
javascriptconst reverseString = str => str.split('').reverse().join('');
这个代码片段定义了一个名为
reverseString
的函数,它接受一个字符串作为参数,并返回一个新字符串,其中所有字符的顺序被反转。 -
检查字符串是否为回文
javascriptconst isPalindrome = str => str === str.split('').reverse().join('');
这个代码片段定义了一个名为
isPalindrome
的函数,它接受一个字符串作为参数,并返回一个布尔值,指示该字符串是否为回文(正着读和反着读都一样)。
二:数组
-
将数组扁平化一层
javascriptconst flatten = arr => arr.reduce((a, v) => a.concat(v), []);
这个代码片段定义了一个名为
flatten
的函数,它接受一个数组作为参数,并返回一个新数组,其中所有嵌套在第一层的子数组都被扁平化到顶层数组中。 -
从数组中移除假值
javascriptconst compact = arr => arr.filter(Boolean);
这个代码片段定义了一个名为
compact
的函数,它接受一个数组作为参数,并返回一个新数组,其中所有假值(例如false
、0
、null
、undefined
、NaN
)都被移除。 -
创建一个从 0 到 99 的数组
javascriptconst 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 到该数字(不包括该数字)的所有整数的新数组。 -
随机打乱数组顺序
javascriptconst randomSort = list => list.sort(() => Math.random() - 0.5)
这个代码片段定义了一个名为
randomSort
的函数,它接受一个数组作为参数,并返回一个新数组,其中元素的顺序是随机的。 -
移除数组中所有重复元素,只保留一个
javascriptconst removeDuplicates = list => [...new Set(list)] removeDuplicates([0, 0, 2, 4, 5]) // [0,2,4,5]
这个代码片段定义了一个名为
removeDuplicates
的函数,它接受一个数组作为参数,并返回一个新数组,其中每个元素只出现一次。 -
根据唯一值对数组去重
javascriptconst 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 操作和一些其他实用功能。它们可以帮助你快速完成各种任务,提高代码的效率和可读性。
最后,如果本文的内容对你有启发,帮我点个赞加收藏,关注一波,分享出去,也许你的转发能给别人带来一点帮助。