二三的博客

某次开发中，看到项目代码中用到了rest这个参数，但又没看到在哪里定义或者传入，当时没太理解它的意思，查了下资料才恍然大悟。含义也很简单，写个随笔记录下。

按照上面的方法，页面初始化的时候确实比之前快了很多，大概有一倍左右。不过直接跳转到最后一页，接口还是会有些缓慢。不过，对于上万条数据，也很少有人会直接跳转到最后一页进行搜索，毕竟上面也是有筛选条件可以进行筛选的。总而言之，也算是完成了性能优化。前端性能方案有很多种，比如 SSR，只是目前暂时还未了解，以后慢慢掌握。本篇文章介绍的方法只是其中比较特殊的一种，正常来说，我内心还是比较偏向于 gzip 压缩处理的。

JavaScript 中存在两大数据类型基本数据类型保存在栈内存中，按值存放的，可以直接按值访问，即引用数据类型保存在堆内存中，引用数据类型的变量，是一个浅拷贝 和 深拷贝 是指在复制一个对象时，拷贝的深度不同。

项目开发中，产品经理提了这样一个需求：将系统中的附件实现批量打包下载功能。本来系统中是有单个下载及批量下载功能，现在应业务方的需求，需要多加个批量打包下载。初步设想是：由后端编写接口实现。但后来经过思考：现在系统中已经有文件的url地址了，何必让后端写接口重复，前端处理就行。

文件下载在前端系统里面算是个比较常见的功能，尤其是在管理系统里面。本篇文章我记录下前端通过后端返回的文件url 实现文件下载的几种方法，包含批量下载。

创建一个Context对象，当React渲染一个订阅了这个Context对象的组件，这个组件会从组件树中离自身最近的那个匹配的Provider中读取到当前的context值。只有当组件所处的树中没有匹配到Provider时，其才会生效。

项目开发中，需要做一个报表功能，看了下UI图，初步定下使用echarts，不过之前使用echarts都是在Vue2和Vue3框架下开发，第一次使用开发 echarts，将流程及一些 相关配置 写个随笔记录下。

在项目开发中，遇到这样一个需求：需要对表格里面的数据进行拖拽排序。

前段时间，使用公司的 Jenkins 构建测试环境时，突然构建失败，查看了构建日志，显示没有找到这个包。但奇怪的是，代码在本地运行没问题，甚至使用yarn build命令 进行本地打包也正常，只是构建环境失败。如下如所示：这个报错出现的就很莫名其妙，上午的时候，代码还在正常构建，下午就突然不行了，而且这个包貌似这段时间也没下载过，也没有关注过。但没办法，测试环境还是要构建的，项目需要上线，必须经过构建，毕竟是打工人嘛，只能想办法解决。于是在网上冲浪寻找答案。网上的两种方法，无非是删除目录，重新。

react-router-dom 如今已经升级到了V6版本，相比较V5版本，变化还是挺大的。如今使用命令来下载，会自动下载V6版本，V6版本会在接下来的一段时间内成为主流。不过对于用习惯了V5版本的开发者而言，自然是有些不习惯。本篇文章就记录下如何降低为v5版本的两种方法。

使用vite创建项目，node 版本需要大于12.0.0，可以使用node -v查看自己当前的node版本。

记录在项目开发中遇到问题的解决方案，方便以后遇到快速解决！在该react hooks 页面中，图纸计划附件表格是一个子组件。其中 【单体】和【专业】两个下拉select选择框，数据来源依赖于【厂区】。后端给的接口，必须要先选择【厂区】，才能获取到【单体】数据；选择【单体】后，才能获取【专业】数据。提测后，测试提了一个bug：**数据进行修改，页面渲染数据完成后，切换不同单体，专业数据应清空

项目开发中，需要升级node版本。本着不想卸载 node 再重新安装的原则，因为node 的环境配置以及各种相关配置有些繁琐，所以就想着使用 命令的方式进行升级。在网上找了一些升级 node 的命令，最常见的是安装 node 的 n 模块，是用来管理 node 版本的。在 cmd 窗口输入安装命令后，窗口报错：使用这个命令，意思很简单：强制安装，也很有效，确实安装上了，但新的问题又来了：真是要吐了，竟然还失败，原因也莫名其妙，明明都已经安装成功了。现在想想，刚开始使用命令安装失败也不是没有原因。

vue-cli、create-react-app等常用工具安装、更新、查看版本等操作命令汇总

