JavaScript
大风起兮云飞扬丶
Love Life,More Love Code
展开
-
取消请求实战
AbortController,前端取消请求原创 2024-04-10 18:02:03 · 241 阅读 · 0 评论 -
判断两个矩形区域是否相交
【代码】判断两个矩形区域是否相交。原创 2023-10-31 15:00:50 · 128 阅读 · 0 评论 -
高性能JavaScript
高性能javascript原创 2023-08-25 11:49:41 · 198 阅读 · 0 评论 -
数组转树形结构
【代码】数组转树形结构。原创 2022-10-26 18:45:59 · 196 阅读 · 0 评论 -
验证码倒计时自定义hooks
需要注意:虽然定时器中在不停的调用setTime改变time的值,但是在定时器中输出time的值是不会变的。因为函数式组件中每执行一次setState都会形成一个新的闭包,所以你改变的值只在你新的闭包中才能访问到。但是可使用useEffect+依赖的形式访问到这个值。...原创 2022-08-09 17:00:36 · 174 阅读 · 0 评论 -
ReactNative中使用WebSocket
首先说说发布订阅这种设计模式,这种模式我给它起了个别名叫遥控炸弹。很多朋友理解不了这种模式,那——举个例子:张三是个法外狂徒,它要去复仇,他想去炸掉仇家的房子。他来到仇家所在的小区,拿出自己准备的炸弹(监听)丢进仇家的屋里(页面),等他走出小区立马掏出遥控器(emit)按下爆炸按钮,复仇成功。注意: 以上例子你可能会误解为炸弹只能爆炸一次,其实炸弹可以一直存在房子里,只要你不将他清理调。所以张三完成复仇后,他应该去把炸弹清理掉,免得一直在屋子里,容易被警方发现。每个炸弹还应该有自己的名字(key),按原创 2022-04-27 17:37:17 · 2294 阅读 · 2 评论 -
http缓存
为什么要使用缓存? 在前端项目中,客户端请求服务器获取数据是一个频繁的动作,如果相同的数据被重复请求,那么多余的请求次数务必会造成带宽的浪费,以及延迟浏览器渲染所要处理的内容,从而影响用户的体验。 缓存的原理是在首次请求后保存一份请求资源的响应副本,当用户再次发起相同请求后,如果判断缓存命中则拦截请求,将之前存储的响应副本返回给用户,从而避免原创 2022-02-19 22:24:48 · 174 阅读 · 0 评论 -
防抖&&节流
防抖 function debounce(fn, time) { let timer = null return function () { clearTimeout(timer) timer = setTimeout(() => { fn.apply(this, argume原创 2021-12-06 21:40:58 · 143 阅读 · 0 评论 -
this绑定——call、apply、bind
先说说,this 就相当于我们人的父母,谁生下我,谁就是我的父母。对应到我们的函数中的this就是谁调用了我,我就指向谁。但是!我们人不仅有亲生父母,也可能因为家庭的缘故会有养父养母。在我们函数中也是一样的,我可能不想让我的this绑定到我的调用者身上,所以这时我们就需要其他的一些处理手段,也就是本文的主角call、apply、bind基本使用方法: var obj = { name: "张三" }; function fn(a, b) { console.log(原创 2021-11-26 14:39:09 · 397 阅读 · 0 评论 -
变量提升&&函数提升
变量提升:先来看一下例子吧:1、 <script> console.log(a);//undefined var a = 2; </script>2、 <script> console.log(a); </script>解释:第一个例子输出的是undefined,是因为此处存在变量提升,引擎在执行js代码的时候会自动把变量的声明提到最前面,注意,只是声明!例1的变量原创 2021-10-17 16:54:58 · 80 阅读 · 0 评论 -
程序员的大国工匠精神
现在是晚上十一点半,我终于改好了!事情的起因是这样的。今天上午在开发中遇到一个问题,感觉上并不是很复杂的技术难点。这种问题我喜欢把它称为螺丝钉问题。这种问题看似简单,但排查起来十分困难。因为系统不会报错又能正常运行,这是涉及到的功能没有效果。就如同我们使用组件没有效果,就只能进去看内部结构,可能内部结构又牵扯到其他组件,这样排查起来就十分麻烦。到最终我的问题就只是两个函数的形参写反了位置。这个问题,我在公司花了大半天时间都没有头绪。...原创 2021-10-11 23:49:19 · 1232 阅读 · 1 评论 -
你不知道的——this
首先,我们应该知道this是在运行时绑定的,并不是在编写时绑定的。它的上下文取决于函数调用时的各种条件。this的绑定和函数生命的位置没有任何关系,只取决于函数的调用方式。 当一个函数被调用时,会创建一个活动记录(也称为执行上下文)。这个记录会包含函数在哪里被调用(调用栈)、函数的调用方式、传入的参数等信息。this就是这个记录的一个属性,会在函数执行的过程中用到。this的指向问题用大白话讲就是:谁调用我,我就指向谁 //这里有一个foo函数,想通过count记录该函数被调用原创 2021-09-12 23:31:57 · 228 阅读 · 0 评论 -
JavaScript——继承
js 中的继承是原型的继承,而不是改变构造函数的原型1、继承是原型的继承*通过设置__proto__实现继承 function User() {} User.prototype.name = function () { console.log("user.name"); }; function Admin() {} Admin.prototype.__proto__ = User.prototype; Admin.原创 2021-08-15 22:44:27 · 109 阅读 · 0 评论 -
你不知道的——作用域
在执行javascript代码的过程中,主要由引擎、编译器、作用域处理我们的代码,首先来说说这几个成员的作用引擎从头到尾负责整个JavaScript程序的编译及执行过程编译器负责语法分析及代码生成作用域负责收集并维护由所有声明的标识符(变量)组成的一系列查询,确定当前执行的代码对这些标识符的访问权限举个例子:我要执行吃饭这个动作,此时的引擎就是 “我”,因为整个过程都是我在执行。吃饭就得有饭有菜,这些需要厨师给我做好放到我的饭桌上,此时 “厨师” 就扮演了编译器的角色。吃菜我只能吃我自己原创 2021-07-31 19:53:54 · 114 阅读 · 0 评论 -
JavaScript——原型、原型链
写在前面:很多人分不清__proto__和 prototype ,我个人的理解是 __proto__是作为父级原型,也就是你通过谁创建出来的。prototype 是自身的原型,你的子级被创建出来时它的它的__proto__原型就是你的 prototype1.原型初步认识 let arr = ["hello"]; console.log(arr.concat("world"));如下图,__proto__属性就是 Array 对象的原型,因为arr 是Array的实例化对象,所原创 2021-07-21 16:13:09 · 216 阅读 · 0 评论 -
JS中的任务执行流程
首先我们要明白一个概念,js它是单线程的一门语言。1.宏任务与微任务在js中我们有一个主线程,在同一时间它只能干一件事。除此之外它还有一个东西叫做任务队列,队列当中放一些其他要做的事。当主线程的事情干完了,JS 会从任务队列中拿事情干,这也就是JS干活的一个大概流程。因为console.log是同步代码,所以会立刻放到主线程中执行,而setTimeout是异步代码,它会放到我们的任务队列里边,等待主线程的活干完了,再拿到主线程执行,如下代码所示: setTimeout(() =>原创 2021-07-04 12:41:29 · 447 阅读 · 1 评论 -
js数组方法reduce应用场景
reduce 是ES6 的数组方法,能用reduce解决的问题都可以用for循环解决,但是reduce方法掌握之后,可以使我们的代码更优雅更高效。1.数组里所有值的和 var arr = [0,1,2,3]; var value = arr.reduce((pre, cur) => { return pre + cur; }, 0); console.log(value);// 输出:62.累加数组中对象里的值原创 2021-06-06 00:12:18 · 410 阅读 · 0 评论 -
你怎样理解前端?
今天在下班路上,脑子突然冒出一问,前端是什么?下面就和大家分享一下我理解的前端 最开始我给出的答案是:页面+接口,好像也没什么不对。做为前端开发的我,每天不都是在和这两个东西打交道吗,但是我又一想,如果这样回答,面试官就会说“回去等通知吧”。 &n原创 2021-04-20 20:48:49 · 1065 阅读 · 0 评论 -
交集/并集/差集
并集 let a = new Set([1, 2, 3, 4, 5]); let b = new Set([4, 5, 2, 9]); console.log(new Set([...a,...b]))差集 let a = new Set([1, 2, 3, 4, 5]); let b = new Set([4, 5, 2, 9]); console.log(new Set([...a].filter((item) =&g.原创 2021-04-11 17:38:31 · 131 阅读 · 0 评论 -
return、break、continue之区别在哪里
首先我们要知道return、break、continue都是可以跳出循环的一:return在函数体中遇到return语句,则结束函数执行(函数体未执行完部分不再执行)将表达式的值返回到函数调用处。使用return最多只能返回一个值!<body> <div id='box'></div> <script> (() => { let text = '' div =原创 2021-02-21 23:52:45 · 201 阅读 · 0 评论 -
JavaScript开发小知识积累
1、统计字符串中字符出现的次数 var arr = "helloworld"; var obj = {}; for (var i = 0; i < arr.length; i++) { var key = arr[i]; if (obj[key]) { obj[key]++; } else { obj[key] = 1;原创 2021-01-05 22:29:40 · 117 阅读 · 0 评论 -
javascript——对象转数组
后端说要和我联调接口,我说小朋友,你的数据尽量按我需要的格式来,他不服气,他说你这个没用,我说有用,传统的前后端分离返回的格式要尽量规范,这样好处理,他说试试,我说行,我请求刚发出去,他数据啪的一下就返回了,很快啊!先是一个Code码,一个字符串,一个数组,我全部接受转换成模型了啊,转换以后自然是正常处理业务逻辑和页面展示,我笑一下提交测试了,一上正式环境程序突然崩溃了,我大意了啊,字符串没有判空,我说后端你不讲码德,他说对不起马老师,是我不懂规矩,他说他是乱打的代码,他可不是乱打的。code码,字符串,数原创 2020-12-15 11:28:20 · 201 阅读 · 2 评论 -
正则表达式学习笔记
1、如果我们要在一个字符串里找出数字,该怎么做呢?第一种方法,我们采用es6的filter方法来过滤 let str = "2020woyaofadacai1121" let nums = [...str].filter(i => !Number.isNaN(parseInt(i))).join("") 第二种方法,我们用正则表达式 let str = "2020woyaofadacai1121" let nums = str.match(/\原创 2020-11-22 00:31:53 · 1009 阅读 · 2 评论 -
javascript数据解构
本篇博客将持续更新javascript数据解构内容,若有更好的方法请不吝赐教,谢谢。今天在开发过程中遇到一个问题。一个数组,里面有很多条JSON数据,我只想取每条数据的某几个字段,我第一反应是循环,然后又觉得解构更简单些。但是事情并没有那么简单,且看分析:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" conten原创 2020-05-26 21:38:20 · 241 阅读 · 0 评论 -
for...in和for....of与let和var
使用var遍历数组 <script> // 使用var类型遍历数组 var a = [1, 2, 3] for (var i = 0; i < 3; i++) { setTimeout(function () { console.log(i); }, ...原创 2020-04-19 21:05:15 · 4087 阅读 · 0 评论 -
选择、冒泡、快速排序
排序作为算法当中很重要的一块,也是面试官喜欢考的东西,今天给大家分享三种比较简单且基本的排序方式。如下代码所示:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w...原创 2020-02-23 14:50:02 · 98 阅读 · 0 评论 -
1∶1详解淘宝flexible源码
详细解析淘宝flexible源码首先这个功能是用来做移动端适配的,主要就是通过判断不同屏幕,将屏幕分成10等份,然后通过设置几等份,来设置像素,这个的作用就是将你写的几等份转换成px。还有一点需要注意的是,这是一个立即执行函数!先科普一下立即执行函数吧:几个例子吧:好,接下来进入主题:(function flexible (window, document) { var docE...原创 2020-02-21 22:36:46 · 964 阅读 · 0 评论 -
数组拉平
数组是写代码经常接触的一个东西,而有些时候数组里面的结构并不是我们想要的,所以需要拉平,其实方法有很多种,下面我简单的整理了几种方式,而我认为最重要的一种是用递归的思想来实现。具体代码如图: <script> let arr = [ [ ['7', '6'], '6', [ ['0', '4'], ['9']...原创 2020-02-10 14:55:26 · 645 阅读 · 0 评论