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

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

文章资讯开源世界2021-08-30 10:41:403120A+A-

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

原理:

  1. 创建一个textare元素并调用select()方法选中

  2. 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) {     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 } 复制代码

使用方式

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

使用场景:用于前端生成随机的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对象,然后有多少个参数就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位小数




Copyright 百搜影视 版权所有 精品源码推荐:http://github.crmeb.net/u/defu
#转载请注明出处!

点击这里复制本文地址 以上内容由开源世界整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

开源世界-开源独尊-开源中国-ThinkPHP-CRMEB-商城源码-项目下载站-CMS企业模板-互站网-悟空源码-A5资源网-CSDN-ASP300 © All Rights Reserved.  Copyright 开源世界 版权所有
Powered by 百搜科技 Themes by www.baisou.ltd
联系我们| 关于我们| 留言建议| 网站管理

分享:

支付宝

微信

嘿,欢迎咨询
请先 登录 再评论,若不是会员请先 注册