在一个父组件中，我们想要获取到其中的节点元素或者子组件实例，从而直接调用其上面的方法。Class 类组件和函数组件是两种不同的写法。父组件使用useRef创建一个 ref 对象，将这个 ref 对象赋给子组件的 ref 属性。子组件使用forwardRef包裹自己，允许作为函数组件的自己使用 ref。然后使用钩子函数，在该钩子函数的第二个函数参数中返回一些状态或方法，这个被返回的状态或方法就可以被父组件访问到。父组件使用创建的 ref 对象的current属性获取子组件暴露出的状态或方法。

对于常规数组来说，我们想要获取某一个值，或者给每层添加属性，只需要使用fileter、map等等的方法，相对来说比较简单。树形数据不同于常规的数组数据，不能确定其内部包含多少个子节点，即children。所以我们在操作树形数据的时候，不同于常规数据。其实操作树形数据也很简单，其核心就是递归。

项目开发中需求方提了这样一个需求：下拉框数据是树形结构，但父节点禁止点选，只能点击子节点。毫无疑问，选用的是组件库的treeSelect组件。但该组件默认每一级节点都可以进行选择，不符合需求。于是开始看API，发现treeDatadisabled，可以控制节点是否禁用。属性即可。

useState作为最常见的一个hook，在使用中总是会出现各种坑，最明显的就是useState更新异步的问题。比如我们把接口返回的数据，使用useState储存起来，但是当后面去改变这个数据的时候，每次拿到的都是上次的数据，无法实时更新。或者我们在函数内部使用 setState ，然后立即打印 state，打印的结果还是第一次的state 的值。比如下面的代码实例。

前段时间总结了几篇关于异步原理、Promise原理、Promise面试题、async/await 原理的文章，链接如下，感兴趣的可以去看下，相信会有所收获。本篇文章准备一个代码实例来阐述async/await、promise、setTimeout（宏任务、微任务）之间的执行顺序，做一个最终总结。理论终究是理论，枯燥难懂，对于程序猿来说，最好的还是代码实例。所以就找了一个非常有代表性的面试题。目标：不是写出正确的执行顺序，而是说清楚每一个步骤，为什么这么执行。

异步编程一直是 JavaScript 中比较麻烦但相当重要的一件事情，一直也有人在提出各种方案，试图解决这个问题。从回调函数到 Promise 对象，再到 Generator 函数，每次都有所改进，但都不彻底，直到出现了 async 函数，很多人认为它是异步操作的终极解决方案。但很多人对于async 和 await 的原理却一知半解，只知道可以解决异步问题，知其然，不知其所以然。所以，本篇文章对于async、await 的原理进行详细解释，希望可以帮到大家。有疑问，欢迎留言评论。

上一篇文章详细说明了关于 Promise 的概念以及执行顺序，Promise 作为 JavaScript 中的关键特性，无论是在日常工作中还是面试中，我们都必须掌握它。前段时间在网上看到了一些关于 Promise 的面试题，质量很好，在这里整理到下面，并加上我一些自己的见解，欢迎斧正！

Promise 是 javascript 中非常重要的一环，熟悉它是必须的，而且在面试中也常常会问到相关面试题。在了解PromiseJavaScript 中异步编程原理解析Promise 是 JavaScript 的一个内置对象，在语法上是一个构造函数，该构造函数只有一个参数，是一个函数。初始化时，这个函数在构造之后会直接被异步运行，所以称之为起始函数。起始函数包含两个参数： resolve 和 reject.

javaScript 语言的执行环境是单线程。也就是指一次只能完成一个任务，如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务。这种模式虽然实现起来比较简单，执行环境相对单纯，但是只要一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往是因为某一段 JavaScript 代码长时间运行（比如死循环），导致整个页面卡在这个地方，其他任务无法运行。为了解决这个问题，JavaScript 语言将任务的执行模式分为两种：同步和异步。本篇文章主要说一下异步。

话不多说，直接上代码！使用方式：1、先引入2、在表单里面使用以上就是常用到的表单格式校验，欢迎大家在下面的评论下面补充！

1. 安装Vue脚手架npm install -g @vue/cli或者yarn global add @vue/cli2. 查看vue版本vue --version3. 利用vue-cli创建项目vue create 项目名

精度丢失就意味着bug的出现。于是，封装了一个方法，用于解决js中N个数据相加或相减导致的精度丢失，目前该方法只适用于相加或相减，没有封装相乘或相除，如果需要解决相乘相除精度丢失，可以先进行乘除后在使用该方法进行 加 0 或 减 0......

