8個工程必備的JavaScript代碼片段（建議添加到項目中）

8個工程必備的JavaScript代碼片段，聽過這樣起博客標(biāo)題可以提高閱讀量。??

1. 獲取文件后綴名

使用場景：上傳文件判斷后綴名

/**
?*?獲取文件后綴名
?*?@param?{String}?filename
?*/
?export?function?getExt(filename)?{
????if?(typeof?filename?==?'string')?{
????????return?filename
????????????.split('.')
????????????.pop()
????????????.toLowerCase()
????}?else?{
????????throw?new?Error('filename?must?be?a?string?type')
????}
}
復(fù)制代碼

使用方式

getExt("1.mp4")?//->mp4
復(fù)制代碼

2. 復(fù)制內(nèi)容到剪貼板

export?function?copyToBoard(value)?{
????const?element?=?document.createElement('textarea')
????document.body.appendChild(element)
????element.value?=?value
????element.select()
????if?(document.execCommand('copy'))?{
????????document.execCommand('copy')
????????document.body.removeChild(element)
????????return?true
????}
????document.body.removeChild(element)
????return?false
}

復(fù)制代碼

使用方式:

//如果復(fù)制成功返回true
copyToBoard('lalallala')
復(fù)制代碼

原理：

1. 創(chuàng)建一個textare元素并調(diào)用select()方法選中
2. document.execCommand('copy')方法，拷貝當(dāng)前選中內(nèi)容到剪貼板。

3. 休眠多少毫秒

/**
?*?休眠xxxms
?*?@param?{Number}?milliseconds
?*/
export?function?sleep(ms)?{
????return?new?Promise(resolve?=>?setTimeout(resolve,?ms))
}

//使用方式
const?fetchData=async()=>{
?await?sleep(1000)
}
復(fù)制代碼

4. 生成隨機(jī)字符串

/**
?*?生成隨機(jī)id
?*?@param?{*}?length
?*?@param?{*}?chars
?*/
export?function?uuid(length,?chars)?{
????chars?=
????????chars?||
????????'0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
????length?=?length?||?8
????var?result?=?''
????for?(var?i?=?length;?i?>?0;?--i)
????????result?+=?chars[Math.floor(Math.random()?*?chars.length)]
????return?result
}
復(fù)制代碼

使用方式

//第一個參數(shù)指定位數(shù)，第二個字符串指定字符，都是可選參數(shù)，如果都不傳，默認(rèn)生成8位
uuid()??
復(fù)制代碼

使用場景：用于前端生成隨機(jī)的ID,畢竟現(xiàn)在的Vue和React都需要綁定key

5. 簡單的深拷貝

/**
?*深拷貝
?*?@export
?*?@param?{*}?obj
?*?@returns
?*/
export?function?deepCopy(obj)?{
????if?(typeof?obj?!=?'object')?{
????????return?obj
????}
????if?(obj?==?null)?{
????????return?obj
????}
????return?JSON.parse(JSON.stringify(obj))
}
復(fù)制代碼

缺陷：只拷貝對象、數(shù)組以及對象數(shù)組，對于大部分場景已經(jīng)足夠

const?person={name:'xiaoming',child:{name:'Jack'}}
deepCopy(person)?//new?person
復(fù)制代碼

6. 數(shù)組去重

/**
?*?數(shù)組去重
?*?@param?{*}?arr
?*/
export?function?uniqueArray(arr)?{
????if?(!Array.isArray(arr))?{
????????throw?new?Error('The?first?parameter?must?be?an?array')
????}
????if?(arr.length?==?1)?{
????????return?arr
????}
????return?[...new?Set(arr)]
}
復(fù)制代碼

原理是利用Set中不能出現(xiàn)重復(fù)元素的特性

uniqueArray([1,1,1,1,1])//[1]
復(fù)制代碼

7. 對象轉(zhuǎn)化為FormData對象

/**
?*?對象轉(zhuǎn)化為formdata
?*?@param?{Object}?object
?*/

?export?function?getFormData(object)?{
????const?formData?=?new?FormData()
????Object.keys(object).forEach(key?=>?{
????????const?value?=?object[key]
????????if?(Array.isArray(value))?{
????????????value.forEach((subValue,?i)?=>
????????????????formData.append(key?+?`[${i}]`,?subValue)
????????????)
????????}?else?{
????????????formData.append(key,?object[key])
????????}
????})
????return?formData
}
復(fù)制代碼

使用場景：上傳文件時我們要新建一個FormData對象，然后有多少個參數(shù)就append多少次，使用該函數(shù)可以簡化邏輯

使用方式：

let?req={
????file:xxx,
????userId:1,
????phone:'15198763636',
????//...
}
fetch(getFormData(req))
復(fù)制代碼

8.保留到小數(shù)點以后n位

//?保留小數(shù)點以后幾位，默認(rèn)2位
export?function?cutNumber(number,?no?=?2)?{
????if?(typeof?number?!=?'number')?{
????????number?=?Number(number)
????}
????return?Number(number.toFixed(no))
}
復(fù)制代碼

使用場景：JS的浮點數(shù)超長，有時候頁面顯示時需要保留2位小數(shù)

作者：?_紅領(lǐng)巾

https://juejin.cn/post/6999391770672889893