- 博客(47)
- 收藏
- 关注
RSS订阅
1原创 JS number方法
toString()以字符串的形式返回一个数字。日期使用的Number()方法将日期转换为数字。toFixed()返回一个字符串。parseFloat()方法。parseInt()方法。Number()方法。
2022-07-15 11:32:46
197
原创 JS string方法
提取字符串一部分的3种方法：slice(start,end)：两个参数分别为开始位置和结束位置（不包括结束位置）。若是只有一个参数，则是获取该位置的字符串。substring(start,end)substr(start,length)：若省略第二个参数，将切掉字符串的其余部分replace()：指定替换为字符串中的另一个值 toUpperCase()、toLowerCase()：转换大写和小写concat()：连接两个或者多个字符串trim()：删除字符串两侧的空格提取字符串中的字符：charAt(
2022-07-13 18:14:26
207
原创 JS const
是在ES6中引入的定义的变量const不能重新声明和分配定义的变量const具有块作用域 必须分配（在声明的同时时必须赋值，不能先声明后赋值声明时使用const的情况：一个新数组、一个新对象、新的表达式...
2022-07-13 10:45:00
140
原创 事件循环（宏、微任务）
事件循环：宏任务：setTimeout、setInterval、script、setImmedate、IO、Promise.resolve微任务：process.nextTick、Promise、async await、mutation浏览器：执行宏任务、然后执行该宏任务的产生的微任务，若微任务在执行的过程中产生了新的微任务，则继续执行微任务，微任务执行完毕后，再回到宏任务中进行下一轮循环。异步：promise是回调地狱的一个解决方案，有三种状态：pending，fulfilled，rejectedasyn
2022-07-08 14:45:42
102
原创 浏览器的缓存
1、强缓存 ：expires和cache-control判断2、协商缓存：if-none-match和if-modified-since判断3、启发式缓存：除了上面两个判断，响应头没有其它缓存限制
2022-07-06 16:37:55
51
原创 浏览器从输入URL到渲染页面的过程
网络方面：构建请求、查找强缓存、DNS解析、建立TCP连接（三次握手）、发送HTTP连接（网络请求后响应）浏览器解析方面：解析html构建DOM树、解析CSS构建CSS树、样式计算、生成布局树浏览器渲染方面：建立图层树、生成绘制列表、生成图块并栅格化、显示器显示内容、断开连接（TCP四次握手）应该还有更加优化记忆的......
2022-07-01 17:15:20
288
原创 对象键值对的形式 转换成对象组成数组的形式
比如说 constcategoryProp = {食品：34，家居生活：23，运动户外：12} 转换成 [{name：食品，value：34},{name：家居生活，value：23},{name：运动户外，value：12}]的形式const categoryPropXData = Object.keys(categoryProp || {});const categoryPropYData = Object.values(categoryProp || {});const newDa...
2022-05-26 10:30:21
287
原创 git 多人开发
若本地已有代码 需要拉取test分支的最新代码：先切换到test分支 git checkout test拉取test分支的代码 git pull origin test切换回自己分支 git checkout yinxiulan合并test git merge test
2022-04-21 10:41:46
171
原创 以对象组成的数组，获取相同对象属性值的最大值
有这样的一组数组：求这两个对象中gmv、liveNum等等的最大值先定义一个对象：const arrayMax = { gmv: 0, liveNum: 0,};再：Object.keys(arrayMax).map((item) => { res.extData.map((i) => { if (arrayMax[item]) { if (arrayMax[item] < i[i
2022-04-02 14:38:33
376
原创 react中子传父通信
现在我要将子组件中的 rightType 值传给父组件，因此，这是子组件：将this.props获取到的父组件的方法写在setState的回调函数中进行调用父组件中：
2022-03-31 16:12:47
1056
原创 图片加载失败，img触发错误显示默认图片
<img src='要显示的图片路径' onError={(e) => {e.target.onerror = null;e.target.src="占位图片路径"}} />onError：当图片加载出现错误，会触发。经常在这里事件里头写入 将图片导向默认报错图片，以免页面上出现红色的叉叉或者出现图片破裂的图标。但是如果备用图片也错误了，就会造成死循环的问题，前端就可能挂掉，这时候再添加上onerror = null就好。react中可以用上面这个onerror 原生的.
2022-03-30 15:23:19
3167
原创 Redux
ReduxRedux是JavaScript状态容器(store)，提供可预测的状态管理。也就是说用来数据分享和使用。将整个应用状态存储在一个叫store的地方组件可以派发（dispatch）行为（action）给store，不是直接通知其他组件其它组件通过订阅store中的状态（state）来刷新自己的视图重要元素state是数据集合action用户通过View改变state。那action就是改变state的指令。也就是说action是描述发生了什么的指示器。reducera
2022-03-29 18:10:46
416
原创 基础排序算法
一、冒泡排序：两两比较function bubleSort(arr){//判断边界条件,if(arr==null||arr.length<2){return;}for (let i = 0;i < arr.length - 1;i++){for (let j = 0;j <= arr.length - i - 1;i++){if(arr[j] > arr[j + 1]){int temp = arr[j];arr[j] = arr[j+1];arr
2022-03-24 10:50:25
271
原创 防抖和节流
防抖：将多次高频操作做优化只在最后一次执行。常用场景：用户输入，只需再输入完成后做一次校验即可。function debounce(fn,wait,immediate){let timer = nullreturn function(){let args = argumentslet context = thisif(immediate && !timer){fn.apply(context,args)}if(timer) clearTimeout(timer
2022-03-24 10:12:04
250
原创 CSS基础
一、盒模型：content-box（W3C标准盒模型）border-box（IE盒模型）二、BFC（块级格式化上下文）：三、层叠：z-index为正值 > z-index 为0/auto > 行内元素 > 浮动元素 > 块级元素 > z-index为负值 >background/boder四、居中布局：水平居中：1、行内元素：text-align:center2、块级元素：margin :0 auto3、flex + justify-c
2022-03-23 16:14:09
229
原创 react面试题
虚拟DOM：是真实DOM在内存中的表示。UI的表示形式保存在内存中，并与实际DOM同步。发生在渲染函数被调用和元素在屏幕上显示之间的步骤。类组件和函数组件区别：类组件：可以使用状态state和生命周期钩子。使用的时候要实例化。函数组件：直接执行函数取返回结果即可。组件生命周期不同阶段：1、初始化状态：初始化状态和默认属性。2、挂载：组件已经准备好挂载到浏览器DOM中。这个阶段包括componentWillMount和componentDidMount生命周期方法。3、更新：组件以两
2022-03-23 14:38:03
811
原创 React组件间通信
React.Component和React.PureComponent区别：PureComponent表示一个纯组件，可以优化React程序，减少render函数执行的次数，从而提高组件的性能。在React中，当prop或者state发生变化时，可以通过在shouldComponentUpdate生命周期函数中执行return false来阻止页面的更新，从而减少不必要的render执行，React.PureComponent会自动执行shouldComponentUpdate。优点：当组件更新
2022-03-18 14:39:45
871
原创 React
React高阶组件、render props、hooks区别：高阶组件（HOC）：是react中用于复用组件逻辑的一种高级技巧。其自身不是React API的一部分，是基于React的组合特性而形成的设计模式。简而言之，是一种组件的设计模式，接受一个组件和额外的参数（若需要），返回一个新的组件。是一个纯函数，没有副作用。优点：逻辑复用，不影响被包裹组件的内部逻辑。缺点：传递给被包裹组件的props容易被包裹后的组件重名，进而被覆盖。render prop：是一种在React组件之间使用一
2022-03-17 11:02:30
1046
原创 垃圾回收与内存泄漏
垃圾回收：JS代码运行时，需要分配内存空间在储存变量和 值，当变量不再参与运行时，就需要系统收回被占用的内存空间。回收机制：JS具有自动垃圾回收机制，会定期对那些不再使用的变量、对象所占用的内存进行释放，原理就是找到不再使用的变量，然后释放其占用的内存。JS中存在两种变量：局部变量和全局变量。全局变量的生命周期会持续要页面卸载；而局部变量声明在函数中，它的生命周期从函数执行开始，直到函数执行结束，在这个过程中，局部变量会在堆中或栈中存储它们的值，当函数执行结束后，这些局部变量不再被使用，它们所有的空
2022-03-15 15:23:48
301
原创 异步编程函数
回调函数缺点：多个函数嵌套的时候会造成回调函数地狱，上下两层的回调函数间的代码耦合度太高，不利于代码的可维护。promise本身是同步的立即执行函数，当执行resolve或者reject的时候，此时是异步操作，会先执行then/catch等，当主栈完成后，才会去调用resolve/reject中存放的方法执。Promise理解：是异步编程的一种解决方案，它是一个对象，可以获取异步操作的消息，改善了异步编程的困扰，避免了回调地狱，比传统的解决方案回调函数和事件更加强大。简单地说，就是一个容器，
2022-03-15 14:55:57
264
原创 call、apply、bind
this/call/apply/bind的理解：this的指向可以通过4种调用模式来判断：1、函数调用模式：当一个函数不是一个对象的属性时，直接作为函数来调用时，this指向全局对象。2、方法调用模式：若一个函数作为一个对象的方法来调用时，this指向这个对象。3、构造器调用模式：若一个函数用 new调用时，函数执行前会新创建一个对象，this指向这个新创建的对象。4、apply、call、和bind调用模式，这三个方法都可以显示的指定调用函数的this指向。在使用call()方法时，传递
2022-03-15 10:13:16
251
原创 JS基础点
原型和原型链：原型：在JS中是使用构造函数来新建一个对象的，每一个构造函数内部都有prototype属性，它的属性值是一个对象，这个对象包含了可以由该构造函数的所有实例共享的属性和方法。当使用构造函数新建一个对象后，在这个对象的内部包含一个指针，这个指针指向构造函数的prototype属性对应的值，在ES5中原型就是这个指针。原型链：当访问一个对象的属性时，若这个对象内部不存在这个属性，那么它就会去它的原型对象里找这个属性，这个原型对象又会有自己的原型，于是就这样一直找下去，这就是原型链。原
2022-03-14 14:35:41
49
原创 JS---js基础
类数组转换为数组：1、call调用数组的slice方法：Array.prototype.slice.calll(arrayLike)2、splice方法：Array.prototype.splice.calll(arrayLike,0)3、apply调用数组的concat方法：Array.prototype.concat.apply([],arrayLike)4、通过Array.from方法：Array.from(arrayLike)escape，encodeUR
2022-03-07 15:12:23
387
原创 【无标题】
对象和数组的解构：ES6提供的一种新的提取数据的模式，可以从数组或对象中有针对性地拿到想要的数据。1、数组的解构：以元素的位置为匹配条件提取想要的数据2、对象的解构：属性的名称为匹配条件，来提取想要的数据的。扩展运算符用在函数形参上时，可以把一个分离的参数序列整合成一个数组function mutiple(...args) { console.log(args)}mutiple(1, 2, 3, 4) // [1, 2, 3, 4]ES6模板语法与字符串允许用${}的方
2022-03-04 10:09:03
131
原创 JS---ES6
let、const、var的区别：1、块级作用域：2、变量提升：var存在变量提升，let和const不存在变量提升3、给全局添加属性：var声明的变量是全局变量，并且会将该变量添加为全局变量的属性，let和const不会。4、重复声明：var可以重复声明变量，后面的会覆盖前面的，const和let不可以重复声明变量5、暂时性死区：在let和const命令声明变量之前，是不可用的，var则不存在暂时性死区6、初始值设置：const声明变量必须设置初始值7、指针指向：let创建的变量
2022-03-03 18:14:15
39
原创 JS基础---（一）数据类型
JS一共有8种数据类型：eg:undefined、null、boolean、number、string、object、symbol、bigInt其中symbol、bigInt是ES6新增。这些数据又可以分为原始数据类型和引用数据类型：栈（先进后出）：原始数据类型（undefined、null、boolean、number、string）堆（优先队列）：引用数据类型（对象、数组、函数）堆和栈区别在于存储的位置不同：原始数据类型直接存储在栈中的简单数据段，空间小、大小固定，属于被频繁
2022-03-03 11:47:37
156
原创 keyword关键词传参转义问题
对于get请求的数据 ，则需要encodeURIComponent(keyword)转义一下。若是post请求的数据，则可以不需要转义，直接传keyword就好了
2021-11-09 11:05:03
97
原创 时间戳之间的相互转换
一、eg：String(2021-11-1818:22:50).replace(/-/g,"/"); //2021/11/1818:22:50二、eg：letdate=newDate("2014-04-2318:55:49:123");lettime1=date.getTime();console.log(time1); //1398250549123三、获取当前时间的时间戳（即时间用的是毫秒表示）newDate().getTime();或者n...
2021-10-28 16:35:04
103
原创 react中子传父通信
父传子：在父组件中使用子组件的时候，用一个等式将所需的方法或者相应的值传过去，然后在子组件中通过this.props来接收，最后就可以使用了。eg:在父组件中：在子组件中：子传父：eg:在子组件中：在父组件中：...
2021-10-27 16:14:09
1855
原创 flex值为1解释
flex:1!==flex:1 1 auto而是，flex:1===flex:1 1 0。即flex:1===flex:1 1 任意数字+任意长度单位所以最重要的是在第三个参数flex-basis上。其属性的作用为：在给两个属性分配多余空间之前，计算项目是否有多余的空间，默认值为auto，即项目本身的大小。auto 为表示项目本身的大小,如果设置为 auto, 那么这三个盒子就会按照自己内容的多少来等比例的放大和缩小, 所以出现了上图中三个盒子不一样大的情况若随便设置一个其他带有长度单.
2021-10-19 11:38:00
778
原创 数组API中不会改变原数组的方法
1.push2.pop3.unshift4.shift5.splice6.reverse7.fill8.sort9.copyWithin浅拷贝，若新数组改变了，也会改变原数组二、不修改原数组（即需要返回新的数组）1.slice(start,end) start开始的下表，end结束的下标（取到前一个截止，不包括这个下标）2.map3.forEach4.filter5.reduce6.entries7.find8.every（返回的是tru.
2021-10-15 11:26:01
285
原创 解决文字和IconFont字体图标垂直居中
在IconFont标签外面套一个i标签，在i标签设置样式：display:inline-block;vertical-align:middle
2021-08-26 15:44:39
1418
原创 定时器setTimeout、setInterval
setTimeout：几秒后执行一次（类似于倒计时）写法有："一秒后执行"1.setTimeout(函数名,1000);//这个函数名不带参数2.setTimeout ('test()',1000)；//这个函数名的参数可带可不带3.setTimeout (function(){},1000)；//这个函数为匿名函数setInterval：几秒后循环执行，间隔时间到来时反复执行（类似于循环定时器）它们两个的区别就是：倒计时定时器是在指定时间到达后触发事件。循环定时器是在间隔时间到来时
2021-08-16 10:45:26
298
原创 链接跳转的4 种方式问题
var url = 'www.baidu.com'//跳转1window.localtion.href = url//跳转2window.history.pushState(url);window.history.replaceState(url);//跳转3window.open(url,"_blank");//跳转4var a = document.createElement("a");a.setAttribute("href", "www.baidu.com");a.s.
2021-07-22 11:49:29
1637
原创 解决下载VSCode速度慢
复制下载地址，去新建一个下载，将下载地址中的 az764295.vo.msecnd.net部分更换为 vscode.cdn.azure.cn 使用国内的镜像服务器加速，就很快了。
2021-07-19 10:30:26
161
原创 宏任务和微任务
宏任务：整体代码script，setTimeout，setInterval微任务：Promise，process.nextTicksetTimeout是宏任务，先放入到宏任务的event队列里面，然后代码继续往下查看是否有微任务，promise的then函数把它放入了微任务序列，等到主线程的所有代码执行结束后，先从微任务队列里拿掉函数，最后微任务队列空了后再从宏任务队列中拿函数。即：用通俗的话来说，先执行微任务中的promise中的，再执行script函数里面的console.log里面的，
2021-07-16 10:39:39
141
原创 日期的表示方法：moment()
表示当天：moment().format("YYYY-MM-DD")表示昨天：moment().subtract(1,'days').format('YYYY-MM-DD')
2021-07-15 12:00:10
442
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人