![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
爱哭的赵一一
这个作者很懒,什么都没留下…
展开
-
一文揭秘JavaScript中你不知道的async与await实现原理与细节
使用promise解决es5中的回调地狱,并使用生成器实现async与await,实现异步代码同步化,极大的增强了代码可读性。原创 2022-09-16 21:34:48 · 566 阅读 · 0 评论 -
带立即执行的防抖函数
立即执行防抖debounce原创 2022-06-09 10:16:58 · 222 阅读 · 0 评论 -
排序数组中获取某个值的左右边界
排序数组获取边界问题原创 2022-03-14 14:08:47 · 1543 阅读 · 0 评论 -
js堆排序及其topk问题
堆排序堆其实就是一棵完全二叉树小根堆向下调整函数如下:function sift2(arr, low, high) {//low表示当前需要调整的子树的根节点//i表示的是当前的空位 let i = low; //j表示当前子树的左孩子 let j = 2 * i + 1; //缓存当前子树的根节点 let tmp = arr[low]; //如果左孩子小于或等于树的大小 while (j <= high) { //判断当前节原创 2022-02-08 21:00:58 · 492 阅读 · 0 评论 -
KMP算法 获取前缀next数组 并且实现KMP算法
KMP算法整体思路是参考的B站UP的 点这里去观看视频function getNext(pattern){ let next = []; let j = 0;//j指针最开始在0位置; let k = -1; //第一个k的值为-1 k代表的是上一个的回退位置 next[0] = k; //next数组中存储的就是所有的k,next[0]也就是存储的第一个k,即为-1; while(j < pattern.length - 1 ){ if原创 2022-01-31 14:18:32 · 750 阅读 · 0 评论 -
全排列解法暴力递归
// 全排列var permute = function (nums) { let res = []; process(nums, 0, res) console.log(res);};function process(nums, i,res) { if (i === nums.length) { res.push(nums); return } for (let j = i; j < nums.length; j++) { swap(nums,原创 2022-01-25 11:00:12 · 403 阅读 · 0 评论 -
在js中的深拷贝使用递归进行了深拷贝处理了数组和对象的逻辑并解决了循环引用
// 深拷贝function deepCopy(obj,cache = new WeakMap()){ if(typeof obj === "object"){ const isArray = Array.isArray(obj) let temp = isArray?[]:{}; //map缓存中是否存在当前对象或数组 if(cache.get(obj)){ //如果存在那么直接返回当前的对象或数组原创 2021-12-10 16:24:44 · 359 阅读 · 0 评论 -
Vue中使用绑定属性的.sync修饰符
在Vue中使用.sync修饰符 <table-case :case-list.sync="solutionInfo.caseListJson" />如上面代码中的.sync修饰符意为在子组件tableCase中想要改变父组件中的值,其实是一个语法糖子组件改变父组件中的值在Vue中是不提倡的,或者说是不允许的,因此我们如果想改变父组件中的值,那么我们必须使用this.$emit("eventHandler",要传的值),然后再父组件中进行监听eventHandler事件然后绑定回原创 2021-11-19 15:58:20 · 1012 阅读 · 0 评论 -
Vue组件高级用法之组件递归
Vue组件高级用法之组件递归在项目中有时需要使用组件递归,如后台管理系统的侧边栏我们可以在组件内部写上name值export default { name: "submenu", // 必须给name值}然后在本组件中直接调用自身即可,必须要有if条件判断,否则会进入死循环// 必须加v-if条件,否则调用会进入死循环,程序会崩<el-submenu v-if="menu.children && menu.children.length"> <sub原创 2021-11-05 15:39:52 · 249 阅读 · 0 评论 -
两种方案网页进行图片预加载(限制并发)接口请求类似
var urls = [ 'https://www.kkkk1000.com/images/getImgData/getImgDatadata.jpg', 'https://www.kkkk1000.com/images/getImgData/gray.gif', 'https://www.kkkk1000.com/images/getImgData/Particle.gif', 'https://www.kkkk1000.com/images/getImgData/arit原创 2021-11-02 15:59:27 · 631 阅读 · 0 评论 -
js自定义call方法来加深对this指向的认识
因为调用方式基本如下:fn.myCall(null,arg)所以在myCall函数中的this指向调用它的fn,在myCall函数中首先将this的值保存下来,然后将要改的(Function.prototype as any).myCall = function(context = globalThis, ...args) { if (typeof this !== "function") { throw new TypeError("not funciton"); .原创 2021-10-27 14:48:23 · 95 阅读 · 0 评论 -
css使用js中的变量
css使用js中的变量如在Vue中,我们可以绑定在style上面变量,然后使用css来使用该变量,如下:<div class="taskContainer2 " :style="`--pageSize: ${pageSize}px`"></div>.taskContainer2 { height: var(--pageSize); }这样子便可以在css或者less等样式文件中使用js控制的变量的值,可以用来做动画或者一下其他的事情,非常便利。微信小程序中的使用方式也是一原创 2021-09-16 17:23:20 · 2336 阅读 · 0 评论 -
ios与安卓禁止所有滚动和输入框上推页面的不同处理方案
inputios中的input事件在ios中input事件与Android中的input事件不同,在安卓中如果有input输入框在页面底部,或者说当聚焦时键盘会遮挡input输入框时,ios系统会上推页面将键盘部分的高度并使页面上推键盘高度的值,因此可以在页面上推的时候获取scrollTop的值暂存,在键盘收起时将暂存的值重新赋值给scrollTop因此实现页面在键盘展开与收起时位置相同。其实在键盘收起时也可以获取一下scrollTop的值,用当前值减去暂存的值就是键盘的高度,也就是页面上推的高度。原创 2021-09-09 18:32:05 · 1351 阅读 · 0 评论 -
使用PIXI制作简单canvas逐帧动画的心得
//在我们的html模板中有我们的代码块 主要使用ref属性 来进行动态添加canvas节点 <div class="Index_container" id="Index_container" ref="container">//首先在Vue项目中导入我们的PIXI库import * as PIXI from "pixi.js"//可以在mounted中调用我们的方法createCanvas来初始化PIXI画布;mounted(){ this.createCanvas()}cre原创 2021-07-20 16:48:07 · 1416 阅读 · 0 评论 -
移动端使用弹出层后进行背景固定
在移动端使用弹出层时,背景会进行滚动,我们可以进行背景固定来阻止背景滚动如下:我们先拿到当前页面滚动距离: afterOpen() { //先把body设置为position:fixed;然后将当前页面滚动距离设置为body的top属性,背景就不可滚动了 scrollTop = document.scrollingElement.scrollTop; document.body.classList.add(bodyCls); document.body.style.top原创 2021-07-15 17:26:56 · 260 阅读 · 0 评论 -
页面局部滚动获取局部触底事件
//将滚动事件绑定在父级元素上,当父级元素触发滚动时可以通过如下方案拿到当前滚动的位置 e.target.scrollHeight - e.target.scrollTop - e.target.offsetHeight如果想不那么精确可以使用下面函数来进行一个触底事件 handlerScroll(e) { this.isLoadMore = e.target.scrollHeight - e.target.scrollTop - e.target.offsetHeight < 10原创 2021-07-08 17:19:29 · 315 阅读 · 0 评论 -
VUE项目进行页面刷新的几种方式
我们在写项目的时候,经常会遇到,用户执行完某个动作,改变了某些状态,需要重新刷新页面,以此来重新渲染页面。如:用户登录成功、增加、删除、更新等。原始方法:location.reload();vue自带的路由跳转:this.$router.go(0);用过的人都知道,前两者都是强制刷新页面,会出现短暂的闪烁,用户体验效果不好。所以,我们选择第三种方式:3. 首先在App里面写下如下代码:<template> <div id="app"> <r转载 2021-06-29 22:36:46 · 403 阅读 · 0 评论 -
Vue3中的keep-alive路由缓存
在Vue3中的路由缓存和Vue不同,在vue2中只需要使用<keep-alive>将<router-vue/>包裹起来即可,但是在Vue3中,该方法不生效,我们需要使用作用域插槽如下:<router-view #default="{Component}"> <keep-alive> <component :is="Component" v-if="$route.meta.keepAlive" /> <原创 2021-05-20 10:36:19 · 4137 阅读 · 0 评论 -
H5界面调用微信jdk发起微信支付
官方文档微信支付https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6微信授权获取codehttps://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#58准备工作微信公众平台企业账号商户号开通jsapi支付权限设置了页面授权域名,并且是你网站的域名地址基本接口权限,尤其是jssdk部分权限,保证尽可能都开通htt转载 2021-04-26 21:38:43 · 661 阅读 · 0 评论 -
创建Vue3项目和路由以及vant组件实现使用params传参
创建路由时,使用npm install vue-router@next -S,使用vant组件也是npm install vant@next -S,今天做项目时踩到了vue-router传参的坑(query和params),所以决定总结一下二者的区别。直接总结干货!!!1.query方式传参和接收参数传参:this.$router.push({ path:'/xxx', query:{ id:id } }) 接原创 2021-04-09 11:05:04 · 1200 阅读 · 0 评论 -
最少硬币交换问题 ---动态规划
let coins = [1, 2, 5, 10]function coinChange(coins, subMoney) { // 创建一个dp数组,里面的值为无穷大 let dp = new Array(subMoney+1).fill(Infinity); // 交换0元时需要0枚硬币 dp[0] = 0 // i为要交换的金额 for (let i = 1; i <= subMoney; i++) { // j为可使用硬币的下标原创 2021-02-05 19:01:20 · 345 阅读 · 0 评论 -
打家劫舍--dp问题
/** * @param {number[]} nums * @return {number} *//** * @param {number[]} nums * @return {number} *//**假设打劫前i家能偷到的最大钱数为f(i),第i家有的钱数为nums[i],则有以下公式:当i为1时:f(i) = nums[i]当i为2时:f(i) = max(nums[i],nums[i-1])当i大于2时:f(i) = max(nums[i-1] , nums[i-2] +原创 2021-02-03 19:50:15 · 139 阅读 · 0 评论 -
二分查找算法
先找一个区间arr[left,right],判断要查找的数是否在该区间内,如果不在那么就缩小为区间的一半function binarySearch(arr,num){ let left = 0; let right = arr.length-1; //当左区间坐标小于等于右区间坐标时一直循环查找 while(left <= right){ //左右区间的中间变量 mid 是个整数 let mid = Math.floor((left + ri原创 2021-01-31 20:30:35 · 101 阅读 · 0 评论 -
js判断输入的括号的合法性
话不多说,直接上代码,注释非常清晰!// 判断输入的括号是否是合法的function isVaild (str){//判断输入的括号个数是否为偶数,如果不是偶数直接返回false if(str.length%2 != 0){ return false } //判断输入的最后一个是否为右括号,如果为左括号直接false else if(str[str.length-1] == "(" || str[str.length-1] == "{" || str[原创 2020-11-15 14:28:46 · 1263 阅读 · 0 评论 -
页面优化requestIdleCallback和requestAnimationFrame详解
requestIdleCallback和requestAnimationFrame详解API window.requestIdleCallback只有当系统有空闲时间时才会执行,若一直没有空闲时间则一直会等待,有一个options可选timeout超时取消,意思是当等待时间超过设定时间时就取消该任务var handle = window.requestIdleCallback(callback[, options])callback:回调,即空闲时需要执行的任务,该回调函数接收一个IdleDea原创 2021-01-29 22:49:51 · 795 阅读 · 0 评论 -
topK问题,找出页面前K个元素一般来说K远远小于总值 如:JS获取一个页面出现次数前三的的标签,
//获取页面所有标签let allTags = document.querySelectorAll("*")let obj = {};let tags = []//给每个标签计数存在对象中allTags.forEach(item=>{ if(!obj[item.tagName]){ obj[item.tagName] = 1; }else{ obj[item.tagName]++; } })//将对象中原创 2021-01-29 22:21:49 · 195 阅读 · 0 评论 -
js中的字符串replace方法是第二个参数使用函数
字符串的replace方法的第二个参数使用函数时,接受三个参数,第一个参数为查找到的字符串组,第二个参数是查找到的字符串的起始坐标,第三个是查询的字符串的原始串期待返回一个字符串结果用来替换...原创 2021-01-14 21:59:31 · 366 阅读 · 0 评论 -
关于Promise的then与catch的一点思路
在promise的reject之后会执行catch,catch执行之后会返回一个成功的promise所以会执行catch之后的then,除非在catch里面显式的返回一个reject之后才会执行catch之后的catch原创 2021-01-14 21:20:22 · 1526 阅读 · 0 评论 -
地址智能识别使用address-smart-parse库
<template> <div> <van-nav-bar :title="this.$route.query.id?'编辑地址':'新增地址'" left-arrow @click-left="onClickLeft"/> <div class="consignee"> <ul> <li> <h5&g原创 2021-01-13 17:01:40 · 2179 阅读 · 0 评论 -
JavaScript的组合继承详解
// 父类function SuperType(name){ this.name = name; this.color = "red"}// 通过原型添加方法SuperType.prototype.sayName = function(){ console.log(this.name)}// 子类function SubType(name,age){ SuperType.call(this,name); this.age = age}//继承Supe原创 2020-12-25 17:45:09 · 102 阅读 · 0 评论 -
Js任务的执行时机
js是单线程的,所有的任务都是依次执行的setTimeout(_ => console.log(4))new Promise(resolve => { resolve() console.log(1)}).then(_ => { console.log(3)})new Promise(resolve => { resolve() console.log(5)}).then(_ => { console.log(6)})console.l原创 2020-12-24 15:02:34 · 106 阅读 · 0 评论 -
Vue3响应式API ref和reactive
在vue3中,有两个重要的api分别是ref 和reactive使用方法如下import { reactive, ref } from 'vue';setup(){ let student = reactive({ name: "zhangsan", age: 18 }) let count = ref(0); return { count, student }}基本数据类型使用ref对象创建响应式,复杂数据类型使用reactive创建响应式,在js文件原创 2020-12-23 17:11:47 · 666 阅读 · 0 评论 -
在js中判断+0还是-0,typeof与instanceof的区别
在js中+0和-0是相等的,除了在他们当做除数的时候可以用1/-0 === -Infinity来判断是正无穷还是负无穷来判断是正0还是负0原创 2020-12-11 10:32:45 · 300 阅读 · 0 评论 -
js 找出质数,判断一个数是否为质数
//找出max以内的所有质数function prime(max) { max = Math.floor(max) // 判断是否小于一,如果是那么就没有质数 if (max < 1) { return [] }; // 定义一个数组来存放所有的质数 let primeArr = []; // 如果传入的max为1 那么将1 添加到数组 if (max == 1) { primeArr.push(1);原创 2020-11-28 22:01:45 · 1100 阅读 · 2 评论 -
Js获取样式style获取全为空
js中设置和获取样式都是针对于标签上的style来获取或者设置的,无法获取到css文件夹里面的样式如上图,js获取的都是标签上的style内联样式,设置的时候也是设置的标签上的内联样式,因此获取属性的时候有时候全为空...原创 2020-11-27 18:30:52 · 2017 阅读 · 1 评论 -
js实现链表的数据结构
// Js实现链表------------------一定要画图!!!!!!!class Node { constructor(element) { // 节点的数据 this.element = element; // 节点的指针 this.next = null }}class LinkedList { constructor() { // 链表的头部首先为空 this.h.原创 2020-11-27 17:50:43 · 207 阅读 · 0 评论 -
移动端与PC端企业级轮播图制作(使用了节流操作,不怕狂点)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>轮播图制作</title> <link rel="stylesheet" href="./index.cs原创 2020-11-25 22:32:44 · 297 阅读 · 0 评论 -
使用FileReader进行文件分段读取
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title></head><body> <!-- 文件上传的框 --&g原创 2020-11-20 18:20:57 · 1239 阅读 · 1 评论 -
FileReader分步读取文件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <form> <fieldset> <legend>分步读取文件:</legend>原创 2020-11-20 11:02:34 · 193 阅读 · 0 评论 -
前端上传文件到后端的FormData实现
将本地数据(.xlsx、.docx等文件)上传或导入数据库,有时候需要使用FormData 对象。FormData对象,可以把所有表单元素的name与value组成一个queryString,提交到后台。一、创建对象:创建一个FormData对象实例1、常用的创建let formData = new FormData();2、vue中的创建let formData = new window.FormData();3、在表单的基础上创建<form id="fromCont" acti转载 2020-11-20 10:10:06 · 12153 阅读 · 0 评论