服务器之家:专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - 八个工程必备的JavaScript代码片段(建议添加到项目中)

八个工程必备的JavaScript代码片段(建议添加到项目中)

2021-11-01 22:03前端教程 JavaScript

8个工程必备的JavaScript代码片段,听过这样起博客标题可以提高阅读量。

八个工程必备的JavaScript代码片段(建议添加到项目中)

1. 获取文件后缀名

使用场景:上传文件判断后缀名

  1. /**
  2. *获取文件后缀名
  3. *@param{String}filename
  4. */
  5. exportfunctiongetExt(filename){
  6. if(typeoffilename=='string'){
  7. returnfilename
  8. .split('.')
  9. .pop()
  10. .toLowerCase()
  11. }else{
  12. thrownewError('filenamemustbeastringtype')
  13. }
  14. }
  15. 复制代码

使用方式

  1. getExt("1.mp4")//->mp4
  2. 复制代码

2. 复制内容到剪贴板

  1. exportfunctioncopyToBoard(value){
  2. constelement=document.createElement('textarea')
  3. document.body.appendChild(element)
  4. element.value=value
  5. element.select()
  6. if(document.execCommand('copy')){
  7. document.execCommand('copy')
  8. document.body.removeChild(element)
  9. returntrue
  10. }
  11. document.body.removeChild(element)
  12. returnfalse
  13. }
  14. 复制代码

使用方式:

  1. //如果复制成功返回true
  2. copyToBoard('lalallala')
  3. 复制代码

原理:

  1. 创建一个textare元素并调用select()方法选中
  2. document.execCommand('copy')方法,拷贝当前选中内容到剪贴板。

3. 休眠多少毫秒

  1. /**
  2. *休眠xxxms
  3. *@param{Number}milliseconds
  4. */
  5. exportfunctionsleep(ms){
  6. returnnewPromise(resolve=>setTimeout(resolve,ms))
  7. }
  8. //使用方式
  9. constfetchData=async()=>{
  10. awaitsleep(1000)
  11. }
  12. 复制代码

4. 生成随机字符串

  1. /**
  2. *生成随机id
  3. *@param{*}length
  4. *@param{*}chars
  5. */
  6. exportfunctionuuid(length,chars){
  7. charschars=
  8. chars||
  9. '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
  10. lengthlength=length||8
  11. varresult=''
  12. for(vari=length;i>0;--i)
  13. result+=chars[Math.floor(Math.random()*chars.length)]
  14. returnresult
  15. }
  16. 复制代码

使用方式

  1. //第一个参数指定位数,第二个字符串指定字符,都是可选参数,如果都不传,默认生成8位
  2. uuid()
  3. 复制代码

使用场景:用于前端生成随机的ID,毕竟现在的Vue和React都需要绑定key

5. 简单的深拷贝

  1. /**
  2. *深拷贝
  3. *@export
  4. *@param{*}obj
  5. *@returns
  6. */
  7. exportfunctiondeepCopy(obj){
  8. if(typeofobj!='object'){
  9. returnobj
  10. }
  11. if(obj==null){
  12. returnobj
  13. }
  14. returnJSON.parse(JSON.stringify(obj))
  15. }
  16. 复制代码

缺陷:只拷贝对象、数组以及对象数组,对于大部分场景已经足够

  1. constperson={name:'xiaoming',child:{name:'Jack'}}
  2. deepCopy(person)//newperson
  3. 复制代码

6. 数组去重

  1. /**
  2. *数组去重
  3. *@param{*}arr
  4. */
  5. exportfunctionuniqueArray(arr){
  6. if(!Array.isArray(arr)){
  7. thrownewError('Thefirstparametermustbeanarray')
  8. }
  9. if(arr.length==1){
  10. returnarr
  11. }
  12. return[...newSet(arr)]
  13. }
  14. 复制代码

原理是利用Set中不能出现重复元素的特性

  1. uniqueArray([1,1,1,1,1])//[1]
  2. 复制代码

7. 对象转化为FormData对象

  1. /**
  2. *对象转化为formdata
  3. *@param{Object}object
  4. */
  5. exportfunctiongetFormData(object){
  6. constformData=newFormData()
  7. Object.keys(object).forEach(key=>{
  8. constvalue=object[key]
  9. if(Array.isArray(value)){
  10. value.forEach((subValue,i)=>
  11. formData.append(key+`[${i}]`,subValue)
  12. )
  13. }else{
  14. formData.append(key,object[key])
  15. }
  16. })
  17. returnformData
  18. }
  19. 复制代码

使用场景:上传文件时我们要新建一个FormData对象,然后有多少个参数就append多少次,使用该函数可以简化逻辑

使用方式:

  1. letreq={
  2. file:xxx,
  3. userId:1,
  4. phone:'15198763636',
  5. //...
  6. }
  7. fetch(getFormData(req))
  8. 复制代码

8.保留到小数点以后n位

  1. //保留小数点以后几位,默认2位
  2. exportfunctioncutNumber(number,no=2){
  3. if(typeofnumber!='number'){
  4. number=Number(number)
  5. }
  6. returnNumber(number.toFixed(no))
  7. }
  8. 复制代码

使用场景:JS的浮点数超长,有时候页面显示时需要保留2位小数。

原文地址:https://mp.weixin.qq.com/s/rz4vSJvvHmxT6Alnh-ilRA

延伸 · 阅读

精彩推荐