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
  • 强制等待

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

一:字符串操作

  1. 将字符串首字母大写

    javascript 复制代码
    const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1);

    这个代码片段定义了一个名为 capitalize 的函数,它接受一个字符串作为参数,并返回一个新字符串,其中第一个字母被大写,其余字母保持不变。

  2. 反转字符串

    javascript 复制代码
    const reverseString = str => str.split('').reverse().join('');

    这个代码片段定义了一个名为 reverseString 的函数,它接受一个字符串作为参数,并返回一个新字符串,其中所有字符的顺序被反转。

  3. 检查字符串是否为回文

    javascript 复制代码
    const isPalindrome = str => str === str.split('').reverse().join('');

    这个代码片段定义了一个名为 isPalindrome 的函数,它接受一个字符串作为参数,并返回一个布尔值,指示该字符串是否为回文(正着读和反着读都一样)。

二:数组

  1. 将数组扁平化一层

    javascript 复制代码
    const flatten = arr => arr.reduce((a, v) => a.concat(v), []);

    这个代码片段定义了一个名为 flatten 的函数,它接受一个数组作为参数,并返回一个新数组,其中所有嵌套在第一层的子数组都被扁平化到顶层数组中。

  2. 从数组中移除假值

    javascript 复制代码
    const compact = arr => arr.filter(Boolean);

    这个代码片段定义了一个名为 compact 的函数,它接受一个数组作为参数,并返回一个新数组,其中所有假值(例如 false0nullundefinedNaN)都被移除。

  3. 创建一个从 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 到该数字(不包括该数字)的所有整数的新数组。

  4. 随机打乱数组顺序

    javascript 复制代码
    const randomSort = list => list.sort(() => Math.random() - 0.5)

    这个代码片段定义了一个名为 randomSort 的函数,它接受一个数组作为参数,并返回一个新数组,其中元素的顺序是随机的。

  5. 移除数组中所有重复元素,只保留一个

    javascript 复制代码
    const removeDuplicates = list => [...new Set(list)]
    removeDuplicates([0, 0, 2, 4, 5]) // [0,2,4,5]

    这个代码片段定义了一个名为 removeDuplicates 的函数,它接受一个数组作为参数,并返回一个新数组,其中每个元素只出现一次。

  6. 根据唯一值对数组去重

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

  7. 找到多个数组的交集

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

  1. 找到数组中最大值的索引
javascript 复制代码
const indexOfMax = (arr) => arr.reduce((prev, curr, i, a) => (curr > a[prev] ? i : prev), 0);
indexOfMax([1, 3, 9, 7, 5]); // 2

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

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

  1. 找到数组中与给定数字最接近的值
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 的函数,它接受一个数组和一个数字作为参数,并返回数组中与给定数字最接近的值。

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

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

三:数制转换

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

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

  1. 将 n 进制数转换为十进制数
javascript 复制代码
// 10 的二进制表示为 1010
const toDecimalism = (num, n = 10) => parseInt(num, n)
toDecimalism(1010, 2)

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

四:正则表达式

  1. 从 URL 中提取域名
javascript 复制代码
const extractDomain = url => url.replace(/^(?:https?:\/\/)?(?:www\.)?/i, "").split('/')[0];

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

  1. 验证电子邮件地址
javascript 复制代码
const validateEmail = email => /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email);

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

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

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

五:Web

  1. 重新加载当前页面
javascript 复制代码
const reload = () => location.reload();

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

  1. 滚动到页面顶部
javascript 复制代码
const goToTop = () => window.scrollTo(0, 0);

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

  1. 平滑滚动到元素的顶部
javascript 复制代码
const scrollToTop = (element) =>
  element.scrollIntoView({ behavior: "smooth", block: "start" })

scrollToTop(document.body)

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

  1. 平滑滚动到元素的底部
javascript 复制代码
const scrollToBottom = (element) =>
  element.scrollIntoView({ behavior: "smooth", block: "end" })

scrollToBottom(document.body)

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

  1. 检查当前浏览器是否为 IE
javascript 复制代码
const isIE = !!document.documentMode;

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

  1. 从文本中移除 HTML
