八个工程必备的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