八個工程必備的JavaScript代碼片段(建議添加到項目中)
作者:佚名 
  8個工程必備的JavaScript代碼片段,聽過這樣起博客標題可以提高閱讀量。
 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')
 - }
 - }
 - 復制代碼
 
使用方式
- getExt("1.mp4") //->mp4
 - 復制代碼
 
2. 復制內(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
 - }
 - 復制代碼
 
使用方式:
- //如果復制成功返回true
 - copyToBoard('lalallala')
 - 復制代碼
 
原理:
- 創(chuàng)建一個textare元素并調(diào)用select()方法選中
 - document.execCommand('copy')方法,拷貝當前選中內(nèi)容到剪貼板。
 
3. 休眠多少毫秒
- /**
 - * 休眠xxxms
 - * @param {Number} milliseconds
 - */
 - export function sleep(ms) {
 - return new Promise(resolve => setTimeout(resolve, ms))
 - }
 - //使用方式
 - const fetchData=async()=>{
 - await sleep(1000)
 - }
 - 復制代碼
 
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
 - }
 - 復制代碼
 
使用方式
- //第一個參數(shù)指定位數(shù),第二個字符串指定字符,都是可選參數(shù),如果都不傳,默認生成8位
 - uuid()
 - 復制代碼
 
使用場景:用于前端生成隨機的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))
 - }
 - 復制代碼
 
缺陷:只拷貝對象、數(shù)組以及對象數(shù)組,對于大部分場景已經(jīng)足夠
- const person={name:'xiaoming',child:{name:'Jack'}}
 - deepCopy(person) //new person
 - 復制代碼
 
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)]
 - }
 - 復制代碼
 
原理是利用Set中不能出現(xiàn)重復元素的特性
- uniqueArray([1,1,1,1,1])//[1]
 - 復制代碼
 
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
 - }
 - 復制代碼
 
使用場景:上傳文件時我們要新建一個FormData對象,然后有多少個參數(shù)就append多少次,使用該函數(shù)可以簡化邏輯
使用方式:
- let req={
 - file:xxx,
 - userId:1,
 - phone:'15198763636',
 - //...
 - }
 - fetch(getFormData(req))
 - 復制代碼
 
8.保留到小數(shù)點以后n位
- // 保留小數(shù)點以后幾位,默認2位
 - export function cutNumber(number, no = 2) {
 - if (typeof number != 'number') {
 - number = Number(number)
 - }
 - return Number(number.toFixed(no))
 - }
 - 復制代碼
 
使用場景:JS的浮點數(shù)超長,有時候頁面顯示時需要保留2位小數(shù)。
責任編輯:龐桂玉 
                    來源:
                    前端教程
 














 
 
 













 
 
 
 