自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

八個工程必備的JavaScript代碼片段(建議添加到項目中)

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

[[432011]]

 1. 獲取文件后綴名

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

  1. /**  
  2.  * 獲取文件后綴名  
  3.  * @param {String} filename  
  4.  */  
  5.  export function getExt(filename) {  
  6.     if (typeof filename == 'string') {  
  7.         return filename  
  8.             .split('.')  
  9.             .pop()  
  10.             .toLowerCase()  
  11.     } else {  
  12.         throw new Error('filename must be a string type')  
  13.     }  
  14.  
  15. 復(fù)制代碼 

使用方式 

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

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

  1. export function copyToBoard(value) {  
  2.     const element = 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.         return true  
  10.     }  
  11.     document.body.removeChild(element)  
  12.     return false  
  13. 復(fù)制代碼

使用方式: 

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

原理:

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

3. 休眠多少毫秒 

  1. /**  
  2.  * 休眠xxxms  
  3.  * @param {Number} milliseconds  
  4.  */  
  5. export function sleep(ms) {  
  6.     return new Promise(resolve => setTimeout(resolve, ms))  
  7.  
  8. //使用方式  
  9. const fetchData=async()=> 
  10.  await sleep(1000)  
  11.  
  12. 復(fù)制代碼 

4. 生成隨機字符串 

  1. /**  
  2.  * 生成隨機id  
  3.  * @param {*} length  
  4.  * @param {*} chars  
  5.  */  
  6. export function uuid(length, chars) {  
  7.     charschars =  
  8.         chars ||  
  9.         '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'  
  10.     lengthlength = length || 8  
  11.     var result = ''  
  12.     for (var i = length; i > 0; --i)  
  13.         result += chars[Math.floor(Math.random() * chars.length)]  
  14.     return result  
  15.  
  16. 復(fù)制代碼 

使用方式 

  1. //第一個參數(shù)指定位數(shù),第二個字符串指定字符,都是可選參數(shù),如果都不傳,默認生成8位  
  2. uuid()   
  3. 復(fù)制代碼 

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

5. 簡單的深拷貝 

  1. /**  
  2.  *深拷貝  
  3.  * @export  
  4.  * @param {*} obj  
  5.  * @returns  
  6.  */  
  7. export function deepCopy(obj) {  
  8.     if (typeof obj != 'object') {  
  9.         return obj  
  10.     }  
  11.     if (obj == null) {  
  12.         return obj  
  13.     }  
  14.     return JSON.parse(JSON.stringify(obj))  
  15.  
  16. 復(fù)制代碼 

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

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

6. 數(shù)組去重 

  1. /**  
  2.  * 數(shù)組去重  
  3.  * @param {*} arr 
  4.  */  
  5. export function uniqueArray(arr) {  
  6.     if (!Array.isArray(arr)) {  
  7.         throw new Error('The first parameter must be an array')  
  8.     }  
  9.     if (arr.length == 1) {  
  10.         return arr  
  11.     }  
  12.     return [...new Set(arr)]  
  13.  
  14. 復(fù)制代碼 

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

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

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

  1. /**  
  2.  * 對象轉(zhuǎn)化為formdata  
  3.  * @param {Object} object  
  4.  */  
  5.  export function getFormData(object) {  
  6.     const formData = new FormData()  
  7.     Object.keys(object).forEach(key => {  
  8.         const value = 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.     return formData  
  18.  
  19. 復(fù)制代碼 

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

使用方式: 

  1. let req={  
  2.     file:xxx, 
  3.     userId:1,  
  4.     phone:'15198763636',  
  5.     //...  
  6.  
  7. fetch(getFormData(req))  
  8. 復(fù)制代碼 

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

  1. // 保留小數(shù)點以后幾位,默認2位  
  2. export function cutNumber(number, no = 2) {  
  3.     if (typeof number != 'number') {  
  4.         number = Number(number)  
  5.     }  
  6.     return Number(number.toFixed(no))  
  7.  
  8. 復(fù)制代碼 

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

 

責(zé)任編輯:龐桂玉 來源: 前端教程
相關(guān)推薦

2021-09-03 10:08:53

JavaScript開發(fā) 代碼

2022-07-25 15:21:50

Java編程語言開發(fā)

2024-08-02 17:19:36

2025-01-08 08:53:05

2024-12-30 07:47:15

Python科學(xué)計算

2016-09-19 15:15:01

shellbash腳本

2013-09-05 13:49:18

WordPress速度

2025-03-20 00:00:05

2021-09-27 15:04:08

數(shù)字化轉(zhuǎn)型CIOIT

2023-10-09 14:48:06

2023-10-10 16:16:05

JavaScrip開發(fā)

2023-05-22 15:53:06

JavaScrip代碼素材

2011-07-11 10:16:07

JavaScript

2024-01-26 06:25:09

PyCharm插件代碼

2013-06-07 10:52:18

移動應(yīng)用移動產(chǎn)品設(shè)計

2024-06-21 11:02:16

2022-06-13 09:00:33

React 項目前端

2023-05-03 21:42:02

Github開源項目

2025-03-26 05:00:00

前端開發(fā)者DOM

2021-06-29 10:03:45

數(shù)據(jù)科學(xué)機器學(xué)習(xí)算法
點贊
收藏

51CTO技術(shù)棧公眾號