Hy_0452的博客

原创 js函数-清除对象中null、undefined

【代码】js函数-清除对象中null、undefined。

原创 js函数工具-判断字符串是否相等(正则)

【代码】js函数工具-判断字符串是否相等(正则)

原创 js函数工具-获取当前近一周日期

【代码】js函数工具-获取当前近一周日期。

原创 js函数工具-获取某年的最后一个工作日

【代码】js函数工具-获取某年的最后一个工作日。

原创 js函数工具-平铺树形数据

原创 js函数工具-获取url某个参数

主要是针对在一些特殊场景下需要从url路径上获取某个参数的函数

原创 获取文本像素大小

【代码】获取文本像素大小。

原创 在Echarts中的tooltip上添加点击按钮

在Echarts的tooltips中添加点击按钮并可以鼠标悬停点击该按钮。

原创 Jest自动化测试支持ES6(随笔)

安装后package.json。配置.babelrc.json。

原创 react-hooks在useEffect中写防抖事件(随笔)

useEffect 会在每轮渲染结束后执行，在state发生改变时，也会重新render。因而，这里的state中状态变化时debounce 函数就会重新生成一次，其内部逻辑就会执行一次。所以其就没有起到作用。用 ref 保存一下防抖函数，后面再触发useEffect时，就不会生成新的防抖函数了。卸载 usePrivateDebounce.current.cancel()使用: getData.current(name, age)

原创 git更新本地仓库分支(随笔)

git remote update origin --prune 的意思是更新本地仓库中与远程仓库origin同名的分支，并删除本地已经不存在的远程分支。

原创 基于Antd的DatePicker组件进行二次封装:支持随意输入任意格式时间

该组件是基于antd的DatePicker日期组件二次封装的组件，本次封装主要是额外支持输入任意类型的日期格式。

原创 antd react table组件中使用summary合计行滚动条在合计下方

应用场景： 由于ui设计 需要将原本在合计上方的滚动条置于合计下方。

原创 关于react-ECharts点击图例隐藏左侧标题

应用场景 双y轴中点击图例后某y轴数据不显示后依旧存在y轴标题。此处因为样式需求所以使用的是title的二级标题。

原创 如何居中一个元素（终结版）

