欢迎来到思维库

思维库

八个工程必备的JavaScript代码片段(建议添加到项目中)

时间:2025-11-05 05:12:34 出处:系统运维阅读(143)

 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. 复制内容到剪贴板 

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)  复制代码 

原理:

 创建一个textare元素并调用select()方法选中  document.execCommand(copy)方法,个工拷贝当前选中内容到剪贴板。程必

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  }  复制代码 

使用方式 

//第一个参数指定位数,第二个字符串指定字符,片段都是建议可选参数,如果都不传,添加默认生成8位  uuid()   复制代码 

使用场景:用于前端生成随机的云南idc服务商目中ID,毕竟现在的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))  }  复制代码 

缺陷:只拷贝对象、数组以及对象数组,个工对于大部分场景已经足够 

const person={name:xiaoming,程必child:{name:Jack}}  deepCopy(person) //new person  复制代码 

6. 数组去重 

/**   * 数组去重   * @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中不能出现重复元素的特性 

uniqueArray([1,1,1,1,1])//[1]  复制代码 

7. 对象转化为FormData对象 

/**   * 对象转化为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对象,IT技术网然后有多少个参数就append多少次,代码到项使用该函数可以简化逻辑

使用方式: 

let req={      file:xxx,片段     userId:1,      phone:15198763636,      //...  }  fetch(getFormData(req))  复制代码 

8.保留到小数点以后n位 

// 保留小数点以后几位,默认2位  export function cutNumber(number,建议 no = 2) {      if (typeof number != number) {          number = Number(number)      }      return Number(number.toFixed(no))  }  复制代码 

使用场景:JS的浮点数超长,有时候页面显示时需要保留2位小数。添加

目中

分享到:

温馨提示:以上内容和图片整理于网络,仅供参考,希望对您有帮助!如有侵权行为请联系删除!

友情链接: