个人js工具函数库 使用方法npm install @cy-boy/cy-utilsbaseStringNumberDomOther

js截取字符串长度，添加省略号（...） {callout color="#f0ad4e"}js处理字符串长度，长度超出，使用‘...’代替超出部分{/callout}/** * @description 根据长度截取先使用字符串，追加… * @param {string} str 对象字符串 * @param {string} len 目标字节长度 * @returns {string} 处理好的字符串 */ export function cutString(str, len = 13) { if (!str) return '' //length属性读出来的汉字长度为1 if(str.length*2 <= len) return str var strlen = 0 var s = "" for(var i = 0;i < str.length; i++) { s = s + str.charAt(i) if (str.charCodeAt(i) > 128) { strlen = strlen + 2 if(strlen >= len){ return s.substring(0,s.length-1) + "..." } } else { strlen = strlen + 1 if(strlen >= len){ return s.substring(0,s.length-2) + "..." } } } return s; }

后端数据大数字精度缺失问题 1. 使用json-bigintnpm i json-bigint2. 如何使用import axios from 'axios' import jsonBig from 'json-bigint' // create an axios instance const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url // withCredentials: true, // send cookies when cross-domain requests timeout: 5 * 1000, // request timeout // 在响应数据前处理该数据 transformResponse: [function (data) { try { // 如果转换成功则返回转换的数据结果，会将大数字转换为bigint console.log(jsonBig.parse(data), 888); return jsonBig.parse(data) } catch (err) { // 如果转换失败，则包装为统一数据格式并返回 return { data } } }] })2. 使用时，将该字段转换为字符串res.data.pid.toString() // 4125411516516488

js根据字节自动转化KB或MB或GB getFileSize(limit) { // 字节 // bytes --> KB --> MB -->GB var size = ""; if(limit < 0.1 * 1024){ //小于0.1KB，则转化成B size = limit.toFixed(2) + "B" }else if(limit < 0.1 * 1024 * 1024){ //小于0.1MB，则转化成KB size = (limit/1024).toFixed(2) + "KB" }else if(limit < 0.1 * 1024 * 1024 * 1024){ //小于0.1GB，则转化成MB size = (limit/(1024 * 1024)).toFixed(2) + "MB" }else{ //其他转化成GB size = (limit/(1024 * 1024 * 1024)).toFixed(2) + "GB" } var sizeStr = size + ""; //转成字符串 var index = sizeStr.indexOf("."); //获取小数点处的索引 var dou = sizeStr.substr(index + 1 ,2) //获取小数点后两位的值 if(dou == "00"){ //判断后两位是否为00，如果是则删除00 return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2) } return size; }

el-upload自定义触发按钮及触发上传前判断 1. 在页面中引用el-upload组件<!-- 自定义按钮div --> <div v-if="routerList.length !== 1" class="action upload" :class="{action_upload_radius: routerList.length === 1}" @click="uploadHandler" > <i class="el-icon el-icon-upload"></i>上传 </div> <!-- hidden upload --> <el-upload v-show="false" class="upload-demo" :action="uploadUrl" :on-success="actionUploadSucc" :show-file-list="false" :headers="headers" :data="actUploadParams" :multiple="false" :file-list="fileList"> <el-button ref="file-home-uploadBtnRef" v-show="false"> <i class="el-icon-upload"></i>上传文件 </el-button> </el-upload>使用一个div模拟一个上传按钮，使用v-show隐藏upload组件，在upload组件的触发按钮el-button上绑定ref2. 触发前条件判断及触发upload上传方式 // action bar 上传btn uploadHandler () { console.log(this.routerList); const len = this.routerList.length if(this.routerList.length === 1) return this.$message.info('请先进入文件夹！') const currFolderId = this.routerList[len-1].folderId // 当前操作的文件夹id this.actUploadParams.folderId = currFolderId // 触发upload组件上传 this.$refs['file-home-uploadBtnRef'].$el.click() },获取到upload触发按钮el-button的ref，在获取到ref上的$el，调用click()自点击触发upload上传

ArrayBuffer和base64字符串互相转化 1. ArrayBuffer转base64function translateArrayBufferToBase64(buffer){ const bytes = new Uint8Array(buffer).reduce((data, byte) => data + String.fromCharCode(byte), '') return window.btoa(bytes); }2. base64转ArrayBufferfunction translateBase64ToArrayBuffer(base64){ const binaryStr = window.atob(base64); const byteLength = binaryStr.length; const bytes = new Uint8Array(byteLength); for(let i=0;i<byteLength;i++){ bytes[i] = binaryStr.charCodeAt(i); } return bytes.buffer; }

图片转base64 1. 使用FileReader对象FileReader对象可以异步读取File对象或者是Blob对象FileReader是一个构造函数，返回一个FileReader对象FileReader对象通过readAsDataUrl方法读取File对象或者Blob对象，一旦读取完成，result属性中会包含一个data： URL格式的Base64字符串以表示所读取文件的内容读取完成会触发FileReader对象的onload事件，可以从FileReader对象的result属性上获取返回的结果函数封装/** * 通过file对象/blob对象获取base64 * @param {Object} data file对象或者blob对象 */ const getBase64 = function (data) { return new Promise((resolve, reject) => { let imgRes = '' const reader = new FileReader() reader.readAsDataURL(data) reader.onerror = () => reject(reader.error) reader.onload = function (e) { // imgRes = e.target.result imgRes = reader.result } reader.onloadend = () => resolve(imgRes) }) }文件上传案例，并实现预览（file对象）<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="file" onchange="inputChange()"> <img src="" alt="预览图片"> <script> function inputChange (e) { const file = document.querySelector('input[type=file]').files[0] getBase64(file).then((res) => { const url = res document.querySelector('img').src = url }) } /** * 通过file对象/blob对象获取base64 * @param {Object} data file对象或者blob对象 */ const getBase64 = function (data) { return new Promise((resolve, reject) => { let imgRes = '' const reader = new FileReader() reader.readAsDataURL(data) reader.onerror = () => reject(reader.error) reader.onload = function (e) { // imgRes = e.target.result imgRes = reader.result } reader.onloadend = () => resolve(imgRes) }) } </script> </body> </html>通过图片url获取文件流blob对象案例（blob对象）<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> <img src="" alt="预览图片"> <button onclick="getImgByUrl()">通过url获取图片blob</button> <script> function getImgByUrl() { $.ajax({ // 可能会存在跨域问题 url: 'https://p5.qhimg.com/bdr/__85/t01409d4a62e0210249.jpg', xhrFields: { responseType: 'blob' }, success: (data, status) => { getBase64(data).then((res) => { const url = res document.querySelector('img').src = url }) } }) } </script> </body> </html> 2. 使用canvas.toDataURL()封装函数/** * 通过url获取图片base64 * @param {String} url 图片地址 */ const getBase64ByUrl = function (url) { return new Promise((resolve, reject) => { let base64Url const img = new Image() // 如果图片url存在跨域需要设置该属性，并且后端也要允许跨域 img.setAttribute('crossOrigin', 'Anonymous') img.src = url img.onload = function () { const c = document.createElement('canvas') c.width = img.width c.height = img.height const ctx = c.getContext('2d') ctx.drawImage(img, 0, 0, c.width, c.height) base64Url = c.toDataURL() resolve(base64Url) } img.onerror = function () { reject(base64Url) } }) }

javascript高级程序设计 第四版 中文高清 pdf 书中详尽讨论了 JavaScript 的各个方面，从 JavaScript 的起源开始，逐步讲解到新出现的技术，其中重点介绍 ECMAScript 和 DOM 标准。在此基础上，接下来的各章揭示了 JavaScript 的基本概念，包括类、期约、迭代器、代理，等等。另外，书中深入探讨了客户端检测、事件、动画、表单、错误处理及 JSON。本书同时也介绍了近几年来涌现的重要新规范，包括 Fetch API、模块、工作者线程、服务线程以及大量新 API。

js的两种定时器 1. window.setTimeout(fn, wait)设置一个定时器，等待wait时间后，执行fn函数，该定时器只会执行一次，执行完函数后，该定时器停止。// 1000毫秒后打印一次 1 const timer1 = window.setTimeout(() => { console.log(1) }, 1000)2. window.setInterval(fn, wait)设置一个定时器，每等待wait时间，都会执行一次fn函数。该定时器会一直执行。// 每隔1000毫秒打印一次 2 const timer2 = window.setTimeout(() => { console.log(2) }, 1000)3. 清除定时器每个定时器都会返回一个定时器的id 如上边的timer1，timer2就是定时器id通过clearTimeout(timer1) 或者 clearInterval(timer2)来清除相对应的定时器，定时器的id依然存在，下次创建定时器，id会继续往后排队clearTimeout(timer1) clearInterval(timer2)