八個工程必備的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ù)制代碼
原理:
- 創(chuàng)建一個textare元素并調(diào)用select()方法選中
- 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. 生成隨機字符串
- /**
- * 生成隨機id
- * @param {*} length
- * @param {*} chars
- */
- export function uuid(length, chars) {
- charschars =
- chars ||
- '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
- lengthlength = 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ù),如果都不傳,默認生成8位
- uuid()
- 復(fù)制代碼
使用場景:用于前端生成隨機的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ù)點以后幾位,默認2位
- export function cutNumber(number, no = 2) {
- if (typeof number != 'number') {
- number = Number(number)
- }
- return Number(number.toFixed(no))
- }
- 復(fù)制代碼
使用場景:JS的浮點數(shù)超長,有時候頁面顯示時需要保留2位小數(shù)。
責(zé)任編輯:龐桂玉
來源:
前端教程