8个工程必备的JavaScript代码片段
目录
- 1. 获取文件后缀名
- 2. 复制内容到剪贴板
- 3. 休眠多少毫秒
- 4. 生成随机字符串
- 5. 简单的深拷贝
- 6. 数组去重
- 7. 对象转化为FormData对象
- 8.保留到小数点以后n位
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 = https://www.it610.com/article/valueelement.select()if (document.execCommand('copy')) {document.execCommand('copy')document.body.removeChild(element)return true}document.body.removeChild(element)return false}
使用方式:
//如果复制成功返回truecopyToBoard('lalallala')
原理:
- 创建一个
textare
元素并调用select()
方法选中 document.execCommand('copy')
方法,拷贝当前选中内容到剪贴板。
3. 休眠多少毫秒
/** * 休眠xxxms * @param {Number} milliseconds */export function sleep(ms) {return new Promise(resolve => setTimeout(resolve, ms))}//使用方式const fetchData=https://www.it610.com/article/async()=>{ await sleep(1000)}
4. 生成随机字符串
/** * 生成随机id * @param {*} length * @param {*} chars */export function uuid(length, chars) {chars =chars ||'0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'length = length || 8var 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 = https://www.it610.com/article/new FormData()Object.keys(object).forEach(key => {const value = https://www.it610.com/article/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位小数结语:
【8个工程必备的JavaScript代码片段】到此这篇关于工程必备的
JavaScript
代码片段的文章就介绍到这了,更多相关工程必备的JavaScript
代码片段内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!推荐阅读
- 小学英语必考的10个知识点归纳,复习必备!
- 全过程工程咨询——时间管理(12)
- IDEA|IDEA 创建工程
- 新媒体时代,你需要掌握的必备技能
- 我的软件测试开发工程师书单
- V-learn小西妈双语工程2017年03期144号谢思岩Carlos2017.10.21-10.22
- 日常积累,水到渠成的必备要素
- 《人民的名义》来看人生必备的七张保单,保险是每个家庭理财必备的工具!
- 如何转录逐字稿(|如何转录逐字稿?| 提升咨询技能的必备神器)
- 【趣文】一读就错的68个姓氏