![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript
文章平均质量分 57
前端开心果
哈喽,我是一个前端程序媛,专注于前端技术的学习、分享与交流,包括web前端基础知识、进阶技术、学习资料、工具技巧、视频教程、面试题等信息。让我们在前端的学习道路上一起进步吧!
展开
-
js中scrollIntoView第一次不生效,第二次生效
方法用于将元素滚动到可视区域。如果在页面加载后立即使用,可能不会生效,因为页面可能还没有完全渲染或者加载完成。如果是因为元素还没有完全渲染完成,可以在。关键是确保在页面完全加载和渲染之后再调用。原创 2024-07-12 09:43:20 · 188 阅读 · 0 评论 -
js比较对象a和对象b中不相等的地方,取出对象b中不等于对象a的键值对
判断对象a是否包含了对象b的某个属性,如果没有则说明这个属性是对象b独有的;同时也比较了对象a和对象b中对应的属性值是否相等,如果不相等则说明这个属性在对象b中与对象a不同。函数接受两个对象a和b作为参数,返回一个新的对象,包含了对象b中不等于对象a的键值对。通过遍历对象b,比较对象a和对象b中对应的键值对是否相等来找出对象b中不等于对象a的键值对。原创 2024-01-11 09:43:22 · 623 阅读 · 0 评论 -
服务器发送事件Server-sent events详解与示例
Server-Sent-Events(SSE)是一种HTML5 API,用于在服务器和客户端之间实时推送数据流。 SSE可以用于实现实时通知、实时聊天、实时数据更新和实时监控等功能。原创 2023-09-04 17:18:36 · 2721 阅读 · 0 评论 -
js监听页面是否设置全屏
js监听页面是否设置全屏原创 2023-08-16 12:55:42 · 1318 阅读 · 0 评论 -
javascript正则表达式的进阶介绍
正则表达式用于匹配字符串中字符组合的模式。在js中,正则表达式也是对象。这些模式被用于 RegExp 的 exec 和 test 方法,以及 String 的 match、matchAll、replace、search 和 split 方法原创 2023-07-25 12:24:21 · 110 阅读 · 0 评论 -
javascript正则表达式的基础介绍
正则表达式是用于匹配字符串中字符组合的模式。在 JavaScript 中,正则表达式也是对象。这些模式被用于 RegExp 的 exec 和 test 方法,以及 String 的 match、matchAll、replace、search 和 split 方法。本章介绍 JavaScript 正则表达式。原创 2023-07-24 17:11:48 · 61 阅读 · 0 评论 -
javascript中的闭包还不清楚吗
javascript的闭包是一个函数以及其捆绑的周边环境状态(词法环境)的引用的组合。简言之,闭包就是能够读取其他函数内部变量的函数。原创 2023-07-20 08:54:35 · 60 阅读 · 0 评论 -
一篇文章读懂ES6箭头函数
ES6箭头函数表达式的语法比函数表达式更简洁,并且没有自己的thisargumentssuper或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方,并且箭头函数不能用作构造函数。原创 2023-07-18 09:04:01 · 94 阅读 · 0 评论 -
javascript中的函数知多少?
函数是 JavaScript 中的基本组件之一。一个函数是 JavaScript 过程是一组执行任务或计算值的语句。要使用一个函数,你必须将其定义在你希望调用它的作用域内。原创 2023-07-17 09:25:23 · 123 阅读 · 0 评论 -
js中数组和字符串的相同方法和转换
javascript中字符串和数组相同属性和方法,获取长度,检索特定位置字符,以及字符串和数组之间的相互转换原创 2023-07-14 08:56:48 · 301 阅读 · 0 评论 -
js文件上传和下载的进度处理
js文件上传和下载的进度处理原创 2023-05-17 15:03:43 · 1130 阅读 · 0 评论 -
js的dom事件流、事件委托和阻止绑定事件触发
主要讲解事件绑定和事件委托,onclick事件和addEventListener的区别原创 2023-04-22 15:45:28 · 774 阅读 · 0 评论 -
初识Blob和Filereader
BlobBlob对象表示一个不可变,原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取。Blob表示的不一定是javascript原生格式的数据,File接口基于Blob,继承了blob的功能并将其扩展使其支持用户系统上的文件要从其他非blob对象和数据构造一个Blob,请使用Blob()构造函数。如果要创建blob的子集,可以使用slice方法。构造函数Blob()构造函数返回一个新的Blob对象,blob的内容由参数数组中给出的值的串联组成const aBlob = new Bl原创 2022-04-19 16:33:29 · 1009 阅读 · 1 评论 -
认识Base64,看这篇足够了
Base64编码要求把3个8位字节(3*8=24)转化为4个6位的字节(4*6=24),之后在6位的前面补两个0,形成8位一个字节的形式。如果剩下的字符不足3个字节,则用0填充。原创 2022-04-18 15:46:20 · 12175 阅读 · 0 评论 -
使用 XMLHttpRequest 实现 ajax
使用 XMLHttpRequest 实现 ajaxfunction ajax (url, method, body, headers) { return new Promise((resolve, reject) => { let request = new XMLHttpRequest() request.open(method, url) // 初始化一个请求 for (let key in headers) { request.setRequestHea原创 2022-02-13 17:45:10 · 1312 阅读 · 0 评论 -
js数组对象中将相同的数据类型归类
初始数据最终数据转化代码。原创 2022-01-27 16:25:53 · 2585 阅读 · 0 评论 -
js中img的src属性修改时的图片存在缓存
修改图片的src属性的值,如果图片的src不变的话,浏览器会存在缓存,导致图片不会更新,可以在 src 后面加上时间戳或者随机数,使src 变化<img :src="imgSrc" alt="">this.imgSrc = '/api/info/image.png?x=' + new Date().getTime()...原创 2022-01-15 15:58:10 · 1251 阅读 · 0 评论 -
js中ip地址比较大小
js中通过把ip地址转换为整数来比较大小ipToint(ip) { let num = 0 ip = ip.split('.') num = Number(ip[0]) * 256 * 256 * 256 + Number(ip[1]) * 256 * 256 + Number(ip[2]) * 256 + Number(ip[3]) num = num >>> 0 return num}原创 2022-01-11 19:36:24 · 1108 阅读 · 1 评论 -
js数组对象或数组去重
for (let i = 0; i < arr.length - 1; i++) { for (let j = i + 1; j < arr.length; j++) { if (arr[i] === arr[j]) { arr.splice(j, 1) // 因为数组长度减小1,所以直接 j++ 会漏掉一个元素,所以要 j-- j-- }}补充如果要比较对象中的值是否相等,可以使用 lodash/isEqual方法,可以比较对象嵌套深层的内容im原创 2021-12-24 11:50:31 · 675 阅读 · 0 评论 -
后台接口返回文件流前端实现文件下载
前因:传参后发起post请求,后台接口返回的是二进制文件流,接收的内容如图:后果:将接收到的文件流直接下载并保存到本地。要下载的文件是一个.zip 压缩包。按一般方式请求后台接口,打印接口返回的内容:下载方法:dwonload() { if (this.$refs.checkIssueForm('ruleForm')) { let params = { remark: this.remark } this.$ajax.post('/api/downloa原创 2021-11-18 14:09:18 · 14501 阅读 · 0 评论 -
js正则表达式使用详解
function Animal (name, age) {this.name = namethis.age = age}Animal.prototype = {getName () {return this.name},getAge () {return this.age}}const animal = new Animal(‘小黄’, 3)console.log(animal) // Animal {name: “小黄”, age: 3}console.log(animal.p原创 2021-10-14 14:22:53 · 9369 阅读 · 0 评论 -
js中修改数组对象中对象的键名
场景分析:一个数据字典列表,如下let dictList = [ {id: 1, name: "sn", desc: "序列号"}, {id: 2, name: "prop", desc: "属性"}, {id: 3, name: "type", desc: "类型"}, {id: 4, name: "user", desc: "负责人"}]后台返回的数据列表,如let data = [ {sn: 121, user: "张氏"}, {sn: 122, prop: "属性1", typ原创 2021-09-27 20:23:21 · 3662 阅读 · 0 评论 -
js判断字符串是否为json格式
isJSON(str) { if (typeof str === 'string') { try { let obj = JSON.parse(str) if (typeof obj === 'object' && obj) { return true } else { return false } } catch (e)原创 2021-09-22 19:58:56 · 558 阅读 · 0 评论 -
js字符串格式化为json数据,截取文件路径
数据:content: "[{'name': 'staffid', 'old_val': 1, 'new_val': 3}]"op_content = op_content.replace(/'/g, '"')op_content = op_content.replace(/None/g, '"None"')op_content = JSON.parse(op_content)文件路径:path: "D:\\work\\Xui\\upload-file\\信息.xlsx"截取为 信息.xlsx原创 2021-08-26 14:36:20 · 292 阅读 · 0 评论 -
ES6 module语法中export和import的使用
ES6 中 module 的语法export 命令模块功能主要由两个命令构成:export 和 import。 export 命令用于规定模块的对外接口,import 命令用于输入其他模块提供的功能。一个模块就是一个独立的文件。该文件内部的所有变量,...原创 2021-08-15 14:52:54 · 2031 阅读 · 0 评论 -
vue中使用xlsx实现excel表的导入和导出
页面中经常会遇到【导入和模板下载】的需求。下面是针对此类问题的一种实现方式主要使用的库是 xlsx 库安装包npm i xlsx构造一个 excel.js 的配置文件import XLSX from 'xlsx'class ColumnDef { /** * * @param {string} name 列的标题 * @param {string} field 列的字段 * @param {object} [options] 列选项 * @param {.原创 2021-08-10 20:15:29 · 2849 阅读 · 2 评论 -
js遍历两个数组找出不同的元素
前提:有两个数组,数组A和数组B,假设数组B是数组A的子集,遍历这两个数组,然后把数组B中缺少的数组A的元素添加到数组B中如:数组A:let arrA = [ { id: 1, data: [ {times: 6, type: 1}, {times: 23, type: 2}, {times: 6, type: 3} ] }, { id: 2, data: [ {times: 3, type: 1}, {times: 8, type: 3原创 2021-08-04 15:18:11 · 3658 阅读 · 0 评论 -
js数组对象按对象属性排序或修改对象属性名
根据数组对象中对象的某个属性值把数组排序假设数组为:let arr = [ { rank: 1, name: '张三' }, { rank: 4, name: '李四' }, { rank: 2, name: '王五' }, { rank: 3, name: '唐三' }, { rank: 5, name: '小奥' }]将这个数组按 rank 属性从小到大排序返回methods: { getSort(a, b) { return a.rank - b.rank原创 2021-08-04 15:02:26 · 927 阅读 · 0 评论 -
ES5的相关特性
ES 5的相关特性字符串相关String.trim()删除字符串两端的空白字符let str = ' hello 'console.log(str.trim()) // 'hello'JSON.parse()JSON的一个常见用途是从 web 服务器接收数据。想象一下,从 web 服务器收到这条文本字符串:const obj = '{ "name": "bill", "age": 62 }'js 函数 JSON.parse() 用于将文本转换为 js 对象:consol原创 2021-08-03 17:38:59 · 95 阅读 · 0 评论 -
js常见正则表达式验证
验证 端口是否合法端口范围:0-65535if (!(/^[1-9]\d*|0$/.test(value) && (1 * value) >= 0 && (1 * value) <= 65535)) { return false}验证 IP地址是否有效if (!(/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|2原创 2021-07-13 11:02:11 · 1982 阅读 · 0 评论 -
js递归学习
递归:就是函数自己调用自己本身,或者在自己函数调用的下级函数中调用自己。递归的两个必要因素:递归方程,递归结束条件递归算法的核心:在有限次可预见性结果中,找到结果与上一次结果之间的关系梳理清楚本次结果和上一次结果的关系有哪些方面或是因素在草稿纸上写出前几次的结果,或者画图,更容易找到规律,这种规律实际上就是递归方程递归的步骤寻找递推规律的关系判断递推关系的临界条件将递推关系的结构转换为递归体将临界条件加入递归体中经典案例1. 求和求 1-100的和分析:计算 1 + 2原创 2021-07-04 18:53:24 · 1963 阅读 · 0 评论 -
js获取对象数组的最深层级数
数据结构: { id: 0, label: '0' children: [ { id: 1, label: '1', children: [ { id: 3, label: '3' } ] }, { id: 2, label: '2' } ]原创 2021-06-22 09:49:39 · 1634 阅读 · 0 评论 -
Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement‘: Tainted canvases may not be exported.
问题场景是需要把 canvas 转化为 base64的图片 遇到的报错问题百度一搜都是一样的解决方法,都说给图片设置 img.setAttribute('crossOrigin', 'Anonymous')但是我用 谷歌搜索就发现了问题的解决方法每次遇到 Tainted canvases字眼,就要想一下你是不是直接双击打开的页面测试?如果是,建议启动个本地web服务,以http url请求的方式在浏览器打开~其实就是使用 live server 运行代码问题就可以解决了...原创 2020-12-18 10:15:36 · 2678 阅读 · 4 评论 -
js向对象中添加命名对象
需要的对象类型{ mimi: { value: 'mimi' }, status: { value: 'status' },}如果构建const base = {}base['mimi'] = { value: 'mimi'}原创 2020-11-27 14:52:09 · 859 阅读 · 0 评论 -
js空数组中增加对象
// 提供的数据有:let oper_x = ['op1', 'op2', 'op3']let oper_y = [3, 2, 1]// 需要转换成的数据类型:data: [{value: 3, name: 'op1'}, {value: 2, name: 'op2'}, {value: 1, name: 'op3'}]如何转换let oper_x = ['op1', 'op2', 'op3'] let oper_y = [3, 2, 1] let data =原创 2020-10-22 19:47:35 · 9407 阅读 · 0 评论 -
js中的立即执行函数简介
立即执行函数的定义:声明一个函数,并马上调用这个匿名函数就叫做立即执行函数,也可以说立即执行函数是一种语法,让你的函数在定义以后立即执行立即执行函数的写法:(function(){ // code}())(function(){ // code})()上边的两种写法,都是以圆括号开头,引擎会意味着后面跟的是表达式,而不是一个函数定义语句,所以就避免了错误,这就叫做 “立即调用的函数表达式”立即执行函数还有一些其他的写法(加一些小东西,不让解析成语句就可以了)// 立即执行函数//原创 2020-08-04 10:17:26 · 140 阅读 · 0 评论 -
js中apply、bind、call的用法和区别
先来看一下 this 的指向问题:var name = '小王', age = 12;const obj = { name: '小李', objAge: this.age, info: function () { console.log(this.name + '的年龄是:' + this.age) }}console.log(obj.name, obj.objAge)obj.info()输出结果:小李 12小李的年龄是:undefined解析:在 obj 中的 obj原创 2020-08-04 10:03:05 · 139 阅读 · 0 评论 -
jQuery插件-搜索下拉框bootstrap-select
我主要是使用 bootstrap-select 插件的搜索下拉框的功能先看看效果使用示例1.引入样式表 <link type="text/css" rel="stylesheet" href="lib/bootstrap.css"> <link type="text/css" rel="stylesheet" href="css/bootstrap-select.min.css" /> <script src="lib/jquery-1.11.3.mi原创 2020-07-29 13:19:35 · 706 阅读 · 0 评论 -
原生javasript实现搜索框淡入淡出显示隐藏的效果
搜索框淡入淡出显示隐藏效果演示javascript部分代码<!-- 搜索框显示隐藏部分 --><script> //获取元素 var icon = document.getElementById("searchMe"); var bar = document.getElementById("searchBar"); var timer = null; va...原创 2019-07-25 16:22:04 · 194 阅读 · 0 评论 -
javascript阻止form表单自动提交的方法
javascript阻止form表单自动提交的方法JavaScript中,阻止form表单自动提交的方法有两种:(1) 使用preventDefault()在标准浏览器中,阻止浏览器自动提交form表单的默认行为使用event.preventDefault()。而在IE6 - 8中,使用returnValue属性来实现。<form action="login.aspx" metho...原创 2019-07-19 16:10:41 · 3793 阅读 · 0 评论