自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(83)
  • 收藏
  • 关注

原创 使用VSCode内的jupyter编写R语言:绘制中国省份地区热力图

对于一门从未接触过的编程语言,相信大家的吐槽点和我一样:又要安装软件,配置环境!其实R语言的安装和环境配置并不复杂,只需要安装两部分内容:R语言+编辑器,关于R语言的安装,大家可以去看这个教程,这哥们儿写的不错R语言的集成开发环境主要是RStudio,大家可以尝试一下,我个人感觉体验不是很好笔者使用的是VSCode内集成jupyter notebook环境,通过安装R语言扩展后使用R内核编程。当然这首先安装Anaconda等环境,大家可以自行搜索安装,这里不再叙述。

2024-01-16 12:19:55 1661

原创 前端常见手撕题(详细注释版):持续更新中……

基本思路和浅拷贝一样,不同的是在拷贝时,如果遇到复杂数据类型,就要递归调用(再生成一个新的地址,把简单数据类型捞过来,返回新的地址,给到当前key),这样可以保证只要遇到复杂数据类型,都可以生成新的地址。写法2:获取时间戳,第一次肯定会触发,因为new Date获取的是从1970年到现在的时间,delay总不能大于五十年吧……返回一个函数,调用这个函数的时候就调用myBind的调用者,并改变this。第一个参数是构造函数,第二个参数是实例化时的参数。//4.事件绑定,处理服务端返回的结果。

2023-11-24 10:33:53 1368

原创 Leetcode(一):数组、链表部分经典题目详解(JavaScript版)

提前声明:本博客内容均为笔者为了方便个人理解而发布,题目思路参考自代码随想录,如果大家有觉得写的不清晰的地方,欢迎在评论区提问。

2023-08-01 14:13:37 646

原创 Vue3(二):Vue3生命周期、自定义hook、其他API、Suspense等组件

这个其实和React类似,也和vue2中的mixin类似,hook本质是一个函数,用use开头,把setup函数中使用的Composition API进行了封装。可以更方便我们去复用处理数据的逻辑let sum = ref(0) 处理数据的逻辑 ... ... 各种Composition API ... ... return sum }setup() {sum } }优势:把setup函数中使用的Composition API进行了封装。

2023-06-03 14:17:16 708

原创 Vue3(一):创建vue3工程、setup、vue3响应式原理、computed和watch

这个setup函数其实有两种返回值:1、返回一个对象 2、返回一个渲染函数,用的最多的就是返回一个对象,把用到的所有属性、方法都返回出去,方便在模板中使用(当然,现在有了setup语法糖,后面再说)如果这种情况的话和上面类似,不同的是第一个参数写成数组,且每个元素是箭头函数,返回的new和old值也是相对应的值构成的数组。其实和上面的情况四是一样的,如果简单数据类型直接.value,那么监视的就是一个写死的值。,而setup则是组合式API表演的舞台,组件中所有的数据和方法都写在setup函数中。

2023-05-25 17:31:07 2220 1

原创 TypeScript:初识ts、ts的数据类型、一些语法细节、函数中的类型、泛型

这样可以避免一些奇怪的问题,比如下面如果不声明返回值的类型,那么count当函数用不会报错,这样是不准确的,因为count是一个number类型。在某些情况下,我们确实无法确定一个变量的类型,并且可能它会发生一些变化,这个时候我们可以使用any类型。不会,那么写void类型或者其他类型作为返回值类型都不合适,我们就可以使用never类型;声明了类型后TypeScript就会进行类型检测,声明的类型可以称之为类型注解;,但是不同是可选类型是可以不传参数的,但是下面这个必须要传参,哪怕传的是。

2023-05-06 14:09:51 1203

原创 React项目规范:目录结构、根目录别名、CSS重置、路由、redux、二次封装axios