javascript 复制代码
// 当需要过滤掉文本中的所有标签时
const stripHtml = (html) => new DOMParser().parseFromString(html, 'text/html').body.textContent || '';

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

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

  1. 重定向
javascript 复制代码
const goTo = (url) => (location.href = url);

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

  1. 复制文本
javascript 复制代码
const copy = (text) => navigator.clipboard?.writeText && navigator.clipboard.writeText(text)

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

六:日期

  1. 判断日期是否为今天
javascript 复制代码
const isToday = (date) => date.toISOString().slice(0, 10) === new Date().toISOString().slice(0, 10)

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

  1. 将日期转换为 YYYY-MM-DD 格式
javascript 复制代码
const formatYmd = (date) => date.toISOString().slice(0, 10);
formatYmd(new Date())

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

  1. 将秒数转换为 hh:mm:ss 格式
javascript 复制代码
const formatSeconds = (s) => new Date(s * 1000).toISOString().substr(11, 8)
formatSeconds(200) // 00:03:20

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

  1. 获取指定年份的某个月的第一天
javascript 复制代码
const getFirstDate = (d = new Date()) => new Date(d.getFullYear(), d.getMonth(), 1);

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

  1. 获取指定年份的某个月的最后一天
javascript 复制代码
const getLastDate = (d = new Date()) => new Date(d.getFullYear(), d.getMonth() + 1, 0);

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

  1. 获取指定年份的某个月的天数
javascript 复制代码
const getDaysNum = (year, month) => new Date(year, month, 0).getDate()
const day = getDaysNum(2024, 2) // 29

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

七:函数

  1. 判断函数是否为异步函数
javascript 复制代码
const isAsyncFunction = (v) => Object.prototype.toString.call(v) === '[object AsyncFunction]'
isAsyncFunction(async function () {}); // true

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

八:数字

  1. 截断小数点后的数字,不进行四舍五入
javascript 复制代码
const toFixed = (n, fixed) => `${n}`.match(new RegExp(`^-?\d+(?:.\d{0,${fixed}})?`))[0]
toFixed(10.255, 2) // 10.25

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

  1. 截断小数点后的数字,并进行四舍五入
javascript 复制代码
const round = (n, decimals = 0) => Number(`${Math.round(`${n}e${decimals}`)}e-${decimals}`)
round(10.255, 2) // 10.26

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

  1. 在数字前面补零,使其位数达到指定长度
javascript 复制代码
const replenishZero = (num, len, zero = 0) => num.toString().padStart(len, zero)
replenishZero(8, 2) // 08

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

九:对象

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

  1. 从对象中移除所有值为 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 的属性都被移除。

  1. 交换对象的键值对
javascript 复制代码
const invert = (obj) => Object.keys(obj).reduce((res, k) => Object.assign(res, { [obj[k]]: k }), {})
invert({name: 'jack'}) // {jack: 'name'}

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

  1. 将字符串 '{name: "jack"}' 转换为对象
javascript 复制代码
const strParse = (str) => JSON.parse(str.replace(/(\w+)\s*:/g, (_, p1) => `"${p1}":`).replace(/\'/g, "\""))
strParse('{name: "jack"}')

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

十:其它

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

  1. 获取随机颜色
javascript 复制代码
const getRandomColor = () => `#${Math.floor(Math.random() * 0xffffff).toString(16)}`
getRandomColor() // '#4c2fd7'

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

  1. 将 RGB 转换为 HEX
javascript 复制代码
const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);

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

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

  1. 获取随机 IP 地址
javascript 复制代码
const randomIp = () =>
    Array(4)
        .fill(0)
        .map((_, i) => Math.floor(Math.random() * 255) + (i === 0 ? 1 : 0))
        .join('.');

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

  1. 生成 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。

  1. 获取 Cookie
javascript 复制代码
const getCookie = () => document.cookie
    .split(';')
    .map((item) => item.split('='))
    .reduce((acc, [k, v]) => (acc[k.trim().replace('"', '')] = v) && acc, {})
getCookie()

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

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

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

总结

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

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

相关推荐
别拿曾经看以后~几秒前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死3 分钟前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试6 分钟前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
科技探秘人15 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人15 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR21 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香23 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969326 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai31 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
problc35 分钟前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter