文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

18 个基本 JavaScript 方法代码片段

2024-11-29 21:49

关注

这些代码片段都有固定的实现,方便开发,今天我们来了解一下7个常用的代码片段。

1、函数节流


function throttle(callback: Function, delay: number) {
   let timer: number | null
   return function () {
     if (timer) return
     const args = arguments //Use closure to save parameter array
     timer = setTimeout(() => {
       callback.apply(null, args)
       timer = null
     }, delay)
   }
}

2、URL 解码和编码


function encodeURL(url: string, isComponent = true): string {
   return isComponent ? encodeURIComponent(url) : encodeURI(url)
}



function decodeURL(url: string, isComponent = true): string {
   return isComponent ? decodeURIComponent(url) : decodeURI(url)
}

3、使用JavaScript 获取全局 CSS 变量


function getCssVariableValue(cssVariableName: string): string {
   return getComputedStyle(document.documentElement).getPropertyValue(cssVariableName)
}

4、使用 JS 设置全局 CSS 变量


function setCssVariableValue(cssVariableName: string, cssVariableValue: string): void {
   document.documentElement.style.setProperty(cssVariableName, cssVariableValue)
}

5、清除所有 cookies 


function clearCookie(): void {
   const keyList = document.cookie.match(/[^ =;]+(?=\=)/g) as string[] | null
   keyList && keyList.forEach(key => (document.cookie = `${key}=0;path=/;expires=${new Date(0).toUTCString()}`))
}

6、清除所有项目缓存


function clearCache(): void {
  window.localStorage.clear()
  window.sessionStorage.clear()
  const keyList = document.cookie.match(/[^ =;]+(?=\=)/g) as string[] | null
  keyList && keyList.forEach(key => (document.cookie = `${key}=0;path=/;expires=${new Date(0).toUTCString()}`))
}

7、通过名称获取 URL 查询参数 


function getQueryByName(key, url = window.location.href) {
   const queryNameRegExp = new RegExp(`[?&]${key}=([^&]*)(?:&|$)`)
   const queryNameMatch = url.match(queryNameRegExp)
   return queryNameMatch ? decodeURIComponent(queryNameMatch[1]) : null
}

8、登录页面时间前缀


function timeFix(): string {
   const time = new Date()
   const hour = time.getHours()
   return hour < 9 ? 'Good morning' : hour <= 11 ? 'Good morning' : hour <= 13 ? 'Good afternoon' : hour < 20 ? 'Good afternoon' : 'Good evening'
}

9、登录页面上的欢迎信息


function welcome(): string {
   const list = ['Long time no see, I miss you so much! ', 'Wait until the stars go to sleep before I miss you', 'We are open today']
   return list[Math.floor(Math.random() * list.length)]
}

10、递归深层复制


function deepClone(source: any): any {
   if (!source || typeof source !== 'object') return source
   if (source instanceof Date) return new Date(source)
   if (source instanceof RegExp) return new RegExp(source)
   const target = Array.isArray(source) ? ([] as Record) : ({} as Record)
   for (const key in source) target[key] = typeof source[key] === 'object' ? deepClone(source[key]) : source[key]
   return target
}

11、随机生成一个 UUID 


function getRandomUUID(): string {
   const tempURL = URL.createObjectURL(new Blob())
   const uuidStr = tempURL.toString()
   const separator = uuidStr.includes('/') ? '/' : ':'
   URL.revokeObjectURL(tempURL)
   return uuidStr.substring(uuidStr.lastIndexOf(separator) + 1)
}


function getRandomUUID(): string {
   const fn = (): string => (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
   return fn() + fn() + '-' + fn() + '-' + fn() + '-' + fn() + '-' + fn() + fn() + fn()
}

12、随机布尔值


function getRandomBoolean(): boolean {
   return Math.random() > 0.5
}

13、反转字符串


function reverseString(str: string): string {
   return str.split('').reverse().join('')
}

14、随机生成十六进制颜色


function getRandomHexColor(): string {
   return `#${Math.floor(Math.random() * 0xffffff).toString(16)}`
}

15、获取变量的真实类型


function getRawType(variable: any): string {
   return Object.prototype.toString.call(variable).split(' ')[1].replace(']', '').toLowerCase()
}

16、将文本复制到剪贴板


function copyText(text: string): void {
   // Whether to support navigator.clipboard attribute
   const isClipboardApiSupported = window.navigator && window.navigator.clipboard
   if (isClipboardApiSupported) {
     window.navigator.clipboard.writeText(text)
   } else {
     const textarea = document.createElement('textarea')
     textarea.readOnly = true
     textarea.value = text
     textarea.style.position = 'absolute'
     textarea.style.top = '-9999px'
     textarea.style.left = '-9999px'
     document.body.appendChild(textarea)
     textarea.select()
     document.execCommand('copy')
     textarea.remove()
   }
}

17、滚动到顶部


function scrollToTop(element: HTMLElement): void {
   element.scrollIntoView({ behavior: 'smooth', block: 'start' })
}

18、对象通用方法

const obj = { a: 1, b: 2, c: 3, d: 4 }
//Object.keys()
// Will return an array consisting of the given object's own enumerable properties
Object.keys(obj) // ['a', 'b', 'c', 'd']
//Object.values()
// Returns an array of all enumerable property values of the given object itself
Object.values(obj) // [1, 2, 3, 4]
//Object.entries()
// Returns an array of key-value pairs for the given object's own enumerable properties
Object.entries(obj) // [['a', 1], ['b', 2], ['c', 3], ['d', 4]]
//Object.fromEntries()
//Convert the list of key-value pairs into an object, which is the reverse operation of Object.entries()
Object.fromEntries( [['a', 1], ['b', 2]]) // { a: 1, b: 2 }
// hasOwnProperty()
// Returns a Boolean value indicating whether the object has the specified attribute in its own properties (that is, whether it has the specified key)
obj.hasOwnProperty('a') // true
obj.hasOwnProperty('fff') // false
//Object.assign()
// Used to copy the values of all enumerable properties from one or more source objects to the target object. It will return the target object.
const target = { a: 1, b: 2 }
const source = { b: 4, c: 5 }
const result = Object.assign(target, source) // { ...target, ...source } has the same effect
console.log(result) // {a: 1, b: 4, c: 5}

总结

以上就是我今天想与你分享的全部内容,希望这些内容对你有所帮助。

来源:web前端开发内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