说实话这里的封装还挺巧妙的,和之前做vue项目的封装不一样,这里面用类来存储axios的实例,发请求都会调用类的实例的方法,然后该方法再调用axios实例上的方法。用于修改默认配置,该文件中的一些配置(如webpack)会和脚手架中的配置合并。🆗,现在项目搭建的就差不多了,接下来就开始写里面的东西,放到下一篇文章中吧。因此我们配置别名解决这个问题, 我的配置是使用。安装:这里安装RTK同时也会安装redux的,除此之外我们还要一起安装。,这是给我们提供好的初始样式的一个模板吧。,然后换个图标,换个标题。

2023-03-13 16:14:23 2721

原创 React(九):其他Hook、自定义Hook、Redux和Hook联动

必须以use开头噢自定义Hook本质上只是一种函数代码逻辑的抽取,严格意义上来说,它本身并不算React的特性。我感觉这东西就和高阶组件一个作用。例如有这样一个需求: 所有的组件在创建和销毁时都进行打印如果每个组件我们都单独编写是非常繁琐的, 并且有许多重复代码;我们可以将实现这样逻辑相同的代码抽离为一个自定义的Hook,在其他的组件中调用自定义Hook即可。

2023-03-12 15:37:23 675

原创 React(八):引出Hook、useState、useEffect的使用详解

之前我们一直用类组件写demo,类组件相对于函数组件有什么优势? - 类组件可以保存组件自己的状态,但是在函数组件中,修改数据页面不会重新渲染,而且就算重新渲染,重新执行函数又重新赋值,等于没改。

2023-03-10 19:05:37 888

原创 React(七):Router基本使用、嵌套路由、编程式导航、路由传参、懒加载

或HashRouter其中使用history模式;HashRouter使用hash。

2023-03-08 21:21:42 1455

原创 React(六):Redux的使用、react-redux简化代码、redux模块化、RTK的使用

可以像以前一样,写在挂载钩子中,写法一样,但是还是那个意思,组件里发请求不太好。最后我们再来看第一行是什么,其实这里的action的名字,只不过我们把名字单独写到另一个js文件引入进来,避免一些名字写错的问题。在src的index.js中引入Provider,包裹App组件并传入我们定义好的store,这样的话后代组件就可以访问store。函数,该函数返回一个高阶组件,高阶组件本身是一个函数,调用该函数可以给Son注入东西。当然啊,如果在框架中用的话,最好在销毁钩子中取消订阅,方法就是调用这个玩意儿。

2023-03-07 20:08:35 1828

原创 React(五):受控组件、高阶组件、Portals、Fragment、CSS的编写方式

