- 博客(40)
- 收藏
- 关注
RSS订阅原创 在react中怎么手动创建销毁一个组件？
在react中怎么手动创建销毁一个组件？相信使用过vue的小伙伴们都知道，在vue中，有很多指令可以供我们使用，其中有一个指令叫做 v-if，可以通过操作 DOM 元素去控制组件的显示隐藏，那么在 react 中我们有应该怎么控制组件去显示隐藏呢？具体的代码如下：// 默认设置为 true， 显示组件const [isShow, setIsShow] = useState(true)const headle = () =>{ // 控制组件隐藏 setIsShow(false)}
2022-05-10 22:22:20
5208
3
原创 null 和 undefined 的区别
null 和 undefined 的区别区别null 表示一个对象被定义了，值为“空值”undefined 表示不存在这个值typeof undefined //"undefined"在这里插入代码片undefined : 是一个表示 “无” 的原始值或者说表示 “缺少值” ，就是此处应该有一个值，但还 没有定义。当尝试读取时会返回 undefined；例如变量被声明了，但没有赋值时，就等于 undefinednull : 是一个对象(空对象, 没有任何属性和方法)；typeof null
2022-05-05 23:21:11
1005
原创 说说JavaScript 内置的常用对象有哪些？并列举该对象常用的方法？
说说JavaScript 内置的常用对象有哪些？并列举该对象常用的方法？对象及方法Arguments ：函数参数集合Arguments[ ]：函数参数的数组Arguments ：一个函数的参数和其他属性Arguments.callee ：当前正在运行的函数Arguments.length ：传递给函数的参数的个数Array 数组length ：属性 动态获取数组长度join() ：将一个数组转成字符串，返回一个字符串reverse() ：将数组中各元素颠倒顺序delete ：运算符 只
2022-05-04 23:50:29
825
原创 创建对象的几种方式
创建对象的几种方式1、简单对象的创建使用对象字面量的方式{} 创建一个对象（最简单，好理解，推荐使用）代码如下:var Cat = {} //JSON Cat.name="kity" //添加属性并赋值Cat.age=2Cat.sayHello=function() { alert("hello "+Cat.name+",今年"+Cat["age"]+"岁了")//可以使用“.”的方式访问属性，也可以使用 HashMap 的方式访问}Cat.sayHello() //调用对象的（方法
2022-05-03 22:35:53
3756
原创 vue 和 react 的区别？
vue 和 react 的区别？一、监听数据变化的实现原理不同Vue通过 getter/setter以及一些函数的劫持，能精确知道数据变化。React默认是通过比较引用的方式（diff）进行的，如果不优化可能导致大量不必要的VDOM的重新渲染。为什么React不精确监听数据变化呢？这是因为Vue和React设计理念上的区别，Vue使用的是可变数据，而React更强调数据的不可变，两者没有好坏之分，Vue更加简单，而React构建大型应用的时候更加鲁棒。二、数据流的不同React一直不支持双向绑定，
2022-05-02 22:51:26
783
原创 slice 和 splice 的区别
slice 和 splice 的区别slice:不会影响返回原数组,会返回一个新数组slice (开始下标[包含自己], 结束的下标[不包含自己])包头不包尾let arr = [1, 2, 3, 4, 5, 6]arr.slice(1) // [2, 3, 4, 5, 6]arr.slice(2) // [3, 4, 5, 6]console.log(arr) // [1, 2, 3, 4, 5, 6]splice:会影响原数组会返回一个新数组., 原数组是
2022-05-01 22:22:10
255
原创 echarts 柱状图怎么设置达到某个标准之后展示一条过标的线？
echarts 柱状图怎么设置达到某个标准之后展示一条过标的线？如图所示中间的红色虚线：代码如下：option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { data: [120, 200, 150, 80, 70, 110, 1
2022-04-28 23:43:25
1526
原创 怎么实现一行超出显示省略号？
前言在实际开发中，一行的文字太多的时候，他会挤出去，影响美观，所以我们可以设置让他一行显示省略号，让别人知道，后面还有内容，但是一行放不下了，我们可以通过设置以下几个属性：文字强制一行：white-space: nowrap; // 强制一行让文字超出一行之后隐藏over-flow: hidden; // 溢出隐藏文字溢出的部分展示省略号...text-overflow: ellipsis; // 文字溢出显示省略号over-flow: hidden; // 溢
2022-04-26 23:43:53
8647
3
原创 git 在 commit 提交之后怎么撤回本地提交
当我们使用 git 开发时，一般会执行这几个命令：git add . // 提交到暂存区git commit -m "开发：xx功能完成" // 提交到本地仓库可以使用下面这个指令撤回：git reset --soft HEAD^// 这里的 HEAD^ 意思是回退到上一个版本，可以写成 HEAD~1// 如果 commit 了两次，两次都想回退，可以写成 HEAD~2注意：这个指令只撤回本次 commit 提交，并不会回退您的代码，所以可以安心使用~如果只是单纯的comm
2022-04-25 22:30:00
15060
2
原创 Echarts 柱状图调整 y 轴单位标题与图表之间的距离
Echarts 柱状图调整 y 轴单位标题与图表之间的距离在我们绘制图标的时候，有时 y 轴单位标题的位置距离图标太近，影响美观，如图所示：我们想把 元 离图表远一些，怎么操作？option = { title:{ text: '每周报表' }, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: '
2022-04-24 21:00:00
15530
原创 在 Echerts 中设置柱状图的粗细
在 Echerts 中设置柱状图的粗细需要改变 Echarts 柱状图的柱子的粗细。类似这样的：那需要加哪个配置？option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { data: [120, 200, 150, 80, 70
2022-04-24 00:24:46
12589
3
原创 数组处理之数组扁平化（数组降维）
什么是数组扁平化？数组扁平化，听起来很高级的亚子，其实就是将多维数组转换为一维数组（降维）。例如：[1, 2, 3, [4, 5, 6, [7, 8 ]]]// 转换为[1, 2, 3, 4, 5, 6, 7, 8 ]数组扁平化的几种方法方法1、ES6中的 flot 方法...
2022-04-21 09:19:54
526
原创 超全的12种数组去重的方法
前言数组去重，可以说是一个比较常见的面试题，今天来盘点一下都有哪些方法可以实现数组去重。方法1、双重for循环这是一个最笨的方法，双重循环。var arr = [1, 2, 3,4 ,5,6, 4, 3, 8, 1] // 数组去重： // 方法1： 双重for 循环 function newArrFn (arr) { // 创建一个新的空数组 let newArr = [arr[0]] for(let i = 1;i<arr.len
2022-04-19 21:56:17
48641
6
原创 可以实现继承的几种方式
继承的几种方式说起继承，又是一个老生常谈的问题了。今天来讲讲继承的几种方法以及他们的优缺点吧。一、原型链继承原型链继承：通过原型将一个引用类型继承另一个引用类型的属性和方法。// 构建一个父类function Parants (){ this.name = 'zs', this.age = 18 this.hubby = { study: 'js', read: '西游记' }}// 定义方法Parants.prototype.getHubby = function () {
2022-04-18 21:44:12
1781
原创 vue 中路由传参的几种方式
vue 中路由传参的几种方式：说起传参，大家都不陌生。传参是前端人员经常会用到的一个操作，在我们开发过程中，有些情况下我们需要用到上个页面的某个参数，就要使用到路由传参了。接下来本文会详细介绍一下 vue-Router 的几种传参方式，以及一些小细节。如果我们要实现从A页面跳转到B页面，这里我们使用 router-link 的方法去实现，那么该怎么写呢？<router-link :to="{ A: 'xxx', query: { xx:'xxx' }}" /><router-lin
2022-04-17 12:13:35
1739
原创 谈谈本地缓存的几种方式以及他们的区别？
谈谈本地缓存的几种方式以及他们的区别？说起本地缓存，大家想到的应该都是这几个方法：localStorage、sessionStorage、cookie。相同点不必我再多说了，都可以实现本地缓存的效果。那么他们有什么不同呢？接下来我把不同点分四个点来说：与服务器交互cookie：是网站为了标识用户的身份而存储在用户本地终端上的数据（通常需要加密），通常会在 同源 的 HTTP请求中携带（即使不需要），在浏览器和服务器之间来回传递。coolie还有路径的概念，可以控制存储在某个路径下面。localS
2022-04-16 22:03:34
2675
原创 超全的数组去重12种方法
前言数组去重，可以说是一个比较常见的面试题，今天来盘点一下都有哪些方法可以实现数组去重。方法1、双重for循环这是一个最笨的方法，双重循环。var arr = [1, 2, 3,4 ,5,6, 4, 3, 8, 1] // 数组去重： // 方法1： 双重for 循环 function newArrFn (arr) { // 创建一个新的空数组 let newArr = [] for(let i = 0;i<arr.length;i+
2022-04-15 23:09:33
29616
3
原创 你知道 Vue 中的 watch 和 computd 的区别吗？
你知道 Vue 中的 watch 和 computd 的区别吗？首先先来说一下基本概念。watch，顾名思义，就是监听，而computed，就是计算属性啦。那他俩有啥区别嘞？computed：初始化显示或者相关的 data、props数据变化时调用计算属性不在data中定义，而是依赖data或者props中的数据，重新计算出一个新的值，这个值会根据依赖的已知值的变化而变化在 computed 属性对象中定义计算属性的方法，和取data 对象里的数据属性是一样的，以属性访问的形式调用如果com
2022-04-14 20:06:46
233
原创 如何自己手写一个 keep-alive 组件
如何自己手写一个 keep-alive 组件用过 vue 的小伙伴们，应该知道，在 vue 中有一个自带的组件，叫做 keep-alive 的组件。那么你知道 keep-alive 组件有啥用吗？在日常开发过程中，我们一般都是组件化开发，我们会把项目拆分成很多个业务组件，然后通过合理的方式来组织起来。既然是组件化开发，那么必不可少的就是组件直接的切换。在 vue 中有一个动态组件的概念，他可以帮助开发者更好的实现组件之间的切换。在我们开发过程中，但是在面对需求的比较频繁，就会频繁的切换组件，而组件切换
2022-04-12 21:50:44
629
原创 一分钟让你学会做搜索关键字高亮
在我们的日常开发中，在搜索框去搜索一个内容，搜索的关键字高亮是一个比较常用的功能。例如下图所示：我们可以看到，java四个字母是高亮的状态。那么这个功能是怎么实现的呢？基本思路：我们可以用正则表达式去匹配字符串，如果匹配成功了，就给他设置一个高亮的效果。初步代码如下：在这里插入代码片......
2022-04-11 23:01:26
3028
2
原创 超详细的正则表达式的使用方法，学不会找我
正则表达式的基本使用前言： 在我们开发过程中，有很多地方需要用到正则表达式。如验证用户登录信息、手机号、邮箱地址等等。那你都会正则表达式的哪几个方法呢？首先，我们要知道什么是正则表达式。正则表达式的定义：正则表达式 RegExp (regular expression) 是ECMAScript内置对象，是一个用于对字符串实现逻辑匹配运算的对象正则表达式的作用：按照某种规则来匹配字符串，而正则表达式就是制定这个规则如何使用正则表达式(1) 创建正则表达式对象(2) 开始匹配 使用
2022-04-10 22:45:23
13563
4
原创 前端性能优化之自己封装图片懒加载组件
总所周知，项目性能优化是一个比较重要的事儿。其中懒加载占很大一部分。主要有图片懒加载、路由懒加载、组件懒加载等。图片懒加载可以说是首屏优化中比较常用的。大家也知道有一些组件库会有专门做懒加载的功能。但是你知道懒加载到底是咋实现的吗？今天咱们就来整理一下它的实现原理以及怎么自己封装一个可以实现图片懒加载功能的组件。首先，他是通过判断图片到可视区域的距离来做判断。如果到达了可视区域，就可以加载图片，如果没到可视区域，就不加载。接下来就实现一下基本的图片懒加载的功能。它主要是利用了一个叫做Interdec
2022-04-09 22:57:21
1070
原创 自定义封装字体图标组件
前言之前用一些组件库的时候，一直很好奇为什么只是用一个标签，设置一个类名，就可以实现显示对应的字体图标，这中间到底要做什么才能实现这样的效果。于是为了搞清楚他到底做了什么，决定自己封装一个字体图标的组件，来实现同样的功能。我们先来做一个测试用例。// 我们想要的使用格式是这样的<Icon// 类名 - 使用者可以自己指定图标的样式，如颜色、大小等className="someClass"// 样式 - 需要展示的图标的款式type="iconbtn_like_sel"// 事件 -
2022-04-08 23:07:50
380
原创 配置 @ 符号表示跟路径并且自动提示
前言当我们在项目中引入文件的时候，如果这个文件藏的比较深，需要一层一层的 ./ 找出去，这样就比较麻烦，开发效率也不高。为了提高开发效率，我们可以配置从根路径 src 去查找。一般我们用 @ 符号代表根路径，这样别人一看就知道是从 src 出发找文件的。那么 @ 符号应该怎么配置呢？1、需要下载一个修改 CRA 配置包npm i -D @craco/craco // 或者yarn add @craco/craco 2、创建 craco 的配置文件 craco.config.js文件代码如
2022-04-07 23:23:22
958
1
原创 你知道怎么在react 中配置ESLint 吗？
怎么在react 中配置 ESLint？前言想必用react的各位应该都知道，我们之前使用 vue，脚手架是会自动帮我们集成ESLint 的，但是react 没有帮我们集成，所以需要我们自己配置。那么配置ESLint 我们都需要准备什么呢？...
2022-04-06 23:40:21
3317
2
原创 当发请求时出现 401，原来可以这样解决，还不赶快学起来
在我们写页面的时候，难免会遇到 401 这个情况，那咋解决呢？不慌，我这里有两个方法可以解决，来看看是哪种方法吧
2022-04-06 21:19:45
12406
原创 使用原生方法设置输入框的光标位置
前言前段时间碰到一个需求，在一个原本有默认值的``input``输入框中，希望得到的效果是**页面一进去就获取光标**，让用户可以输入内容。但是当我使用 ``focus``获取光标之后，却发现**在文字的最前面**，哎？这可不太对劲啊。不应该在文字的最后面吗？怎么跑到最前面了呢？
2022-04-05 22:42:23
4191
原创 17种靠纯CSS就可以实现的动画，你会几种呢？
前言说起CSS，想必大家都不陌生，但是你真的会用CSS实现动画吗？下面是我用纯CSS实现的几种动画，有图有真相！看看你会做几个呢？1、交错动画2、伪类3、多层边框4、伪元素...
2022-04-05 16:34:49
2228
4
原创 数组常见的9个遍历方法，你都知道哪些呢？
数组的遍历方法可以说是很常用了，接下来一起来盘点一下都有哪些方法可以实现遍历吧。首先是大家都很熟悉的**for循环**啦。1、for循环let arr = [1,2,3,4]// item：当前每一项for (let i = 0; item<=arr.length; item++ ) { console.log(item) }2、forEach()**forEach()**方法接收一个回调函数（这里我用的是箭头函数的方法），参数有三个，分别是每一项，当前项的索引、以及原数组。
2022-04-04 23:25:19
3289
1
原创 如何自己手写一个React的有倒计时功能的hook？
如何自己封装一个有倒计时功能的hook？代码如下：import React, {useState, useEffect, useRef} from 'react'export const useCountDown = () => {/* 基本思路： 1. 写一个定时器 2. 提供方法 - 可以直接调用，然后开启定时器 3. 清除定时器 4. 设置节流 5. 设置文本的状态*/ // 定义倒计时的数量 var [count, setCount] = u
2022-04-03 21:06:31
1047
原创 react怎么配合 ts 发thunk 请求呢？
在 react 中怎么配合 ts 发请求呢？一般react 发thunk 请求的步骤流程是这样的：为了方便理解我还画了一张图，就是有一丢丢的抽象…下面是具体的代码首先在组件中通过 dispatch 来触发 异步的 actions 代码dispatch (xxxaction())然后就走到了 action 的具体模块里面一般会先在 store/index.ts 文件里面定义数据类型// 这里定义的是获取 reducer 里面的全部的数据type RootState = ReturnTyp
2022-04-02 23:10:14
516
原创 惊了，浏览器竟偷偷干了这些事....
前言之前我就一直好奇，为什么我在浏览器输入一个地址之后，就可以返回数据，这中间到底发生什么了呢？于是我苦研技术二十年（bus），终于把这中间发生了啥大概给理清楚了。接下来就一起来看看到底发生了啥子吧！从大的方向来说，它做了这么几件事：URL 解析CDN查询TCP连接（三次握手）HTTP 请求响应请求（四次握手）渲染页面那么我们来详细的说一下具体的实现步骤吧。1、URL 解析：一个 URL 包括 协议，网络地址，资源路径。它会先检查你输入的地址是不是合法的。如果是不合法的地址，
2022-04-01 21:57:20
1036
原创 你真的知道 call()、bind()、apply()的区别吗
前言相信大家或多或少都了解过函数的这几个方法：call()、bind()、apply()。那么它们是干什么的呢？或者说有什么相同点，可以让它们相提并论呢？相同点：都可以改变函数的上下文，也就是 this 的指向第一个参数都是 this 要指向的对象都可以利用后续参数传参不同点：call()：基本语法：函数名.call(this 修改后的指向，arg1,arg2,arg3....)// 第二个参数接收的是若干个参数的列表应用场景：适应于只有一个参数的函数例如：伪数组
2022-03-31 23:07:37
229
原创 ts的一些应用场景，包你会用到
ts的实际应用场景合集需求1：如何定义一个变量可以是 null 也可以是 number 类型?例如：定时器。思路：可以利用联合类型// | 联合类型 变量可以是两种类型之一let timer:number|null = nulltimer = setTimeout()console.log(timer) // 3需求2： 如何定义一个数组，它的元素可能是字符串类型，也可能是数值类型？例如：数组的 push 方法。思路：数组结合联合类型来使用 // 方法1： let arr3:
2022-03-30 23:24:57
4972
原创 TypeScript 保姆级教程，再也不用担心学不会啦
什么是 TypeScript？TypeScript，简称 ts，是微软开发的一种静态的编程语言，它是 JavaScript 的超集。有什么特别之处?简单来说，js 有的 ts 都有，所有js 代码都可以在 ts 里面运行。ts 支持类型支持，ts = type +JavaScript。那么 ts 和 js 有什么区别呢？JavaScript 属于动态编程语言，而ts 属于静态编程语言。js：边解释边执行，错误只有在运行的时候才能发现ts：先编译再执行，在写的时候
2022-03-29 23:45:34
1241
原创 让一个盒子垂直水平居中的几种方法？
相信大家在网上都多多少少看到过一下文章，但是大多数写的代码包括HTML 的结构和样式挤在一起，比较杂乱，不方便阅读，所以我自己整理了一份相对比较容易阅读的文档，希望能对大家有所帮助！1. 利用定位给父元素设置相对定位，子元素设置绝对定位，子元素设置 top:50%，left:50%，margin-top子元素高的一半，margin-left，子元素宽的一半2. 利用transform父元素设置相对定位，子元素设置绝对定位，子元素设置 top:50%，left:50%，transfo...
2022-02-21 00:51:05
384
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人