当前位置: 首页 > 科技观察

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

时间:2023-03-16 14:56:24 科技观察

1。获取文件扩展名使用场景:上传文件判断扩展名/***获取文件扩展名*@param{String}filename*/exportfunctiongetExt(filename){if(typeoffilename=='string'){returnfilename.split('.').pop().toLowerCase()}else{thrownewError('filenamemustbeastringtype')}}复制代码用法getExt("1.mp4")//->mp4复制代码2.将内容复制到clipboardexportfunctioncopyToBoard(value){constelement=document.createElement('textarea')document.body.appendChild(element)element.value=valueelement.select()if(document.execCommand('copy')){document.execCommand('copy')document.body.removeChild(element)returntrue}document.body.removeChild(element)returnfalse}复制代码用法://如果复制成功返回truecopyToBoard('lalallala')复制代码原理:创建一个textare元素和调用select()方法选择document.execCommand('copy')方法将当前选中的内容复制到剪贴板。3.睡眠多少毫秒/***sleepxxxms*@param{Number}milliseconds*/exportfunctionsleep(ms){returnnewPromise(resolve=>setTimeout(resolve,ms))}//用法constfetchData=async()=>{waitsleep(1000)}复制代码4.生成随机字符串/***生成随机id*@param{*}length*@param{*}chars*/exportfunctionuuid(length,chars){charschars=chars||'0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'lengthlength=length||8varresult=''for(vari=length;i>0;--i)result+=chars[Math.floor(Math.random()*chars.length)]returnresult}复制代码用法//第一个参数指定位数,第二个字符串指定字符,这两个参数都是可选参数。不传则默认生成一个8位的uuidVue和React都需要绑定key5。简单深拷贝/***深拷贝*@export*@param{*}obj*@returns*/exportfunctiondeepCopy(obj){if(typeofobj!='object'){returnobj}if(obj==null){returnobj}returnJSON.parse(JSON.stringify(obj))}复制代码缺陷:只复制对象、数组和对象数组,对大多数场景来说足够了constperson={name:'xiaoming',child:{name:'Jack'}}deepCopy(person)//newperson拷贝代码6.数组去重/***数组去重*@param{*}arr*/exportfunctionuniqueArray(arr){if(!Array.isArray(arr)){thrownewError('第一个参数mustbeanarray')}if(arr.length==1){returnarr}return[...newSet(arr)]}复制代码的原理是利用特性uniqueArray([1,1,1,1,1])//[1]复制代码7.对象转为FormData对象/***对象转为formdata*@param{Object}object*/exportfunctiongetFormData(object){constformData=newFormData()Object.keys(object).forEach(key=>{constvalue=object[key]if(Array.isArray(value)){value.forEach((subValue,i)=>formData.append(key+`[${i}]`,subValue))}else{formData.append(key,object[key])}})returnformData}复制代码使用场景:上传文件时,我们需要新建一个FormData对象,然后追加多少次就追加多少次参数。使用这个函数可以简化逻辑用法:letreq={file:xxx,userId:1,phone:'15198763636',//...}fetch(getFormData(req))复制代码8.保留小数点后n位//保留小数点后几位,默认2位复制代码使用场景:JSfloat点数过长,有时页面显示时需要保留2位小数