实用的 JavaScript 单行函数

vienceTang
1,995 阅读2分钟

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

本文已参与 「掘力星计划」 ，赢取创作大礼包，挑战创作激励金。

A journey of a thousand miles begins with single step

本文整理了一些实用的 JavaScript 单行函数，特别好用，能让你更快的完成工作，抽出更多的时间陪你的女朋友。话不多说，我们开始吧！

时间和日期

  • 检查日期是否合法

    const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf())
console.log(isDateValid("December 17, 1995 03:24:00"))
// true

  • 检查日期是否为周末

    const isWeekend = (date) => [0, 6].indexOf(date.getDay()) !== -1
console.log(isWeekend(new Date(2021, 5, 21))) //false
console.log(isWeekend(new Date(2021, 5, 20))) //true
// 当前日期为2021.6.21 周一

  • 查找日期位于一年中的第几天

    const dayOfYear = (date) => Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24)
// 三个参数输入具体日期 月份要减一
console.log(dayOfYear(new Date(2021, 8, 29)))
console.log(dayOfYear(new Date("2021-9-29")))
console.log(dayOfYear(new Date()))
// 272
// 272
// 272

  • 计算2个日期之间相差多少天

    const dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000)
console.log(dayDif(new Date("2021-10-1"), new Date("2021-9-30")))
// 1

  • 时间处理

    const timeFromDate = date => date.toTimeString().slice(0, 8)
console.log(timeFromDate(new Date()))
console.log(timeFromDate(new Date(2021, 0, 10, 17, 30, 0)))
// 14:23:36
// 17:30:00

数字

  • 检查数字是偶数还是奇数

    const isEven = (num) => num % 2 === 0
console.log(isEven(5))
// false

  • 多个数字的平均值

    const average = (...args) => args.reduce((a, b) => a + b) / args.length
console.log(average(1, 2, 3, 4, 5))
// 3

  • 两个数字之间生成一个随机数

    const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)
console.log(random(1, 50))
// could be anything from 1 - 50

字符串

  • 翻转字符串

    const reverse = str => str.split('').reverse().join('')
console.log(reverse('hello world'))
// dlrow olleh

  • 首字母大写字符串

    const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1)
console.log(capitalize('hello world'))

  • 在结尾处截断字符串

    const truncateString = (string, length) => {
  return string.length < length ? string : `${string.slice(0, length - 3)}...`
}
console.log(truncateString('Hi, I should be truncated because I am too loooong!', 36))
// Hi, I should be truncated because...

  • 从中间截断字符串

    // 该函数将一个字符串作为第一个参数，然后将我们需要的字符串大小作为第二个参数，然后从第3个和第4个参数开始和结束需要多少个字符
const truncateStringMiddle = (string, length, start, end) => {
  return `${string.slice(0, start)}...${string.slice(string.length - end)}`
}
console.log(truncateStringMiddle(
  'A long story goes here but then eventually ends!', // string
  25, // 需要的字符串大小
  13, // 从原始字符串第几位开始截取
  17, // 从原始字符串第几位停止截取
))
// A long story ... eventually ends!

  • 生成随机字符串(唯一ID)

    const randomString = () => Math.random().toString(36).slice(2)
console.log(randomString())
// could be anything

数组

  • 获取数组中的唯一值(数组去重)

    const uniqueArr = arr => ([...new Set(arr)])
console.log(uniqueArr([1, 2, 3, 1, 2, 3, 4, 5]))
// [ 1, 2, 3, 4, 5 ]

  • 检查变量是否为数组

    const isArray = (arr) => Array.isArray(arr)
console.log(isArray([1, 2, 3]))
// true
console.log(isArray({name:'Ovi'}))
// false
console.log(isArray('Hello World'))
// false

  • 打乱数组

    const shuffleArray = (arr) => arr.sort(() => 0.5 - Math.random())
console.log(shuffleArray([1, 2, 3, 4]))
// [ 1, 3, 2, 4 ]

  • 校验数组是否为空

    const isNotEmpty = arr => Array.isArray(arr) && arr.length > 0
console.log(isNotEmpty([1, 2, 3]))
// true

  • 合并多个数组的不同方法

    // PS：我们也可以使用“设置”对象从最终数组中复制任何内容。
// ① concat()
// ② ...
const merge = (a, b) => a.concat(b)
const merge = (a, b) => [...a, ...b]
const merge = [...new Set(a.concat(b))]
const merge = [...new Set([...a, ...b])]

布尔值

  • 随机获取布尔值

    const getRandomBoolean = () => Math.random() >= 0.5 
console.log(getRandomBoolean())
// true/false

  • 切换布尔

    // bool is stored somewhere in the upperscope
const toggleBool = () => (bool = !bool)
//or
const toggleBool = b => !b
console.log(toggleBool(true))
// false

变量交换

  • 交换两个变量(分号必须有)

    let foo = 'foo';
let bar = 'bar';
[foo, bar] = [bar, foo]
console.log([foo, bar])

短路

  • Longhand

    let str = 'str'
if (str !== null || str !== undefined || str !== '') {
  let fullName = str
}

  • Shorthand

    const fullName = str ||  buddy

获取 JavaScript 语言的实际类型

  • 方法 A

    const trueTypeOf = (obj) => {
  return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
}
console.log(trueTypeOf(''))
// string
console.log(trueTypeOf(0))
// number
console.log(trueTypeOf())
// undefined
console.log(trueTypeOf(null))
// null
console.log(trueTypeOf({}))
// object
console.log(trueTypeOf([]))
// array
console.log(trueTypeOf(0))
// number
console.log(trueTypeOf(() => {}))
// function

  • 方法 B

    var a = () => {}
 function getType(params) {
   let type = typeof(params)
   if (type !== 'object') {
     return type
   }
   return Object.prototype.toString.call(params).replace(/^\[object (\S+)\]$/, '$1')
 }
 console.log(getType(a))
// function

颜色

  • 颜色RGB转十六进制

    const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
console.log(rgbToHex(255, 255, 255))
// #ffffff

  • 生成随机十六进制颜色

    const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`
console.log(randomHex())
// #680244

Cookie

  • 获取浏览器Cookie的值

    const cookie = name => `; ${document.cookie}`.split(`; ${name}=`).pop().split(';').shift()
XXX为key
console.log(cookie('XXX'))

  • 清除全部Cookie

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

从 URL 获取查询参数

  • 方法 A

    const getParameters = (URL) => {
  URL = JSON.parse(
    '{"' +
      decodeURI(URL.split("?")[1])
        .replace(/"/g, '\\"')
        .replace(/&/g, '","')
        .replace(/=/g, '":"') +
      '"}'
  )
  return JSON.stringify(URL)
}
getParameters(window.location)

  • 方法 B

    Object.fromEntries(new URLSearchParams(window.location.search))

移动端

  • 检查用户是否在Apple设备上

    const isAppleDevice = () => /Mac|iPod|iPhone|iPad/.test(navigator.platform)
console.log(isAppleDevice)
// true/false

  • 检查用户的设备是否处于黑暗模式

    const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
console.log(isDarkMode)
// true/false

其他

  • 滚动到页面顶部

    const scrollToTop = () => window.scrollTo(0, 0)
scrollToTop()

  • 将文字复制到剪贴板

    // 你可能需要添加检查以查看是否存在navigator.clipboard.writeText
const copyTextToClipboard = async (text) => {
  await navigator.clipboard.writeText(text)
}

  • 获取用户选择的文本

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

  • 检查当前选项卡是否在视图/焦点内

    const isTabInView = () => !document.hidden  // Not hidden
isTabInView()
// true/false
avatar
文章
阅读
粉丝