一、水平居中1.行内元素水平居中利用text-align:center可以实现块级元素内部的行内元素水平居中；若内部包含着一个块级元素，可以先将其由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中 <div class="parent"> <div class="child">CSDN</div> </div>.parent { text-align: center; } .child { dis

原创 js函数工具-获取文本像素大小(宽高)

在一些业务中需要获取某个文本内容像素大小

原创 JS使用递归过滤多叉树数组

在多选或者单选TreeData时, 可采用递归的方式获取过滤后的数据

原创 什么是vue-router，工作原理是什么

一、vue-router是什么路由就是SPA的路径管理器。vue-router是Vuejs官方的路由插件，它和vuejs是深度集成的，适用于构建单页面应用。vue的SPA是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关系。二、vue-router实现原理2.1 Hash模式vue-router默认h

原创 this指向

前言this关键字是JavaScript中最复杂的机制之一。它是一个很特别的关键字，被自动定义在所有函数的作用域中。对于那些没有投入时间学习this机制的JavaScript开发者来说，this的绑定一直是一件非常令人困惑的事。了解this随着函数使用场合的不同，this的值会发生变化。但总有一条原则就是JS中的this代表的是当前行为执行的主体，在JS中主要研究的都是函数中的this，但并不是说只有在函数里才有this，this实际上是在函数被调用时发生的绑定，它指向什么完全取决于函数在哪里被

原创 什么是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 –

原创 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) { ...

原创 ES6 之 Promise用法

1. 为什么使用Promise解决回调函数中嵌套函数(回调地狱)2.Promise的基本使用Promise是一个构造函数，通过new关键字实例化对象语法 new Promise((resolve， reject) =>{})Promise接受一个函数作为参数在参数函数中接收两个参数resolve：成功函数reject：失败函数promise实例有两个属性state: 状态result: 结果1）promise的状态第一种状态：pending(准备，待

原创 vue项目中使用PDFJS阅读框架预览pdf文件

准备工作首先去PDFJS官网下载下载后，将其解压完存放在项目的public文件夹中，方便项目的打包文件结构：├── build/│ ├── pdf.js - display layer│ ├── pdf.js.map - display layer's source map│ ├── pdf.worker.js - core la

原创 JS对字符串加密解密(fromCharCode)

fromCharCodefromCharCode() 可接受一个指定的 Unicode 值，然后返回一个字符串。语法：fromCharCode(num,num....)num是必填的，一个或多个Unicode 值，即要创建的字符串中的字符的 Unicode 编码//H的Unicode编码：72const code = String.fromCharCode(72)console.log(code);//HcharCodeAtcharCodeAt() 方法可返回指定位置的字符的 U

原创 javasript组按照某个顺序排序sort()

有时候获取的数据并不是我们此时需要的顺序，我们需要按照一定的顺序去重新排序，如果用for循环的话，需要一次又一次的去比对然后排序，此时我们就需要用sort排序如下：只需要在.sort()内部定义个顺序 ，再用.indexOf() 去获取它的位置定义的顺序长度必须要大于等于需要排序的数组...

原创 js问号点(可选链操作符) ?.、零合并操作符 ??

可选链操作符 ?.一般我们在项目中要获取某个对象里的属性，或者更加深属性层次的操作就得做前置校验，不然如果中间某个属性不存在就会报错const obj ={ name:'JSON', age:55, children:{ name:'TOM', age:12, }, cars:{ }}const name = obj && obj.children && obj.children.nam

原创 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，用来测试一个对象在其原型链中是否存在一个构造函数的

原创 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...

原创 antDesignPro动态菜单路由:从后端获取路由结构，前端配置

从后端接口获取菜单数据，前端只需要将后端返回的数据结构拼接成动态路由的结构就行，无需在页面配置动态路由在config文件夹内的router.confige.js文件内修改配置在基础路由里配置主页,它的children将是后面配置好的动态路由在登录页的登录接口里登录成功后调用封好的路由菜单接口，在把数据放到全局属性里，后面用，然后再跳路由，这样的话可以防止接口还未返回数据，页面跳转为空白页。...

原创 padStart()、padEnd()可用于数字位数不够，前后位补0或者其他

es8扩展了两个字符串相关的方法分别是：String.prototype.padStart()String.prototype.End()String.prototype.padStart()该方法用另一个字符串填充当前字符串(可多次填充)，直到结果字符串达到给定的长度为止。从当前字符串的开头开始应用填充str.padStart(targetLength[,padString])// targetLength：填充后字符串的长度// padString: 可选，填充的字符串//例子：co

原创 vue如何重置data:this.$options.data.call(this)

Object.assign(this.$data，this.$options.data())Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象this.$data 获取当前状态下的datathis.$options.data()获取该组件初始状态下的data。...

原创 VUE的QRCode二维码生成并点击下载

首先得安装qrcodejs2yarn add qrcodejs2 然后在需要的页面引入import QRCode from 'qrcodejs2' // 引入qrcodeexport default { name: 'qRCode', components: { QRCode }, ....}这里是将二维码以弹窗的形式展现给用户主页面：调用封装好的二维码组件html:引用 <code-view ref="codeView"></code-view&g

原创 微信小程序-返回上一级并携带参数

第一种是在全局定义一个参数 然后返回的时候给全局变量赋值(需要的参数) /** * 生命周期函数--监听页面显示 */ //一级页面js onShow: function () { this.setData({ xx: getApp().globalData.xx }) }, /** * 生命周期函数--监听页面卸载 */ //二级页面JS onUnload: function () { getApp().gl.

原创 微信小程序之事件:catchtap&bindtap

bindtap和catchtap都是当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡点击事件 js获取点击到的数据在wxml中在点击事件的view中加入data-xx;其中xx就是需要获取的数据；如下 <view class="product-status" catchtap='bindOrder' data-item="{{item}}"> <butt.

原创 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

原创 小程序隐藏返回按钮

微信小程序页面跳转后隐藏返回键并去除功能。使用navigateTo,会发现跳转至子页面为：< 返回上一级的样式wx.navigateTo({ url: …/detail/detail',})使用redirectTo,会发现跳转至子页面为：???? 返回样式wx.redirectTo({url: '../index/index',})在需要的页面添加onShow: function() { wx.hideHomeButton({ success: functio

原创 微信小程序- wx.showToast()一闪，停留时间过短(解决方法)

使用计时器setTimeout来让提示语停留时间长些 setTimeout(() => { wx.showToast({ title: res.data.msg, icon: "error", }); setTimeout(() => { wx.hideToast(); }, 2000)

原创 微信小程序的获取位置、导航

WXML： <view class="item"> <view class="map_container"> <map class='map' longitude='{{longitude}}' latitude='{{latitude}}' scale='{{scale}}' markers='{{markers}}' controls="{{controls}}" bindcontroltap="bindcontroltap" pol

原创 git的提交规范

提交规范:Header、Body、FooterHeader是必须的、其他两个可忽略<type>(<scope>) : <subject>//空一行<body>//空一行<footer>这样做的理由：版本回退时无法快速定位到指定版本无法指定项目中封版操作是哪一个commit无法清晰的指定每次的提交记录Header只有一行：type(必需)、subject(必需)type:说明commit 类别 以下只允许出现的标

原创 JavaScript的setTimeout 和 setInterval

计划调用-等待特定的一段时间再执行实现方法：setTimeout 允许将函数推迟一段时间间隔后再执行。** setInterval** 允许重复运行一个函数，从一段时间间隔后开始运行，之后都在该时间间隔内连续重复运行该函数setTimeoutlet timeId = setTimeout(fun|code,[delay],[arg1],....)fun|code:需要执行的函数delay：执行前的延时，以毫秒为单位(1000毫秒=1秒)，默认值是0arg1、arg2:要传入被执行函