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))复制代码
8.保留到小数点以后n位
//保留小数点以后几位,默认2位exportfunctioncutNumber(number,no=2){if(typeofnumber!='number'){number=Number(number)}returnNumber(number.toFixed(no))}复制代码
使用场景:JS的浮点数超长,有时候页面显示时需要保留2位小数
关于本文
来源:_红领巾
/post/6999391770672889893
1. JavaScript 重温系列(22篇全)
2. ECMAScript 重温系列(10篇全)
3. JavaScript设计模式 重温系列(9篇全)
4.正则 / 框架 / 算法等 重温系列(16篇全)
5.Webpack4 入门(上)||Webpack4 入门(下)
6.MobX 入门(上)||MobX 入门(下)
7. 120+篇原创系列汇总
回复“加群”与大佬们一起交流学习~
点击“阅读原文”查看 120+ 篇原创文章