![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
pc
今天太阳很好
慢慢来
展开
-
React 新特性useEffect
React16中新增的hooks特性进一步强化了函数组件的功能。本篇承接上次欧超对useState的源码的解读,分析一下另一个高频使用的hook useEffect的在react中的执行机制。1.useEffect 解决了哪些问题?1.函数组件没有生命周期。2.ajax、事件绑定等业务逻辑耦合在生命周期中3.业务逻辑散乱在不同的生命周期中Effect Hook 可以让你在函数组件中执行副作用操作。数据获取,设置订阅以及手动更改 React 组件中的 DOM 都属于副作用。类比于class转载 2021-11-22 16:43:35 · 1298 阅读 · 0 评论 -
使用JavaScript将图片保存至本地
在最近的开发当中,我们需要为img标签以及canvas动态绘制的图像提供下载功能,下面是经过探索后我们得出的结果。一、Canvas 版本// 下载Canvas元素的图片function downloadCanvasIamge(selector, name) { // 通过选择器获取canvas元素 var canvas = document.querySelector(selector) // 使用toDataURL方法将图像转换被base64编码的URL字符串 ..转载 2021-11-22 16:23:00 · 3995 阅读 · 0 评论 -
JS利用XMLHttpRequest拦截ajax请求
function XMLHttpRequestBreak(fun=()=>false){ let f = XMLHttpRequest.prototype.open; let add = function(){ XMLHttpRequest.prototype.open = function(...args){ check = fun(args); if(check){ thr.原创 2021-11-18 15:52:15 · 703 阅读 · 0 评论 -
二进制 - 运算符
4>>1, 表示4右移1位,就是相当于 4除2=2。2<<1,表示2左移一位,就是不是相当于 2*2=4。2<<3,表示2左移民3位,第三位就是相当于数值8,即,2*8=16// 0 0 0 0 1 0 0 1 0 0 0 0 0 0 1var category = res.data.members[i].category;var items = that.data.itemsfor (var i = 0; i < items.length; i原创 2021-10-15 15:06:12 · 293 阅读 · 0 评论 -
数组-(3)类数组转化为数组
类数组是具有length属性,但不具有数组原型上的方法。常见的类数组有arguments、DOM操作方法返回的结果。方法一:Array.fromArray.from(document.querySelectorAll('div'))方法二:Array.prototype.slice.call()Array.prototype.slice.call(document.querySelectorAll('div'))方法三:扩展运算符[...document.querySelect原创 2021-10-14 09:09:19 · 574 阅读 · 0 评论 -
数组-(1)数组扁平化
数组扁平化是指将一个多维数组变为一个一维数组constarr = [1, [2, [3, [4, 5]]], 6];// => [1, 2, 3, 4, 5, 6]方法一:使用flat()constres1 = arr.flat(Infinity);方法二:利用正则constres2 = JSON.stringify(arr).replace(/\[|\]/g, '').split(',');但数据类型都会变为字符串方法三:正则改良版本constres3...原创 2021-10-13 17:08:13 · 60 阅读 · 0 评论 -
数组-(2)数组去重
// => [1, '1', 17, true, false, 'true', 'a', {}, {}]const arr = [1, 1, '1', 17, true, true, false, false, 'true', 'a', {}, {}];方法一:利用Setconstres1 = Array.from(newSet(arr));方法二:两层for循环+spliceconst unique1 = arr => { let len = arr.lengt...原创 2021-10-13 17:11:38 · 66 阅读 · 0 评论 -
字符串和数组的方法
数组常用方法:1. push() 在数组的结尾添加内容,返回值是添加后数组的长度2. pop() 把数组的最后一个删除,返回值是删除的那一项3. shift() 删除数组中的第一项,返回值是删除的那一项4. unshift() 在数组的开头添加内容,返回值是添加后数组的长度5. splice(a,b,c) 从索引a开始截取b个元素,并用c替换截取的元素,并改变原来的数组,如果只有一个参数,表示从这个索引开始截取到末尾splice(a,b) 方法里面如果第一个参数为负数的话,使用方法跟原创 2021-10-13 16:53:19 · 149 阅读 · 0 评论 -
图片懒加载,滚动加载
图片懒加载可以给img标签统一自定义属性data-src='default.png',当检测到图片出现在窗口之后再补充src属性,此时才会进行图片资源加载。function lazyload() { const imgs = document.getElementsByTagName('img'); const len = imgs.length; // 视口的高度 const viewHeight = document.documentElement.clientHeight原创 2021-10-13 17:16:58 · 149 阅读 · 0 评论