javascript
hzxOnlineOk
这个作者很懒,什么都没留下…
展开
-
【浏览器】url参数中的“+”全部变成了空格原因及解决办法
而在另一份规范RFC2396,定义URI里, URI里的保留字符都需转义成%HH格式(Section 3.4 Query Component),因此空格会被编码成%20,加号+本身也作为保留字而被编成%2B,对于某些遵循RFC 2396标准的应用来说,它可能不接受查询字符串中出现加号+,认为它是非法字符。今天在获取其他站点重定向添加到我cms后台管理的url参数时,碰到参数中的“+”全部变成了空格的情况。所以一个安全的举措是URL中统一使用%20来编码空格字符。是URL中默认的将“+”号转义了。原创 2023-03-13 15:22:24 · 6108 阅读 · 0 评论 -
base64 web前端js解码与转码
解码,就是把base64字符串转换成常规字符串 b64DecodeUnicode = str => { return decodeURIComponent(atob(str).split('').map(function(c) { return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2); ...原创 2019-12-04 16:25:56 · 1246 阅读 · 0 评论 -
【下载导出文件】原生axios两种前端下载EXCEL文件的方式
responseType: ‘blob’, //表示服务器响应的数据类型,可以是 ‘arraybuffer’, ‘blob’, ‘document’, ‘json’(默认), ‘text’, ‘stream’例如,如果后端返回的文件格式是txt,前端可以将.txt文件转成.xlsx。原创 2022-12-15 15:03:41 · 1559 阅读 · 0 评论 -
【not found】export ‘XXXX‘ was not found in ‘./XXXX.js‘
ES6 编译器识别问题。原创 2022-12-15 10:59:59 · 1195 阅读 · 0 评论 -
【css】div盒子height:100%高度无效解决办法
需要分成2种情况来看待,flex情况下,非flex情况下原创 2022-11-24 15:52:50 · 5365 阅读 · 0 评论 -
【javascript】js获取数组中数值最大的数
由于max()里面参数不能为数组,所以借助apply(funtion,args)方法调用Math.max(),function为要调用的方法,args是数组对象,当function为null时,默认为上文,即相当于apply(Math.max,arr)call()与apply()类似,区别是传入参数的方式不同,apply()参数是一个对象和一个数组类型的对象,call()参数是一个对象和参数列表。sort()排序默认为升序,reverse()将数组掉个。b-a从大到小,a-b从小到大。原创 2022-11-23 15:06:15 · 10676 阅读 · 0 评论 -
【16进制色值转换】hex(#fff)转rgb或rgba(rgb(0,0,0,0.1))
【16进制色值转换】hex转rgb或rgba。原创 2022-10-13 16:43:25 · 1806 阅读 · 0 评论 -
document.execCommand(“Copy“)的返回值为false
今天做文本复制到粘贴板踩坑了,具体如下:var myInput = document.createElement('input');myInput.value = "一些文本,等待被复制到粘贴板...";document.body.appendChild(myInput);myInput.select(); // 选择以哪个DOM对象作为模板document.execCommand(......原创 2019-03-02 17:20:48 · 8709 阅读 · 2 评论 -
【react hook】umi获取虚拟dom元素 并点击按钮滚动到对应元素位置
【代码】【react hook】umi获取虚拟dom元素 并点击按钮滚动到对应元素位置。原创 2022-09-01 15:03:44 · 643 阅读 · 0 评论 -
【数组扁平化】细数JS数组扁平化的方法(7-8种)
我去找了一下维基百科,上面并没有关于扁平化的直接解释,只有一个扁平化组织释义。先来说一下,与扁平化对立的组织:金字塔组织,这个众所周知,它表现的层级结构就是一个金字塔式的形状。扁平化组织(Flat organization)也被称为横向组织(horizontal organization),是一种在员工和Boss之间很少存在或不存在中间管理层的组织。左侧就是金字塔组织,右侧就是扁平化组织。可见扁平化组织的层级是很少的,基层里组成单位(人)是最多的。............转载 2022-08-29 18:38:01 · 403 阅读 · 0 评论 -
【javascript扁平持久化】前端数据扁平化与持久化
最近业务开发,从零搭建网页生成器,支持网页的可视化配置。为了满足这种需求,需要将各种页面抽象成类似地模块,再将每个模块抽象成各个可配置的组件,有些组件还包含一些小部件。这样一来,页面配置的JSON数据就会深层级地嵌套,那么修改一个小组件的配置,要怎样来更新页面树的数据?用id一层一层遍历?这样做法当然是不推荐的,不仅性能差,代码写起来也麻烦。因此,就考虑能否像数据库一样,把数据范式化,将嵌套的数据展开,每条数据对应一个id,通过id直接操作。Normalizr 就帮你做了这样一件事情。......转载 2022-08-29 17:50:34 · 440 阅读 · 0 评论 -
【前端埋点方案】前端监控和前端埋点方案介绍
在上一节中介绍了前端监控的作用,那么如何实现前端监控呢,实现前端监控的步骤为:前端埋点和上报、数据处理和数据分析。首要的步骤就是前端埋点和上报,也就是数据的收集阶段。数据收集的丰富性和准确性会影响对产品线上效果的判别结果。目前常见的前端埋点方法分为三种:代码埋点、可视化埋点和无痕埋点。下面一一介绍每一种埋点的方法。.........转载 2022-08-29 17:39:23 · 1585 阅读 · 1 评论 -
js 统计一个字符串中某个字符出现的次数
方法二,使用split以2为切割标记,通过arr.length - 1 获得切割2的次数。原创 2022-08-16 11:03:18 · 1012 阅读 · 0 评论 -
js 实现千分位
如何对一大串数值进行千分位分隔,使用户阅读更加便利,以下介绍3种方法。原创 2022-08-05 17:12:15 · 7738 阅读 · 0 评论 -
js中小数四则运算精度问题原因及解决办法
由于也需要转化为指数形式,例如 1/2 = 1 * 2^-1, 1/4 = 1 * 2^-2,所以小数的转化二进制过程是通过判断小数是不是满 1/2,1/4,8/1以此类推,换成数学公式就是 乘二取整法。因此,得到的结果是不准确的。:科学计数法前面的数值,IEEE745标准,默认所有的该数值都转为1.xxxxx这种格式,优点是可以省略一位小数位,可以存储更多的数字内容,缺点是丢失精度。计算机中的数字都是以二进制存储的,二进制浮点数表示法并不能精确的表示类似0.1这样 的简单的数字。.........原创 2022-08-04 10:04:14 · 4669 阅读 · 0 评论 -
unCaught typeError cannot read properties indexof of undefined
js基础原创 2022-06-13 18:28:50 · 2339 阅读 · 0 评论 -
JS 两个数组对象过滤
users.filter((item) => !usersToUserGroup.some((ele) => ele?.userId === item?.userId));原创 2022-05-30 14:58:43 · 721 阅读 · 0 评论 -
树节点互斥的最关键逻辑判断依据
我们经常会碰到多级节点树的选择,有时候产品会要求我们实现节点的互斥,这种互斥效果与Antd的那种效果不同,antd有2种模式1、普通模式即默认勾选父节点,子节点全部选中,子节点全部勾选,父节点也勾选,否则只要有子节点勾选并且没有全部勾选,父节点就是半勾选状态2、严格模式子节点的勾选和父节点的勾选互不影响,我们需要依据我们自己的业务需求,去控制选中值我这边要讲的就是这第二种我接到的需求是,节点有2级,勾选父节点,子节点取消勾选;勾选全部子节点,父节点就勾选,并取消子节点的全部勾选。经过2次写互斥原创 2022-04-18 15:19:37 · 588 阅读 · 0 评论 -
JS事件委托和冒泡
利用 JS 事件冒泡动态为元素绑定事件的方法称为事件委托(Event Delegation,也称为“事件代理”),是 JavaScript中最热门的技术之一。事件委托就是把原本需要绑定在子元素上的事件(onclick、onkeydown 等)委托给它的父元素,让父元素来监听子元素的冒泡事件,并在子元素发生事件冒泡时找到这个子元素。举个简单的例子,整个宿舍的同学都需要去取快递,一种方法是让他们一个个去取,另一种方法是把这件事委托给宿舍长,让宿舍长把所有人的快递都取回来,然后再根据收件人一一分发给宿舍.转载 2022-03-08 16:55:17 · 1427 阅读 · 0 评论 -
前端js几种加密/解密方法
参考:https://www.cnblogs.com/pinkpolk/articles/13600696.html一、base64加密base64的github地址示例<html> <head> <title>前端的base64使用方法</title> </head> <body> </body><script>var str = "hello";v转载 2022-01-26 11:38:50 · 1909 阅读 · 0 评论 -
js判断一个字符串以某个字符串开头
方法1:substr() 方法if("123".substr(0, 2) == "12"){ console.log(true);}方法2:substring() 方法if("123".substring(0, 2) == "12"){ console.log(true);}方法3:slice()方法if("123".slice(0,2) == "12"){ console.log(true);}方法4:indexOf() 方法if("123".i转载 2021-12-24 10:33:03 · 7947 阅读 · 0 评论 -
js 终止 forEach 循环
try{ var arr = ["dog","cat","monkey"]; // 执行到第3次,结束循环 arr.forEach((name, idx) => { if(name === "cat"){ throw new Error("EndForEach"); } console.log(name); // 测试是否输出3次 });}catch(e){ if(e.message !== "EndForEach") throw e;}/原创 2021-12-10 11:33:30 · 826 阅读 · 0 评论 -
JS实现的4种数字千位符格式化方法分享
所谓的数字千分位形式,即从个位数起,每三位之间加一个逗号。例如“10,000”。针对这个需求,我起初写了这样一个函数:复制代码代码如下:// 方法一function toThousands(num) { var result = [ ], counter = 0; num = (num || 0).toString().split(''); for (var i = num.length - 1; i >= 0; i--) { counter++;转载 2021-12-06 18:27:16 · 2809 阅读 · 2 评论 -
js 两个数组内容相减
方法一var arr1 = [1, 2, 3]var arr2 = [1, 3]var arr3 = arr1.filter(el => !arr2.includes(el))includes 是 es 6 的,也可以用下面的,箭头函数es6的,不行你就转成普通函数:var arr3 = arr1.filter(el => !~arr2.indexOf(el))方法二var m = {};arr1.forEach(function(al){m[al]=al;})arr2.原创 2021-11-18 17:25:01 · 5360 阅读 · 0 评论 -
两个div分上下堆叠,上部分高度不固定,下面部分自动填满剩余高度
<div class="wrapper" id="wrapper" style="height: 100%;"> <div class="searchForm" id="searchForm"></div> <div class="tableContent" id="tableContent"></div></div>方法一:var wrapper= document.getElementById('wrappe原创 2021-11-16 19:19:57 · 977 阅读 · 0 评论 -
javascript 数组A减去另一数组B
做聊天项目的时候遇要实现这样的一个功能: 邀请新的好友入群;点击邀请好友会弹出一个好友列表,显示你除了在群里面的好友外剩下的所有好友;我的思路是取到你所有的好友,然后所有好友中过滤掉已经是群成员的好友const users = [ { _id: 1, name: '好友1' }, { _id: 2, name: '好友1' }, { _id: 3, name..转载 2021-10-15 14:40:56 · 1913 阅读 · 0 评论 -
JS reduce()方法详解
reduce()方法可以搞定的东西,for循环,或者forEach方法有时候也可以搞定,那为啥要用reduce()?这个问题,之前我也想过,要说原因还真找不到,唯一能找到的是:通往成功的道路有很多,但是总有一条路是最捷径的,亦或许reduce()逼格更高...1、语法arr.reduce(callback,[initialValue])reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素.转载 2021-09-30 10:20:56 · 25287 阅读 · 0 评论 -
for in,for of, for,forEach,map,filter的区别
for...in根据key遍历遍历对象时会从原型上继承属性,可以用hasOwnProperty()识别出继承属性,遍历数组会把数组下标看做属性名,也就输出结果是数组的下标,且不一定按照数组的索引顺序。输出结果是字符串function Person(name){ this.name = name;}Person.prototype.getName = function(){ return this.name;}var child= new Person原创 2021-09-15 09:37:59 · 172 阅读 · 0 评论 -
js 引号之后不能跟小括号
如下图: 引号跟(会引起解析错误, 解决办法是let memberNames = ''; 加一个分号" ; "原创 2021-07-15 20:32:50 · 130 阅读 · 0 评论 -
两个对象数组筛选出不同
有这么一个需求实现当点击左侧全选时,右侧列表项勾选自动清除现有对象数组A和对象数组B:其中数组A [ { id: 1, name: ‘校花’ }, { id: 2, name: ‘校草’ }, { id: 3, name:‘班花’ }, { id: 4, name: ‘班草’ } ] 其中数组B [ { id: 126455, classId: 1,name: ‘十大歌手’ }, { id: 116415, classId: 1, name: ‘打个盹’ }, { id:153455原创 2021-04-01 09:56:49 · 1025 阅读 · 0 评论 -
React native如何让点击事件穿透遮罩层(水印)- pointerEvents属性应用
假如你有这么一个需求,你需要为一个页面生成水印,水印需要浮在最上层,那如何保证水印不会遮盖底层的内容呢?也就是我们要讲的 “事件穿透”在PC网页中,直接生成的是浏览器的dom元素进行排列绘制因此可以利用css自带的属性: pointer-events: none;遮罩层容器添加一条css属性 pointer-events: none, 遮罩下的就可以点击了,IE11+支持而React-Native则比较特殊,他毕竟不是运行在浏览器上的,他只是实现了Android和Ios底层V..原创 2020-12-31 11:32:12 · 1806 阅读 · 0 评论 -
原生js监听href url路径变化
移动端直接使用:function listenHrefChange() { //监听href变化 触发更新图表 window.onhashchange = function () { getMap(orgIdRef.current); };}PC端如需兼容IE 则使用://监听触发操作function hrefChange(){ console.log("url路径产生了变化")} //url变化监听器if( ('onhashcha..原创 2020-12-07 09:48:41 · 6599 阅读 · 1 评论 -
js 中奇怪的运算
F12控制台Console打印调试以下运算:[]+{} // 结果是 "[object Object]"{}+[] // 结果是 0({}+[]) // 结果是 "[object Object]"+[] // 结果是 0 ,此处+为正号+{} // 结果是 NaN ,此处+为正号[].toString() // 结果是 ""({}).toString() // 结果是 "[object Object]" {}.toStrin.原创 2020-11-27 13:58:34 · 169 阅读 · 0 评论 -
JS 对象的深拷贝和浅拷贝
内容系转载,仅用于学习交流现象我们先来看一个demo// 我们先申明一个变量str1,// 然后把变量str1负值(拷贝)给变量str2 // 最后对变量str2进行修改操作var str1 = 'shen'var str2 = str1str2 += 'zhiyong'console.log('str1:', str1) //shenconsole.log('str2:', str2) //shenzhiyong我们申明一个对象并对它进行相同的转载 2020-11-24 11:06:01 · 120 阅读 · 0 评论 -
使用原生JS将html表格代码保存为excel
<!DOCTYPE html><html><head> <title>example.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv=".原创 2020-09-09 13:59:49 · 434 阅读 · 0 评论 -
为什么scrollTop设置后一直为0的解释和解决方案(精品)
我个人做一点补充,当使用第三方ui库(比如antd-mobile)的时候,要主要看下Flex.Item的样式,默认是overflow: hidden,这会导致scrollTop的值一直为0!下面的部分引用自这位博主https://blog.csdn.net/kouryoushine/article/details/99745904背景做前端希望页面能跳转到 某一位置用到了scrollTop属性。可是发现给某个div设置该属性后,一致为0。找了很多方案,但不都适合自己,或者说不知道是否适合。.转载 2020-08-27 20:17:18 · 1488 阅读 · 0 评论 -
js拆分http url 路径参数封装函数
function handleUrl() { let url = window.qrCodeUrl url = decodeURI(url) // 'https://oams.newone.com.cn/api/signIn/mgt/signIn?sourceId=ea77a04581aa4639ad20c80236da75f6&signInNum=1&name=陈铎&longitude=113.946102&latitude.原创 2020-08-26 17:01:17 · 825 阅读 · 0 评论 -
javascript 引入script不执行的原因
如果是这样子,是不会执行bridge.min.js内的js的 <script type="javascript" src="./bridge.min.js"></script>而以下2种都能正常执行 <script src="./bridge.min.js"></script>或者 <script type="text/javascript" src="./bridge.min.js"></script&g..原创 2020-08-13 17:45:28 · 2934 阅读 · 0 评论 -
js 获取样式值以及样式属性值
this.delayGetDomTimer = setTimeout(() => { for (let i = 0; i < myCollection.length; i++) { const str = myCollection && myCollection[i] && myCollection[i].getAttribute('style') // 获取样式值(包含所有.原创 2020-06-23 13:39:10 · 389 阅读 · 0 评论 -
react笔试题
1、rn碰到了哪些坑2、setState有几个参数3、js事件轮询4、setTimeout和Promise同时执行,哪个的回调先执行5、android和ios的图片圆角兼容问题6、RN与JS通信的原生接口叫什么,怎么用7、说说组件之间的通信(父子组件、兄弟组件)8、RN AsyncStorage[007].tostringnull+undefined[A=3]=[][B=1]=[null]typeof nullnull instanceof object...原创 2020-06-05 15:19:56 · 631 阅读 · 0 评论