50字范文 > 8个工程必备的JavaScript代码片段（建议添加到项目中）

8个工程必备的JavaScript代码片段（建议添加到项目中）

时间：2022-06-21 20:31:07

点击上方前端瓶子君，关注公众号

回复算法，加入前端编程面试算法每日一题群

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

最近写博客好累，让8月征文活动搞的，今天水一篇好了，麻烦不要给我点赞，不想看到消息通知的小红点。

1. 获取文件后缀名

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

/***获取文件后缀名*@param{String}filename*/exportfunctiongetExt(filename){if(typeoffilename=='string'){returnfilename.split('.').pop().toLowerCase()}else{thrownewError('filenamemustbeastringtype')}}复制代码

使用方式

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

2. 复制内容到剪贴板

exportfunctioncopyToBoard(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. 休眠多少毫秒

/***休眠xxxms*@param{Number}milliseconds*/exportfunctionsleep(ms){returnnewPromise(resolve=>setTimeout(resolve,ms))}//使用方式constfetchData=async()=>{awaitsleep(1000)}复制代码

4. 生成随机字符串

/***生成随机id*@param{*}length*@param{*}chars*/exportfunctionuuid(length,chars){chars=chars||'0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'length=length||8varresult=''for(vari=length;i>0;--i)result+=chars[Math.floor(Math.random()*chars.length)]returnresult}复制代码

使用方式

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

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

5. 简单的深拷贝

/***深拷贝*@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('Thefirstparametermustbeanarray')}if(arr.length==1){returnarr}return[...newSet(arr)]}复制代码

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

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对象，然后有多少个参数就append多少次，使用该函数可以简化逻辑

使用方式：

letreq={file:xxx,userId:1,phone:'15198763636',//...}fetch(getFormData(req))复制代码