javascript
关注
分享
扫一扫
文章平均质量分 50
沉迷...
这个作者很懒，什么都没留下…
展开
-
生成随机验证码字符串密码
前端JavaScript生成随机的密码字符串验证码原创 2024-10-27 13:48:27 · 407 阅读 · 0 评论 -
如何定位el-tree中的树节点当父元素滚动时如何定位子元素
如果为 true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的 scrollIntoViewOptions: {block: “start”, inline: “nearest”}。如果为 false，元素的底端将和其所在滚动区的可视区域的底端对齐。Element 接口的 scrollIntoView() 方法会滚动元素的父容器，使被调用 scrollIntoView() 的元素对用户可见。定义滚动是立即的还是平滑的动画。auto：滚动行为由 scroll-behavior 的计算值决定。原创 2023-11-19 11:25:38 · 638 阅读 · 0 评论 -
如何通过把setTimeout异步转为同步
以下是延时10秒的效果 先打印27秒 等待10秒后执行后面的代码。原创 2023-11-14 09:04:12 · 1031 阅读 · 1 评论 -
实现点击复制到剪切板功能
VueUse不是Vue.use，它是为Vue 2和3服务的一套Vue Composition API的常用工具集，是目前世界上Star最高的同类型库之一。它的初衷就是将一切原本并不支持响应式的JS API变得支持响应式，省去程序员自己写相关代码。VueUse 是一个基于 Composition API 的实用函数集合。通俗的来说，这就是一个工具函数包支持了更好的逻辑分离，它可以帮助你快速实现一些常见的功能，免得你自己去写，解决重复的工作内容。以及进行了机遇 Composition API 的封装。原创 2023-07-23 21:27:07 · 428 阅读 · 0 评论 -
Symbol的使用,es6获取key值的新方法
symbol这个英文单词表示"唯一"没错它是javascript新增的基本数据类型,使用symbol来当做属性名,可以有效的防止属性重复,属性值被覆盖。原创 2022-07-20 21:38:16 · 1584 阅读 · 0 评论 -
javascript颜色值转换 rgb 16进制互转
【16进制转换为RGB 】16进制一般有3位或者6位,如果为3位的话，需要补齐为6位【RGB转换为16进制 】原创 2022-06-05 15:53:41 · 3421 阅读 · 1 评论 -
js中正则表达式的使用
什么是正则表达式？一个正则表达式是一种从左到右匹配主体字符串的模式。 “Regular expression”这个词比较拗口，我们常使用缩写的术语“regex”或“regexp”。 正则表达式可以从一个基础字符串中根据一定的匹配模式替换文本中的字符串、验证表单、提取字符串等等。想象你正在写一个应用，然后你想设定一个用户命名的规则，让用户名包含字符、数字、下划线和连字符，以及限制字符的个数，好让名字看起来没那么丑。 我们使用以下正则表达式来验证一个用户名：正则表达式其实就是在执行搜索时的格式，它由一些字母和数原创 2022-06-04 17:24:08 · 1396 阅读 · 0 评论 -
javascript中 new set和new map的使用
Map对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。构造函数Map可以接受一个数组作为参数。遍历方法Map与对象的互换JSON字符串要转换成Map可以先利用JSON.parse()转换成数组或者对象，然后再转换即可。Set 对象允许你存储任何类型的值，无论是原始值或者是对象引用。它类似于数组，但是成员的值都是唯一的，没有重复的值。Set 本身是一个构造函数，用来生成Set 数据结构。Set函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初原创 2022-06-04 15:27:12 · 975 阅读 · 0 评论 -
lodash常用api 归类
lodash常用api中文文档 https://www.lodashjs.com/Array：适用于数组类型，比如填充数据、查找元素、数组分片等操作Collection：适用于数组和对象类型，部分适用于字符串，比如分组、查找、过滤等操作Function：适用于函数类型，比如节流、延迟、缓存、设置钩子等操作Lang：普遍适用于各种类型，常用于执行类型判断和类型转换Math：适用于数值类型，常用于执行数学运算Number：适用于生成随机数，比较数值与数值区间的关系Object：适用于对象类型，原创 2022-05-23 23:04:55 · 979 阅读 · 0 评论 -
前端面试十大手写功能 防抖,节流,NEW,Call,apply,Blind,柯里化,对象扁平化,数组扁平化,图片懒加载,异步并发数限制
1.防抖2.节流3.NEW4.Call5.apply6.Bind7.柯里化: 只传递给函数一部分参数来调用他, 让他去返回一个函数去处理剩下的参数8.图片懒加载9.对象扁平化10. 数组扁平化11.异步并发数限制原创 2022-05-06 22:27:02 · 483 阅读 · 0 评论 -
防抖和节流的应用
防抖一、什么是防抖？防抖阻止了事件的多次调用，规定时间内只会执行一次。二、防抖解决了什么问题假设一个用户高频点击一个按钮，点击按钮后会向后台发送请求，如果不使用防抖，就会发送许多重复的Ajax请求，造成服务器压力。使用防抖后，规定时间内，只会发送一次Ajax请求，可以有效地减缓服务器的压力。三、实现防抖的基本代码通过监听输入框的输入事件，通过定时器每隔一秒获取一次用户输入的内容，如果一秒内用户又进行了输入，清除上一次的定时器，重新计时一秒，计时结束后将用户输入的内容打印到控制台。<!DO原创 2022-03-10 11:25:01 · 967 阅读 · 0 评论 -
javascript 常用命名前缀
一、函数 & 方法命名方法： 小驼峰式命名法命名规范： 前缀应该为动词命名建议：常用动词约定动词 含义语义前缀判断是否可执行某个动作can+判断是否含义某个值has +事件处理函数：handle+数据处理函数resolve+数据格式处理函数format+数据获取函数:fetch+ get+设置某个值:set+判断某个值:is加载某些数据load+初始化函数：init+...原创 2022-02-28 11:22:53 · 528 阅读 · 0 评论 -
测试javascript脚本执行时间 console.time 和timeEnd用法
最近由于做性能测试 要测试一段代码的执行时间 所以用到了 console.time 和console.timeEnd来给脚本做性能测试其中console.time方法是开始计算时间console.timeEnd是停止计时 输出脚本执行的时间在使用的时候传入一个参数 作为计时器的名称 它可以让你分清是在那个代码段运行所消耗的时间这两个方法是是最基本最自己的方法一下是我写的一个小demo 往页面插入十万dom结构 <body> <div class="app"&g.原创 2021-11-14 12:05:17 · 1582 阅读 · 0 评论 -
JS检测浏览器开发者工具是否打开
在有些情况下 我们需要检测用户是否打开了浏览器的开发者工具 右键检查出来的就是开发者工具 比如前端爬虫检测 或者是避免用户非法篡改信息 本篇文章主要讲述几种前端js检测开发者工具是否打开的方法1.重写toString()对于一些浏览器，比如Chrome、FireFox，如果控制台输出的是对象，则保留对象的引用，每次打开开发者工具的时候都会重新调用一下对象的toString()方法将返回结果打印到控制台（console tab）上。所以只需要创建一个对象，重写它的toString()方法，然后在.原创 2021-11-14 11:31:15 · 6471 阅读 · 2 评论 -
javascript数组去重
数组去重的方法一 利用Es6 Set去重(Es6中最常用)function unique (arr) { return Array.from(new Set(arr))}var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];console.log(unique(arr)) //[1, "tru原创 2021-11-04 20:15:57 · 150 阅读 · 0 评论 -
多维数组转一维数组的方式
第一种方式使用字符串的方式// 此种方法如果是数字类型的话 转换为了字符串 let tempArr = [1, [2, 3], [4, 5, [6, 7]]]; let result_str1 = tempArr.join(',').split(','); console.log(result_str1); // ["1", "2", "3", "4", "5", "6", "7"]改进使用了map对数组进行再次迭代 把数组转换为数字类型。这种情况只适用于数组中各个项都是n原创 2021-10-20 09:49:11 · 1139 阅读 · 0 评论 -
promise.allSettled了解吗 手动实现
promise.allSettled是ES2020新特性可以执行多个promise对象 获取多个promise对象状态 无论成功或者失败的状态 let p1 = new Promise((resolve, reject) => { setTimeout(() => { resolve(1111) }, 1000) }) let p2 = new Promise((resolve, reject) =>.原创 2021-11-01 21:25:45 · 297 阅读 · 0 评论 -
for循环中使用setTimeout打印多个同样的值 使用闭包 或者作用域解决
需求 打印出0-5 for(var i=0;i<=5;i++){ setTimeout(() => { console.log(i); //6个6 }); }使用作用域解决 把var换成let for(let i=0;i<=5;i++){ setTimeout(() => { console.log(i); // 0-5 }); }使用闭包解决 自执行函数 for (var i原创 2021-10-31 15:55:06 · 331 阅读 · 0 评论 -
手写代码实现promise.all方法
先看一下all方法的使用Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。需要特别注意的是，Promise.all获得的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的，即p1的结果在前，即便p1的结果获取的比p2要晚。这带来了一个绝大的好处：在前端开发请求数据的过程中，偶尔会遇到发送多个请求并根据请求顺序获取和使用数据的场景原创 2021-10-31 15:27:45 · 839 阅读 · 0 评论 -
原生js封装方法 从url中获取指定的参数
使用原生javascript封装方法 调用这个方法传入需要的参数的到值 function getParamFromUrl(url, params) { if (typeof url != "string") return new Error("请输入合法URL"); const obj = {}; let str = url.split("?")[1]; str && str.split("&").forEach(.原创 2021-10-15 16:01:03 · 466 阅读 · 0 评论 -
在进行ajax请求的时候参数值为null和给一个默认值的区别 如果某一个参数是null,则axios就不会发这个参数 如果某一个参数是““，axios是会发出这个参数
在进行ajax请求的时候参数值为null和给一个默认值的区别数据项为null//数据项data(){ formData: { subjectID: null, // 学科 contentsData: null, // 目录 },}ajax:数据项为非nulldata(){ formData: { subjectID: '', // 学科 contentsData: '', // 目录原创 2021-09-04 17:46:09 · 559 阅读 · 1 评论 -
实现数组转对象 [{{label: ‘男‘, value: 0}}]转换为{0: ‘男‘, 1:‘女‘}格式
实现数组转对象 [{{label: ‘男’, value: 0}}]转换为{0: ‘男’, 1:‘女’}格式 // 数组转对象的方法 const arr = [{label: '男', value: 0},{label: '女', value: 1}] function f(arr) { // 写代码 // reduce // 方法一 // let obj = {}; // arr.map((e) => { //原创 2021-09-04 09:53:59 · 895 阅读 · 0 评论 -
数组转树状结构
数组转树状结构数组的原始结构const data = [ { id: '01', name: '张大大', pid: '', job: '项目经理' }, { id: '02', name: '小亮', pid: '01', job: '产品leader' }, { id: '03', name: '小美', pid: '01', job: 'UIleader' }, { id: '04', name: '老马', pid: '01', j原创 2021-08-31 10:32:14 · 891 阅读 · 2 评论 -
如何统一的对组件进行管理
如何统一的对组件进行管理结构如下导入一次把layout要用到Navbar, Sidebar, AppMain 的组件都导入 子组件内不需要别的操作把组件都先导入index.js进行统一的管理// 导入组件的默认名称是default 但是通过as起了一个别名export { default as Navbar } from './Navbar'export { default as Sidebar } from './Sidebar'export { default as AppMain }原创 2021-08-28 09:32:36 · 635 阅读 · 0 评论 -
javascript调试 debugger 代码调试
javascript代码调试 debugger的使用使用调试js代码的时候我们常常使用浏览器 手动的打断点 如果代码量比较大的话就需要用到debugger了定义和用法debugger 语句用于停止执行 JavaScript，并调用 (如果可用) 调试函数。使用 debugger 语句类似于在代码中设置断点。通常，你可以通过按下 F12 开启调试工具， 并在调试菜单中选择 “Console” 。注意： 如果调试工具不可用，则调试语句将无法工作//开启 debugger ，代码在执行到第三行前转载 2021-08-24 22:19:07 · 9794 阅读 · 1 评论 -
vue项目中input框不允许输入 必须通过选项选择的几种方式
vue项目中input框不允许输入 必须通过选项选择的几种方式1： readonly属性定义和用法readonly 属性规定输入字段为只读。只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本。readonly 属性可以防止用户对值进行修改，直到满足某些条件为止（比如选中了一个复选框）。然后，需要使用 JavaScript 消除 readonly 值，将输入字段切换到可编辑状态。readonly 属性可与 或 配合使用。<input typ原创 2021-08-23 17:40:51 · 13113 阅读 · 0 评论 -
字符串方法
字符串方法速查String 对象属性属性描述constructor对创建该对象的函数的引用length字符串的长度prototype允许您向对象添加属性和方法String 对象方法方法描述charAt()返回在指定位置的字符。charCodeAt()返回在指定的位置的字符的 Unicode 编码。concat()连接两个或更多字符串，并返回新的字符串。endsWith()判断当前字符串是否是以指定的子字符串结尾原创 2021-08-22 15:45:30 · 450 阅读 · 0 评论 -
分页组件 页码居中 核心算法
// 创建分页组件需要的 按钮数组 // btnCount: 最多能看到几个按钮 // total: 总条数 // size: 每页几条 // page: 当前第几页 function f(total, size, page, btnCount = 5) { // pageNum是总页数 let pageNum = Math.ceil(total / size) // console.log(pageNum) // arr用于存放返回的页码 le.原创 2021-08-22 14:23:12 · 472 阅读 · 0 评论 -
javascript最简单的深拷贝 浅拷贝
最简单的浅拷贝 深拷贝引用类型, 进行赋值时, 赋值的是地址浅拷贝let obj = { name: 'zs', age: 18}let obj2 = { ...obj}深拷贝let obj = { name: 'zs', age: 18, car: { brand: '宝马', price: 100 }}let obj2 = JSON.parse(JSON.stringify(obj))console.log(obj原创 2021-08-20 20:01:39 · 383 阅读 · 0 评论 -
Object.keys() Object.values()的使用
假如有这样一个需求，打印下面这个对象中所有的键： var person = { name: '张三', age: 18, 66: '66', 2: '2' }; 1.使用for in循环试一下 for(var item in person){ console.log(item); } 控制台打印的结果是 ： ...转载 2021-08-20 19:41:00 · 753 阅读 · 0 评论 -
搜索结果过滤 列表过滤
搜索结果过滤 列表过滤搜索效果显示 <!-- 准备好一个容器--> <div id="root"> <h2>人员列表</h2> <input type="text" placeholder="请输入名字" v-model="keyWord"> <ul> <li v-for="(p,index) of filPerons" :key="index"> {{p.name}}-{{p.age}}-原创 2021-08-12 14:38:14 · 702 阅读 · 0 评论 -
统计元素每个元素出现的次数 把数组转对象
统计元素每个元素出现的次数 把数组转对象统计每个元素出现的次数[“b”, “c”,“b”, “c”,“a”, “b”, “c”] 统计每个元素出现的次数,结果是： {a：1，b: 3, c: 3}const arr = ["b", "c", "b", "c", "a", "b", "c"];let obj = arr.reduce(function (AllNames, name) { // 使用in判断AllNames对象里面是否有这个元素 if (name in AllNam原创 2021-08-12 14:00:12 · 631 阅读 · 0 评论 -
js中in关键字的使用 如何使用它判断对象是否是数组/对象的元素/属性
js中in关键字的使用1.判断对象是否是数组/对象的元素/属性in在单独使用时 in操作符会在通过对象能够访问给定属性时返回true//当对象是数组时 变量指的是数组的索引 const arr=['a','b','c'] console.log('a' in arr); //falseconsole.log(1 in arr); //true console.log(3 in arr);// false// 当对象是对象时 变量指的是对象的属性let obj={原创 2021-08-11 20:55:54 · 1092 阅读 · 0 评论 -
数组转对象的方法 数组转树状结构 对象转数组
数组转对象的方法 数组转树状结构 对象转数组 // 数组转对象的方法 const arr = [{label: '男', value: 0},{label: '女', value: 1}] function f(arr) { // 写代码 // reduce // 方法一 // let obj = {}; // arr.map((e) => { // obj[e.value] = e.label;原创 2021-08-04 21:55:12 · 787 阅读 · 0 评论 -
javascript数组常用api 方法
本文总结了javascript常用的数组的方法包括 forEach filter map join concat sort splice indexOf reverse find every push unshift pop shift等原创 2021-07-11 18:25:38 · 3347 阅读 · 1 评论