于是，封装了一个方法，可以去除金额字符串中多余的逗号，代码如下：注意：该方法的传参是字符串形式

方法汇总1. 判断上传的文件是否为图片格式2.文件导出(下载)方法3. 图片下载方法4. 获取顶部地址栏地址在实际项目开发中，我们总是会遇到各种各样的小问题，功能不难，却要必须写，在这里我总结一些常用到的小方法，以便下次使用时可以直接调用。1. 判断上传的文件是否为图片格式// 自定义封装一个方法， 可以使用 export 导出const judgeImg = (val: any) => { const fileNames = (val + '').split('.') // 将上传的文件

在做项目时，需要根据需要动态添加或新增表单，同时还需要对表单做校验。详情如下图：刚开始做表单验证的时候，对于这个动态的表单验证有点难搞，试了好几种方法都没有搞定。最后按照下面这种方法实现了，以此篇博客留作记录，方便下次遇到类似的需求时直接开发。<a-form :model="warnData" ref="warnDataRef" :rules="rules" :label-col="labelCol"> <div class="title"> <strong&

这里写自定义目录标题vue组件中实现一键复制到剪切板功能1.安装 vue-clipboard32.使用vue组件中实现一键复制到剪切板功能1.安装 vue-clipboard3npm install --save vue-clipboard3// 或者yarn add vue-clipboard32.使用<template> <div class="content"> <a-button type="link" @click="copy"

1. 介绍这是一个很容易被忽略的特性，这里主要介绍了在 vue组件的属性中如何使用模板字符串的用法。以uview组件库的 u-tag 为例。2. 原有标签的写法以 u-tag 为例：<u-tag text="我见青山多妩媚" type="success" />在这个标签中，标签内容是固定写死的，而在实际项目开发中，是需要根据后台返回来的值进行渲染。一般我们的第一想法就是使用 {{ }} 来进行渲染，但我试过，这样行不通，所以就需要用到模板字符串来进行渲染。3. 使用模板字符串&

最近在做Echarts图表，遇到了一个有点奇怪的问题：总是报 “init of undefined” ，如下图所示：在网上百度了解决方案，然后又看了一下官方文档，才发现 Echarts5.0的引入方式和Echarts4的引入方式不一样了。解决方式如下：第一种解决方案：将Echarts的版本降到V4版本// 首先先写在echarts的最新版本npm uninstall echarts --save// 可以安装4.8.0版本（@后面是指定想安装的版本号）npm install echar

题目描述请修复给定的 js 代码中，函数定义存在的问题示例输入：true输出： a代码如下function functions(flag) { if(flag) { function getValue() { return 'a';} } else { function getValue() { return 'b';} } return getValue();}这个函数如果不仔细看，会很容易认为代码是没有问题的。但实际上，无论参数为true还是false，结果输出

解决精度丢失问题加法运算减法函数乘法运算除法运算在一些实际开发中，需要运用到加减乘除计算，int类型的数据相加不会出现问题，但小数点相加会出现精度丢失的问题加法运算加法函数：解决思路是将所有小数化为整数进行运算，然后再转化为小数function add (arg1, arg2) { let r1, r2, m; try { r1 = arg1.toString().split('.')[1].length; // 获取arg1小数位的长度 } catch (e) { r1 = 0;

字符串转换数字的方式一、parseInt二、parseFloat三、Number四、parseInt() 和parseFloat()的区别一、parseInt    parseInt()函数在转换字符串时，会忽略字符串前面的空格，知道找到第一个非空格字符。    如果第一个字符不是数字或者负号，parseInt() 就会返回NaN，同样，用parseInt() 转换空字符串也会返回NaN。parseInt()方法还有基模

解决连续多次点击定时器会加速以及页面销毁的同时销毁定时器1、正常模式下的定时器如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入1、正常模式下的定时器我这里用的是Vue举例data(){ return{ seconds: 60, }},method: {

当后台传过来一个字符串需要前端分割成一个数组时，一般是以逗号分割，但后台传过来的字符串可能会是中英文逗号混合，这时候单纯的用split分割就会出现问题。其实只需要一行代码就可以解决。this.message = this.data.value.replace(/[\uff0c]/g,",")意思就是使用replace把中文逗号替换成英文逗号然后就可以根据需要分割字符串了this.message = this.message.split(",")这样就可以获取到一个根据逗号分割的数组（无.