前端
富可敌锅
这个作者很懒,什么都没留下…
展开
-
this指向
前言this关键字是JavaScript中最复杂的机制之一。它是一个很特别的关键字,被自动定义在所有函数的作用域中。对于那些没有投入时间学习this机制的JavaScript开发者来说,this的绑定一直是一件非常令人困惑的事。了解this随着函数使用场合的不同,this的值会发生变化。但总有一条原则就是JS中的this代表的是当前行为执行的主体,在JS中主要研究的都是函数中的this,但并不是说只有在函数里才有this,this实际上是在函数被调用时发生的绑定,它指向什么完全取决于函数在哪里被原创 2021-04-12 10:18:58 · 161 阅读 · 0 评论 -
微信小程序-返回上一级并携带参数
第一种是在全局定义一个参数 然后返回的时候给全局变量赋值(需要的参数) /** * 生命周期函数--监听页面显示 */ //一级页面js onShow: function () { this.setData({ xx: getApp().globalData.xx }) }, /** * 生命周期函数--监听页面卸载 */ //二级页面JS onUnload: function () { getApp().gl.原创 2021-01-08 15:12:31 · 981 阅读 · 0 评论 -
react-hooks在useEffect中写防抖事件(随笔)
useEffect 会在每轮渲染结束后执行,在state发生改变时,也会重新render。因而,这里的state中状态变化时debounce 函数就会重新生成一次,其内部逻辑就会执行一次。所以其就没有起到作用。用 ref 保存一下防抖函数,后面再触发useEffect时,就不会生成新的防抖函数了。卸载 usePrivateDebounce.current.cancel()使用: getData.current(name, age)原创 2023-05-22 20:35:45 · 352 阅读 · 1 评论 -
JS使用递归过滤多叉树数组
在多选或者单选TreeData时, 可采用递归的方式获取过滤后的数据原创 2022-07-05 22:13:27 · 262 阅读 · 0 评论 -
什么是vue-router,工作原理是什么
一、vue-router是什么路由就是SPA的路径管理器。vue-router是Vuejs官方的路由插件,它和vuejs是深度集成的,适用于构建单页面应用。vue的SPA是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关系。二、vue-router实现原理2.1 Hash模式vue-router默认h原创 2021-04-12 14:49:27 · 5883 阅读 · 0 评论 -
什么是Bom,常用的bom属性又有哪些?
Bom 是浏览器对象。有哪些常用的 Bom 属性呢? (1)]location 对象location.href-- 返回或设置当前文档的 URL location.search – 返回 URL 中的查询字符串部分。例如http://www.dreamdu.com/dreamdu.php?id=5&name=dreamdu 返回包括(?)后面的内容?id=5&name=dreamdu location.hash – 返回 URL#后面的内容,如果没有#,返回空location.host –原创 2021-03-14 14:13:48 · 1282 阅读 · 0 评论 -
JS中防抖与节流的运用
handleHtSearch:_debounce(function(value){ this.requestHtInfos(value) },1000),//防抖export function _debounce(fn, time) { let t = null; return function() { let _self = this, args = arguments; if (t) { ...原创 2021-03-08 17:16:21 · 215 阅读 · 0 评论 -
JS对字符串加密解密(fromCharCode)
fromCharCodefromCharCode() 可接受一个指定的 Unicode 值,然后返回一个字符串。语法:fromCharCode(num,num....)num是必填的,一个或多个Unicode 值,即要创建的字符串中的字符的 Unicode 编码//H的Unicode编码:72const code = String.fromCharCode(72)console.log(code);//HcharCodeAtcharCodeAt() 方法可返回指定位置的字符的 U原创 2021-02-05 11:19:09 · 3768 阅读 · 2 评论 -
js获取指定日期的n天后或n年后的的日期兼容ie浏览器
在某些需求中有要求显示的日期是当天后的几天,或者是某天的N天后dateChange方法num:n天;必填date:日期;选填(不填的话某认当天)先将格式为YYYY-MM-DD的日期转化为10位的时间戳将num接到的天数也转为时间戳两者相加则为n天后的日期再拼接位YYYY/MM/DD由于ie浏览器不支持YYYY-MM-DD的格式,所以需将其转换位YYYY/MM/DD...原创 2021-01-26 13:51:23 · 1024 阅读 · 1 评论 -
vue如何重置data:this.$options.data.call(this)
Object.assign(this.$data,this.$options.data())Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象this.$data 获取当前状态下的datathis.$options.data()获取该组件初始状态下的data。...原创 2021-01-24 14:12:23 · 2415 阅读 · 0 评论 -
小程序隐藏返回按钮
微信小程序页面跳转后隐藏返回键并去除功能。使用navigateTo,会发现跳转至子页面为:< 返回上一级的样式wx.navigateTo({ url: …/detail/detail',})使用redirectTo,会发现跳转至子页面为:???? 返回样式wx.redirectTo({url: '../index/index',})在需要的页面添加onShow: function() { wx.hideHomeButton({ success: functio原创 2021-01-05 17:12:07 · 3292 阅读 · 0 评论 -
git的提交规范
提交规范:Header、Body、FooterHeader是必须的、其他两个可忽略<type>(<scope>) : <subject>//空一行<body>//空一行<footer>这样做的理由:版本回退时无法快速定位到指定版本无法指定项目中封版操作是哪一个commit无法清晰的指定每次的提交记录Header只有一行:type(必需)、subject(必需)type:说明commit 类别 以下只允许出现的标原创 2020-12-31 09:32:36 · 133 阅读 · 0 评论 -
JavaScript的setTimeout 和 setInterval
计划调用-等待特定的一段时间再执行实现方法:setTimeout 允许将函数推迟一段时间间隔后再执行。** setInterval** 允许重复运行一个函数,从一段时间间隔后开始运行,之后都在该时间间隔内连续重复运行该函数setTimeoutlet timeId = setTimeout(fun|code,[delay],[arg1],....)fun|code:需要执行的函数delay:执行前的延时,以毫秒为单位(1000毫秒=1秒),默认值是0arg1、arg2:要传入被执行函原创 2020-12-30 21:51:56 · 257 阅读 · 0 评论 -
剩余参数Rest与 Spread 语法
Rest参数可以通过使用三个点**…**并在后方跟着包含剩余参数的数组名称,将其包含在函数定义中,也就是将剩余的参数收集到一个数组中const sumAll = (...args) => { let sum = 0; for (let i of args) sum += i; return sum}console.log(sumAll(2, 3, 4)) //9也可以将第一个参数作为变量,将其余的收集起来const str = (firstName, ..原创 2020-12-21 12:12:56 · 239 阅读 · 0 评论 -
JS的Map and Set (映射和集合)
Map and Set (映射和集合MapMapMap 是一个带键的数据项的集合,就好比Object,但是Map允许任何类型的键new Map():创建新的mapmap.set(key,value):根据键存值map.get(key):根据键返回值,若不存在对应的key 则返回undefinedmap.has(key):若有key返回true 否则返回falsemap.delete(key): 删除指定key的值map.size: 返回当前元素个数举个例子????:let map原创 2021-01-07 13:30:16 · 240 阅读 · 0 评论 -
ES6 之 Promise用法
1. 为什么使用Promise解决回调函数中嵌套函数(回调地狱)2.Promise的基本使用Promise是一个构造函数,通过new关键字实例化对象语法 new Promise((resolve, reject) =>{})Promise接受一个函数作为参数在参数函数中接收两个参数resolve:成功函数reject:失败函数promise实例有两个属性state: 状态result: 结果1)promise的状态第一种状态:pending(准备,待原创 2021-03-04 15:05:02 · 972 阅读 · 1 评论 -
javasript组按照某个顺序排序sort()
有时候获取的数据并不是我们此时需要的顺序,我们需要按照一定的顺序去重新排序,如果用for循环的话,需要一次又一次的去比对然后排序,此时我们就需要用sort排序如下:只需要在.sort()内部定义个顺序 ,再用.indexOf() 去获取它的位置定义的顺序长度必须要大于等于需要排序的数组...原创 2021-01-30 09:57:22 · 167 阅读 · 0 评论 -
js问号点(可选链操作符) ?.、零合并操作符 ??
可选链操作符 ?.一般我们在项目中要获取某个对象里的属性,或者更加深属性层次的操作就得做前置校验,不然如果中间某个属性不存在就会报错const obj ={ name:'JSON', age:55, children:{ name:'TOM', age:12, }, cars:{ }}const name = obj && obj.children && obj.children.nam原创 2021-01-28 15:24:54 · 771 阅读 · 2 评论 -
JS常用的判断所有数据类型的方法Object.prototype.toString.call()
一、 typeof()、Array.isArray()、instanceof可以使用 typeof 判断出 Number、String、Boolean、undefined、object 、Function⚠ typeof 判断的null、Array 、Object返回的都是object,此时就无法区分三者使用Array.isArray() 可以针对上方那个无法区分的三者是否为数组而进行判断使用instanceof 来判断是否对象或者null,用来测试一个对象在其原型链中是否存在一个构造函数的原创 2021-01-27 11:18:47 · 400 阅读 · 0 评论 -
antDesignPro动态菜单路由:从后端获取路由结构,前端配置
从后端接口获取菜单数据,前端只需要将后端返回的数据结构拼接成动态路由的结构就行,无需在页面配置动态路由在config文件夹内的router.confige.js文件内修改配置在基础路由里配置主页,它的children将是后面配置好的动态路由在登录页的登录接口里登录成功后调用封好的路由菜单接口,在把数据放到全局属性里,后面用,然后再跳路由,这样的话可以防止接口还未返回数据,页面跳转为空白页。...原创 2021-01-25 09:23:38 · 2385 阅读 · 1 评论 -
padStart()、padEnd()可用于数字位数不够,前后位补0或者其他
es8扩展了两个字符串相关的方法分别是:String.prototype.padStart()String.prototype.End()String.prototype.padStart()该方法用另一个字符串填充当前字符串(可多次填充),直到结果字符串达到给定的长度为止。从当前字符串的开头开始应用填充str.padStart(targetLength[,padString])// targetLength:填充后字符串的长度// padString: 可选,填充的字符串//例子:co原创 2021-01-24 17:01:46 · 305 阅读 · 0 评论 -
VUE的QRCode二维码生成并点击下载
首先得安装qrcodejs2yarn add qrcodejs2 然后在需要的页面引入import QRCode from 'qrcodejs2' // 引入qrcodeexport default { name: 'qRCode', components: { QRCode }, ....}这里是将二维码以弹窗的形式展现给用户主页面:调用封装好的二维码组件html:引用 <code-view ref="codeView"></code-view&g原创 2021-01-13 20:02:37 · 517 阅读 · 1 评论 -
微信小程序之事件:catchtap&bindtap
bindtap和catchtap都是当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡点击事件 js获取点击到的数据在wxml中在点击事件的view中加入data-xx;其中xx就是需要获取的数据;如下 <view class="product-status" catchtap='bindOrder' data-item="{{item}}"> <butt.原创 2021-01-08 10:44:50 · 824 阅读 · 0 评论 -
微信小程序- wx.showToast()一闪,停留时间过短(解决方法)
使用计时器setTimeout来让提示语停留时间长些 setTimeout(() => { wx.showToast({ title: res.data.msg, icon: "error", }); setTimeout(() => { wx.hideToast(); }, 2000)原创 2021-01-04 14:46:26 · 3838 阅读 · 0 评论 -
微信小程序的获取位置、导航
WXML: <view class="item"> <view class="map_container"> <map class='map' longitude='{{longitude}}' latitude='{{latitude}}' scale='{{scale}}' markers='{{markers}}' controls="{{controls}}" bindcontroltap="bindcontroltap" pol原创 2020-12-31 11:02:28 · 210 阅读 · 0 评论 -
javaScript的递归和堆栈知识点
递归当一个函数解决一个任务时,在解决的过程中它可以调用很多其它函数。在部分情况下,函数会调用自身。这就是递归例: 函数pow(x,y),可以计算为x的y次方,换句话说就是x乘以自身的y次方迭代:forconst pow = (x, y) => { let result = 1; for (let i = 0; i < y; i++) { result *= x } return result}var p = pow(2, 3)原创 2020-12-21 11:43:53 · 173 阅读 · 0 评论 -
JavaScript之every()、some()的区别
every()引用检测数组所有的元素是否符合指定条件=》true、false若检测有一个元素不满足条件,则返回false,且不会对剩余元素进行检测若所有元素都满足条件,则返回true不会对空数组进行检测,也不会改变原数组例题:/*给你一个由不同字符组成的字符串 allowed 和一个字符串数组 words 。如果一个字符串的每一个字符都在 allowed 中,就称这个字符串是 一致字符串 。请你返回 words 数组中 一致字符串 的数目。来源:力扣(LeetCode)*/原创 2020-12-20 19:23:51 · 259 阅读 · 0 评论 -
JS的JSON对象
JSON是表示值和对象的通用格式JSON.stringify:将对象转换为JSONJSON.parse: 将JSON转换为对象JSON.stringify将接收到的对象转换为字符串,得到的json字符串被称为JSON编码或序列化(字符串化、编组化)注意字符串使用的是双引号,JSON中没有单引号(反引号)对象属性名也是双引号,这是强制性的var stu = { name: 'csdn', age: 12, courses: ['html', 'j原创 2020-12-20 16:09:35 · 155 阅读 · 0 评论 -
JS的解构赋值:对象解构赋值
对象解构let {a1,b2} = {a1:.., b2:...}let Menu ={title:'番茄炒蛋',price:12,}let {title , price} = Menuconsole.log(title);//番茄炒蛋console.log(price);//12若把一个属性赋值给另一个名字的变量,比如把 options.width 属性赋值给变量 w,那么可以使用冒号来指定冒号表示“什么值:赋值给谁”。let Menu ={title:'番茄炒蛋',price原创 2020-12-16 17:31:35 · 796 阅读 · 0 评论 -
ES6解构代替concat数组拼接
数组解构经过解构,接下来的操作完全可以种对变量操作,而不是原来的数组元素let arr =['元旦','中秋']let [NYD,MAF] = arrconsole.log(NYD);//元旦console.log(MAF);//中秋当与 split 函数(或其他返回值是数组的函数)结合使用时,看起来就更优雅了:let [NYD,MAF] = '中秋 元旦'.split(' ') //NYD:中秋;MAF: 元旦‘解构’并不意味‘破坏’通过将解构中的各元素复制到变量中来原创 2020-12-16 13:49:22 · 1046 阅读 · 0 评论 -
ES8对象方法扩展-Object.keys()/values/entries方法
Object.keys(obj):返回一个包含该对象所有的键的数组Object.values(obj):返回一个包含该对象的所有值的数组Obiect.entries(obj):返回一个包含该对象的所有[key,value]键值对的数组区别:mapObject调用语法map.keys()Object.keys()返回值可迭代项"真正的"数组第一个区别是 主要原因是灵活性。请记住,在 JavaScript 中,对象是所有复杂结构的基础。因此,我们可.原创 2020-12-16 09:49:39 · 184 阅读 · 0 评论 -
javascript 数组相关方法
添加/删除元素:push(…items) —— 向尾端添加元素,pop() —— 从尾端提取一个元素,shift() —— 从首端提取一个元素,unshift(…items) —— 向首端添加元素,splice(pos, deleteCount, …items) —— 从 pos 开始删除 deleteCount 个元素,并插入 items。slice(start, end) —— 创建一个新数组,将从索引 start 到索引 end(但不包括 end)的元素复制进去。concat(…ite原创 2020-11-17 22:37:20 · 144 阅读 · 0 评论 -
JS的Array.isArray来判断是否是数组
Array.isArray数组是基于对象的,不构成单独的语言类型。所以 typeof 不能帮助从数组中区分出普通对象:Array.isArray(value)。如果 value 是一个数组,则返回 true;否则返回 false。console.log(Array.isArray({})); // falseconsole.log(Array.isArray([])); // true...原创 2020-11-17 22:32:17 · 469 阅读 · 0 评论 -
JS的reduce数组对象去重
arr.reduce 方法和 arr.reduceRigh它们用于根据数组计算单个值。let value = arr.reduce(function(accumulator, item, index, array) { // ... }, [initial]);accumulator —— 是上一个函数调用的结果,第一次等于 initial(如果提供了 initial 的话)item —— 当前的数组元素。index —— 当前索引。arr —— 数组本身。应用函数时,上一个函数调用原创 2020-11-17 22:24:59 · 564 阅读 · 0 评论 -
JS的split 和 join分隔符
str.split(delim)通过给定的分隔符 delim 将字符串分割成一个数组。let names = 'G, X, J';let arr = names.split(', ');for (let name of arr) { console.log( `A message to ${name}.` ); // A message to J..}split 方法有一个可选的第二个数字参数 —— 对数组长度的限制。如果提供了,那么额外的元素会被忽略。但实际上它很少使用:调原创 2020-11-17 21:26:52 · 373 阅读 · 0 评论 -
JS数据类型-字符串
数据类型-字符串字符串反引号特殊字符改变大小写查找子字符串获取子字符串字符串反引号单引号、双引号基本相同。但是反引号允许我们通过${…}将任何表达式嵌套到字符串中:sum(a,b) { return a + b }console.log(`1+2 =${sum(1, 2)} 。`); //1+2 = 3 。反引号还能允许字符串跨行:let getList = `guest:* june* pete* Mary`;console.log(getList); // 与输入原创 2020-11-13 17:43:04 · 250 阅读 · 0 评论 -
JS数据类型-数字类型
数据类型数字类型舍入不精确的计算 -精度缺失isFinite和isNaNObject.is()parseInt 和parseFloat其他数学函数数字类型舍入舍入(rounding)是使用数字时最常用的操作之一。Math.floor: 向下舍入:3.1 变成 3; -1.1 变成 -1Math.ceil:向上舍入:3.1 变成 4; -1.1 变成 -1Math.round: 向最近的整数舍入Math.trunc:移除小数点以后的内容: 3.121 变成 3将数字舍入到小数点后原创 2020-11-13 17:34:43 · 174 阅读 · 0 评论