首页
友链
导航
影视
壁纸
更多
关于我
统计
留言板
Search
1
el-upload自定义触发按钮及触发上传前判断
416 阅读
2
vue配置二级目录以及nginx多网站部署
405 阅读
3
js获取昨天今天明天日期
297 阅读
4
window10如何将C盘用户中文名改为英文名
286 阅读
5
el-cascader选择任意一级搭配懒加载使用,单选框radio不会触发懒加载
276 阅读
web前端
vue
react
javascript
nuxt
typescript
indexDB数据库
微信小程序
美文欣赏
心情随笔
技术分享
其他
PHP
nodejs
博客api实战项目
typecho
登录
Search
标签搜索
web
vue
node项目实战
js
javascript
css
vuex
router
nginx
git
typecho
element
joe
leaflet
dateFormat
map
date
axios
reg
正则表达式
辰漪
累计撰写
63
篇文章
累计收到
72
条评论
首页
栏目
web前端
vue
react
javascript
nuxt
typescript
indexDB数据库
微信小程序
美文欣赏
心情随笔
技术分享
其他
PHP
nodejs
博客api实战项目
typecho
页面
友链
导航
影视
壁纸
关于我
统计
留言板
搜索到
18
篇与
javascript
的结果
2022-05-26
js防抖和节流
防抖和节流防抖:在给定时间内没有再次触发,该函数才会执行。节流:先执行一次,在给定时间内该函数不会被再次触发。js两种定时器setTimeOut:该定时器n秒后执行一次函数,只会执行一次。setInterVal:该定时器n秒执行一次函数,循环多次执行。call、apply、bind共同点: call、apply、bind都可以改变this的指向,第一个参数都是this的指向。异同点:call 第二个参数及其以后的参数都是想要传递的参数,他传递的是一个参数列表 例如:fn.call(this, 1,2,3),函数会立即执行。apply 第二个参数传递的是一个参数数组 例如:fn.apply(this, [1,2,3]),函数立即执行。bind 第二个参数及其以后的参数都是想要传递的参数,他传递的是一个参数列表 例如:fn.bind(this, 1,2,3), 会返回一个函数,需要接收并且手动调用。防抖函数和节流函数// 防抖函数 function debounce(fn, wait) { let timer = null // console.log(this, '1'); // this => window return function () { const e = arguments[0] // arguments[0] => input事件对象 // console.log(this, '2'); // this => input timer && clearTimeout(timer) timer = setTimeout(() => { fn.call(this, e) // 调用fn 并传递input事件对象e }, wait); } } // 节流函数 function throttle (fn, wait) { let flag = false // 用来判断时间是否超过wait let timer = null return function () { const e = arguments[0] if (flag) return fn.call(this, e) // 先执行一次 flag = true timer = setTimeout(() => { // 时间过啦 flag 改为false 此时函数再触发就会执行 flag = false }, wait); } }小案例测试<!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>js防抖和节流</title> </head> <body> <input type="text" id="inp1"> <input type="text" id="inp2"> <script> const $ = function (selector) { return document.querySelector(selector) } // 测试防抖-给定时间里内没有再次触发才会执行 $('#inp1').addEventListener('input', debounce(function (e) { console.log(this, '3'); // this => input console.log(e, '事件对象'); console.log(e.target.value) }, 1000)) // 测试节流-先执行一次 再次执行需要等到时间超过给定时间才会执行 $('#inp2').addEventListener('input', throttle(function (e) { console.log(this, '3'); // this => input console.log(e, '事件对象'); console.log(e.target.value) }, 1000)) </script> </body> </html>
2022年05月26日
66 阅读
2 评论
0 点赞
2022-05-12
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; }
2022年05月12日
130 阅读
2 评论
0 点赞
2022-04-08
后端数据大数字精度缺失问题
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
2022年04月08日
63 阅读
0 评论
0 点赞
2022-03-22
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; }
2022年03月22日
160 阅读
0 评论
1 点赞
2022-02-08
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; }
2022年02月08日
84 阅读
3 评论
1 点赞
2022-01-25
图片转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) } }) }
2022年01月25日
70 阅读
1 评论
1 点赞
2022-01-12
javascript高级程序设计 第四版 中文高清 pdf
书中详尽讨论了 JavaScript 的各个方面,从 JavaScript 的起源开始,逐步讲解到新出现的技术,其中重点介绍 ECMAScript 和 DOM 标准。在此基础上,接下来的各章揭示了 JavaScript 的基本概念,包括类、期约、迭代器、代理,等等。另外,书中深入探讨了客户端检测、事件、动画、表单、错误处理及 JSON。本书同时也介绍了近几年来涌现的重要新规范,包括 Fetch API、模块、工作者线程、服务线程以及大量新 API。
2022年01月12日
37 阅读
1 评论
1 点赞
2022-01-10
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)
2022年01月10日
19 阅读
0 评论
2 点赞
2021-12-24
js实现深拷贝
1. 使用递归let str = "我是string基本数据类型" let arr = [1, 6, [1, 3, 5, 7, 9], 5, 8, { a: 4, b: 7 }, 9, 0] let obj = { a: 1, b: 2, c: 3, d: [123, 456], e: { ea: 789, eb: 666 } } let nu = null function deepClone(ob) { if (typeof ob === "object") { if (Object.prototype.toString.call(ob).slice(8, -1) === 'Null') return ob if (ob instanceof Array) { // 数组 let newArr = [] ob.forEach((item, index, arr) => { newArr[index] = deepClone(item) }) return newArr } else { // 对象 let newObj = {} // for (let k in ob) { // newObj[k] = deepClone(ob[k]) // } Object.keys(ob).forEach((key, index, arr) => { newObj[key] = deepClone(ob[key]) }) return newObj } } else { return ob } } console.log(deepClone(str)) console.log(deepClone(arr)) console.log(deepClone(obj)) console.log(deepClone(nu))2. JSON.parse()和JSON.stringify()JSON.stringify() // 将对象转化为json字符串 JSON.parse() // 将json转化为json对象 console.log(JSON.parse(JSON.stringify({a: 1, b: [4,5,6]})))该方法可能会出现如下问题undefined、任意的函数以及 symbol 值,在序列化过程中会被忽略Date 日期调用了 toJSON() 将其转换为了 string 字符串(Date.toISOString()),因此会被当做字符串处理。NaN 和 Infinity 格式的数值及 null 都会被当做 null。其他类型的对象,包括 Map/Set/WeakMap/WeakSet,仅会序列化可枚举的属性。对包含循环引用的对象(对象之间相互引用,形成无限循环)执行此方法,会抛出错误。请谨慎使用3. Object.assign() (该方法只能浅拷贝)
2021年12月24日
73 阅读
0 评论
1 点赞
2021-12-24
js如何判断数据类型
一、常用的js数据类型基本数据类型 :String、Number、Boolean、Null、Undefined 复杂数据类型 :Object二、js数据类型判断// 初始化一些数据用来判断 let str = "字符串类型" let bool = true let num = 123 let nulll = null let undef let arr = [] let obj = {} let sum = function () {} 1.使用typeof进行判断console.log(typeof str) // string console.log(typeof bool) // boolean console.log(typeof num) // number console.log(typeof nulll) // object console.log(typeof undef) // undefined console.log(typeof arr) // object console.log(typeof obj) // object console.log(typeof sum) // function{callout color="#66edff"}使用typeof进行判断数据类型,只能够判断基本数据类型string number boolean 以及 function,而null和object不能够进一步的判断。{/callout} 2.使用A instanceof B进行判断console.log(str instanceof String) // false console.log(bool instanceof Boolean) // false console.log(num instanceof Number) // false console.log(nulll instanceof Object) // false console.log(undef instanceof Object) // false console.log(arr instanceof Array) // true console.log(obj instanceof Object) // true console.log(sum instanceof Function) // true{callout color="#66edff"}使用A instanceof B的方式进行判断,字面意思,A是否是B的实例,可以判断出Array和Object类型,但是undefined和null不能区分数据类型,基础的数据类型,因为不是使用new出来的,也测试不出来。{/callout} 3.使用Object.prototype.toString.call()进行判断console.log(Object.prototype.toString.call(str)) // [object String] console.log(Object.prototype.toString.call(bool)) // [object Boolean] console.log(Object.prototype.toString.call(num)) // [object Number] console.log(Object.prototype.toString.call(nulll)) // [object Null] console.log(Object.prototype.toString.call(undef)) // [object Undefined] console.log(Object.prototype.toString.call(arr)) // [object Array] console.log(Object.prototype.toString.call(obj)) // [object Object] console.log(Object.prototype.toString.call(sum)) // [object Function]{callout color="#66edff"}Object.prototype.toString()方法可以返回一个表示该对象的字符串'[object type]',为了每个对象都能通过 Object.prototype.toString() 来检测,需要以 Function.prototype.call() 或者 Function.prototype.apply() 的形式来调用,传递要检查的对象作为第一个参数,称为 thisArg。{/callout}三、封装成函数function judgeType (data) { return Object.prototype.toString.call(data).slice(8, -1) } judgeType('jkl') // 'String' judgeType(123) // 'Number' judgeType(true) // 'Boolean' judgeType(null) // 'Null' judgeType(undefined) // 'Undefined' judgeType([]) // 'Array' judgeType({}) // 'Object' judgeType(function sum () {}) // 'Function' judgeType(new Set()) // 'Set' judgeType(new Map()) // 'Map'
2021年12月24日
79 阅读
0 评论
4 点赞
1
2