类似vue中的v-model,就是双向数据绑定。比如下面这两个input框,受控组件的条件就是有value值。但是只有value值读取state中的值不行,这样input里的东西就不能改了,所以要有onChange事件去修改相应的值,实现输入框和state数据的同步。super();let {/* 1.受控组件 */ } < input type = "text" value = {/* 2.非受控组件 */ } < input type = "text" / > < h1 > {

2023-03-04 20:21:37 781 1

原创 React(四):事件总线、setState的细节、PureComponent、ref

原因是:这里回调的参数state是上一个合并状态的state,所以是可以在上一个的基础上做操作的!上面解决了这两个问题,但是真的是非常的麻烦,如果有多个数据,往下层也传了多个数据,那么我们要对每一个数据都写一个判断吗?所以我们一般不要直接去修改state中的数据,要修改内层数据的话,最好整个替换掉,给个新地址。2、第二个问题,如果子组件没有数据的改变,那么就不需要跟着父组件重新执行render函数了,我们同样可以用。1、刚才提到的,第一个参数是对象,第二个参数是回调,在第二个回调中,可以获取。

2023-03-02 15:27:27 1400

原创 React(三):脚手架、组件化、生命周期、父子组件通信、插槽、Context

我们在父组件中的子组件标签内部写几个div,那么子组件中就可以通过this.props.children读取到我们写的这些div,如果写多个,那么children是一个数组,如果写一个,那么children就是一个react元素(当然啊,我们可以通过propType限制children的类型)。比第一种更好的方式,就是我们在父组件中的子组件标签上直接添加属性,传入相应的react元素,子组件就可以通过props直接读取,直接用,非常奈斯。我们可以在这些回调函数中编写自己的逻辑代码,来完成自己的需求功能;

2023-02-28 22:36:44 1208 1

原创 React(二):jsx事件绑定、条件渲染、列表渲染、jsx的本质、购物车案例

1、默认绑定,独立执行:,一般绑定window,严格模式下undefined2、隐式绑定:被一个对象执行:3、显式绑定:call / apply / bind,4、new绑定:new Fun(),创建一个实例,this指向实例还是之前的一些知识点,看一下下面的代码:这种情况我们是把obj里面的方法赋值给了另一个变量,这样我们调用的话相当于进行了默认绑定,如果上面这段不好理解,那么看看下面的:2.jsx中绑定this的三种方式以下面这段代码为例:1、显式绑定,之前我们了解的都是直接把函数的地址给到

2023-02-27 15:00:10 1268

原创 React(一):初识React、类组件、jsx的基础语法

React是什么?用于构建用户界面的 JavaScript 库React的特点:1、声明式编程:声明式编程是目前整个大前端开发的模式:Vue、React、Flutter、SwiftUI;2、组件化开发3、多平台适配1、定义类组件,继承React.Component,并继承父类的属性。

2023-02-24 16:34:40 1092

原创 数据结构(六):冒泡排序、选择排序、插入排序、快速排序

我先自己写了一遍,我发现我写的这个其实是有问题的,内层循环控制两个元素依次比较,外层循环控制比较的趟数。来举例,外层循环控制趟数,那么4个数比较3趟,依次递减(j=3第一趟,j=2第二趟,j=1第三趟),每一趟中都要两两比较,从下标为0开始,依次比较。对于N个数据项,比较次数为:(N - 1) + (N - 2) + (N - 3) + …次(j=3第一趟比较3次,j=2第二趟比较2次,j=1第三趟比较1次)。总结:4个数要比较三趟,第一趟比较3次,第二趟比较2次,第三趟比较1次。

2023-02-24 16:12:46 661

原创 数据结构(五):红黑树、图

一组顶点:通常用 V (Vertex)表示顶点的集合;一组边:通常用 E (Edge)表示边的集合;边是顶点和顶点之间的连线;边可以是有向的,也可以是无向的。比如A----B表示无向,A —> B 表示有向;js实现图结构。

2023-02-23 09:45:22 268

原创 数据结构(四):树、二叉树、二叉搜索树

如果树中的每一个节点最多只能由两个子节点,这样的树就称为二叉树;二叉树的特性:1、 一个二叉树的第 i 层的最大节点树为:2(i-1),i >= 1;2、 深度为k的二叉树的最大节点总数为:2k - 1 ,k >= 1;3、对任何非空二叉树,若 n0 表示叶子节点的个数,n2表示度为2的非叶子节点个数,那么两者满足关系:n0 = n2 +1;如上图所示:H,E,I,J,G为叶子节点,总数为5;A,B,C,F为度为2的非叶子节点,总数为4;满足n0 = n2 + 1的规律。

2023-02-21 21:54:34 664

原创 数据结构(三):集合、字典、哈希表

哈希表是基于数组实现的,但是相对于数组和链表来说,它的查找效率更高,因为它通常会对插入元素的下标值进行变换。这种变换称为哈希函数,通过哈希函数获取hashCode,并通过取余操作获取元素在数组中的下标。哈希表的一些概念:1、哈希化:将大数字转化成数组范围内下标的过程,称之为哈希化;2、哈希函数:我们通常会将单词转化成大数字,把大数字进行哈希化的代码实现放在一个函数中,该函数就称为哈希函数;3、哈希表:对最终数据插入的数组进行整个结构的封装,得到的就是哈希表。

2023-02-14 21:17:01 900

原创 数据结构(二):单向链表、双向链表

链表和数组一样,可以用于存储一系列的元素,但是链表和数组的实现机制完全不同。链表的每个元素由一个存储元素本身的节点和一个指向下一个元素的引用(有的语言称为指针或连接)组成。类似于火车头,一节车厢载着乘客(数据),通过节点连接另一节车厢。head属性指向链表的第一个节点;链表中的最后一个节点指向null;当链表中一个节点也没有的时候,head直接指向null;双向链表:既可以从头遍历到尾,又可以从尾遍历到头。

2023-02-11 22:21:42 2016 1

原创 数据结构(一):数组、栈、队列、优先级队列

的用法,splice(1,1,‘Tom’):表示从索引为1的元素开始删除(包括索引为1的元素),共删除1个元素,并添加元素’Tom’。击鼓传花规则:围成一圈数数,比如规定数到5的人淘汰,那么淘汰的人后面的人从1开始数,然后数到5的人再淘汰,以此类推,直到剩下最后一个人,求该人的位置。插入元素’Tom‘(也可以理解为从索引为1的元素开始删除,删除0个元素,再在索引为1的元素前面添加元素’Tom’);(2)不为空,就要遍历当前队列元素,插入的新值依次比较,如果新值优先级较低,那么就使用。利用队列实现击鼓传花。

2023-02-07 19:11:02 709

原创 电商前台项目(六)完结撒花:完成注册登录功能、路由守卫

2、如果在app写,那么派发请求是在登录前,还没有token呢就请求不到数据,只有登录之后刷新页面(已经有token)才能请求到(刷新页面app肯定第一个挂载)首先把登录注册的静态页面搞过来,然后实现验证码部分,这里就是单纯的模拟一下,输入手机号,发送请求获取一个验证码,然后直接展示在文本框里,比较简单,就不多说了。后面的支付部分我简单看了一下,比较简单,就是请求数据展示数据,elementUI展示收款二维码,收款反复发请求直到付款成功等,没有什么难点,就不做了。请求数据后,服务端会返回一个字段,名字叫。

2023-02-04 15:30:38 1673

原创 电商前台项目(五):完成加入购物车功能和购物车页面

这里要注意,这个项目的接口给的都是params参数,而使用axios发请求,params参数只能拼接在url地址中,而query参数的配置项叫params,很奇怪。3、如果不写返回值,且await后是失败的Promise,那么就会抛出异常,既然抛出异常,那么async函数返回的就是一个失败的Promise。中遍历购物车数据并派发请求,(当然其实在组件中写也一样,就是这样规范点),用try-catch捕获,如果都请求成功,那么就使用。4、如果不写返回值,且await后是成功的Promise,那么就会返回。

2023-01-30 21:42:27 4539 1

原创 axios:基本使用、常用配置项、create方法、请求和响应拦截器、取消请求

一般来说,我们都会省略then的失败回调,所有的错误都在响应拦截器中捕获,做法就是在响应拦截器失败的回调中进行错误提示,并返回一个pending状态的Promise,这样的话我们使用async/await就不用包try-catch了,then也就不用指定失败的回调了。当请求结束后,如果请求成功,就会走第一个回调,然后再走then中成功的回调,所以这里的返回值就是Promise成功的值;是得到响应之后执行的一组回调函数,若请求成功,对成功的数据(成功Promise的结果值)进行处理;一般来说只有一个回调。

2023-01-05 21:48:22 4513 1

原创 Promise:工作流程、常见API、使用方法、手撕Promise、async/await

Promise指定回调函数的方式更加灵活,且支持链式调用,可以解决回调地狱的问题。回调地狱:回调函数嵌套调用,外部回调执行结果是内部函数执行的条件,不便于阅读且不便于异常处理,解决方式就是promise(或async/await)

2022-12-28 18:13:00 1909

原创 JS高级(四):正则表达式、常见的特殊字符、案例、预定义类、正则替换

中括号:字符集合,匹配方括号中的任意字符大括号:量词符,里面表示重复的次数或范围只有abccc返回 true var reg = / ^[a-zA-Z0-9_-]{3,7}$ /;小括号:表示优先级只有abcabcabc返回 true预定义类就是某些常见模式的语法糖罢了案例:座机号码验证:010-12345678或0530-1234567正则中的或用 | 来表示,不能有空格。有^$时,[0-9]是多选一,长度为3,没有^$就是只要是数字就行,就没有长度限制了。

2022-11-18 16:09:34 828

原创 JS高级(三):严格模式、闭包、递归、深拷贝和浅拷贝

全局变量、局部变量和作用域链闭包:能够访问另一个函数作用域中变量的函数。原理:作用域链,当前作用域可以访问上级作用域中的变量产生闭包的条件:1、函数套函数2、内部函数访问外部函数局部变量,必须要访问了变量才会产生闭包闭包就是将函数内部和函数外部连接起来的一座桥梁。什么意思呢?函数inside访问了函数outside的作用域,那么inside函数就是一个闭包 function outside() {

2022-11-17 18:17:42 902

原创 JS高级(二):继承、数组的一些api、Object.defineProperty()、call、apply、bind

就可以,这是一个深拷贝,这样的话子的原型对象就可以通过父的实例指向父的原型对象,解决上面的问题。当数组元素为简单数据类型时(操作el不会变,操作arr[index]就会变,奇怪),而复杂数据类型如果修改了里面的属性,原数组就会改变。查找数组中有没有满足条件的元素,如果找到第一个,就不再往后执行,这也导致some的效率比其他的更高一些,找到了直接。这是一个浅拷贝,这样的话子和父原型对象地址一样,如果子添加自有方法,父也会添加,不合理。,类的本质就是一个函数),那么子构造函数如何继承父构造函数的属性呢?

2022-11-16 17:47:07 668

原创 JS高级(一):类、原生tab栏切换、原型和原型链

对象的原型(__ proto__)和构造函数的原型对象(prototype)里都有一个属性constructor,我们成为构造函数,因为它指向构造函数本身(无限套娃,原型对象里有constructor,constructor里是构造函数,构造函数又有原型对象,原型对象又有constructor……如果子类继承父类,子类和父类中有同名方法,那么子类中的实例调用时优先调用子类中的方法,如果子类没有该方法,才去调用父类的该方法。4、所有子类继承的父类的属性都写到super里,子类独有的要在super后添加。

2022-11-16 10:40:45 1081 4

原创 JavaScript中的空数组和空对象布尔值是true还是false?

2.空数组和空对象转化为不一样对象转化为Number都是NaN,数组视情况而定3.作为if语句的判断条件由于空数组和空对象都是类型,因此用判断的时候,都为其实本来二者转化为布尔值就是true:4.和布尔值比较却不是true这是因为任何值和布尔值比较时,两边都会转化为Number类型5.只有以下几个类型布尔值为false、、、 、或者7.关于null和undefined和0比较undefined 只与 null 相等,不会与其他值相等但是相等性检查 == 和普通比较符 > < >=

2022-11-10 15:00:29 2850

原创 Vue中引入echarts的步骤,折线图、柱状图、饼图的常用配置项

注意:如果echarts的版本在5.0以上,只能局部引入,全局引入会出错(好像是这样,如果不对欢迎指正)配置好ref属性,用于后面初始化容器获取DOM。准备一个函数,并在挂载时调用。

2022-11-04 15:02:35 2654

原创 Electron项目运行时满屏飘红和卡在编译阶段,问题解决

跑的时候遇到满屏飘红的问题,最终发现是node版本过高导致,把node降到14.0.0版本,问题解决。2、使用npm安装也可以但是可能会失败,多安装几次,如果不行就用cnpm。跑的时候卡住,最后发现不小心在vue根标签外边敲了个字,把字删掉问题解决。3、在项目目录下使用cnpm淘宝镜像来安装(如果用npm可能会出错)把npm的仓库切换到国内taobao仓库,1、全局注册cnpm命令,如下。在浏览器运行前端:脚手架目录。使用窗口打开:项目根目录先。4、实在不行安装全局得了。

2022-10-25 10:36:51 763

原创 Vue2电商前台项目(四):完成Detail详情页模块业务

请求数据是异步操作,所以`getters`中的数据`skuInfo`没有读到的话,会先返回空对象,然后去读取空对象身上的属性,肯定会报错,但是后边数据请求回来了,又会重新渲染重新响应,所以页面显示正常,但是控制台会先报一个错,解决办法还是加个`逻辑或`把它置空一下子 `|| []`

2022-09-21 21:54:19 2133 3

原创 Vue2电商前台项目(三):完成Search搜索模块业务

当用户点击搜索或三级联动的时候,需要根据关键字再发一次请求来获取相应的数据,而我们派发`action`请求数据的操作是放在Search`mounted`挂载函数里面的,而我们在`Search`页再点搜索或三级联动时,mounted不会再执行了.

2022-09-17 10:24:24 3284 5

原创 Vue2电商前台项目(二):完成Home首页模块业务

1、actions执行的时候,要通过api里面的接口函数调用,向服务器发请求,获取服务器的数据,需要把之前的api引入进来,在这里发请求就是要调用这个reqCategoryList函数,如果请求成功(code===200),那么把数据交给mutations进行处理。防抖:前面的所有的触发都被取消,最后一次执行在规定的事件之后才会触发,也就是说如果连续的快速触发,只会执行一次 ----------------------当事件被触发后,延迟 n 秒后再执行回调,返回的是一个函数。

2022-09-09 22:11:12 9005 7

原创 Vue2电商前台项目(一):项目前的初始化及搭建

文件夹:放置项目的依赖public文件夹:一般放置的是静态资源(图片),需要注意:放在public文件夹中的静态资源,webpack进行打包的时候,会原封不动打包到dist文件夹中,不会当做一个模块打包到 JS 里面src文件夹​ —assets文件夹:一般放置的是静态资源(一般放置多个组件公用的的静态资源),需要注意:放置在assets文件夹里面的资源,webpack打包的时候,会把静态资源当做一个模块,打包到JS文件里面​ —components文件夹:一般放置的是非路由组件(全局组件)

2022-09-07 14:16:12 3967 2

原创 Vue2(十四):replace属性、编程式路由导航、缓存路由组件、两个新钩子、路由守卫、history与hash

在这里再搞一遍,搞在News组件里,循环变化透明度,但是你想离开这个选项卡时让定时器停,就要走销毁流程,但是News里面的input输入框数据要保留,又不能被销毁。注意:缓存的名字是组件名!必须通过路由规则进入(你得点啊),写组件标签进入不行,而且是进入路由组件时调用(相当于前置路由守卫),to为当前组件。你得触发路径的变化,前端浏览器监测到了才允许你离开,时离开组件时调用这个函数,在后置路由守卫之后。使用下面的api,有三个参数,分别是to到哪里去,from从哪里来,next下一步(放行)

2022-09-05 16:21:55 2129 1

原创 Vue2(十三):路由的使用及注意点、嵌套路由、路由的query和params参数、props配置

vue-rooter:是vue的一个插件库,专门用来实现SPA应用1、路由就是一组映射关系(key - value),多个路由需要路由器(router)进行管理。2、key 为路径, value 可能是 function 或 component组件3、vue 的一个插件库(vue-router),专门用来实现 SPA 应用。

2022-09-01 22:01:39 2120

原创 Vue2(十二):Vuex环境搭建、Vuex工作原理、几个配置项、多组件共享数据、Vuex模块化

安装:注意Vue2一定要安装vuex3,如果是vue3可以直接安装的是vuex4,可以去文件里看下vue的版本是啥,千万别输错了,不然会陷入痛苦的报错……创建文件:在此文件中引入插件并使用vuex插件,使用vuex插件必须在引入store之前,如果在main.js中引入和使用vuex的话,由于js文件里所有的import语句都会提升到最开始执行,所以会报错滴。总结:引入store必须在之后3.main.js引入storeJS执行的时候会把import提升到顶部,与摆放顺序无关,如果放在main.js

2022-08-31 21:58:43 2209 1

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除