JS
莉兹Liz
good good study, day day up!
展开
-
跳转链接时加个时间戳
链接有?,直接加&参数;没有,加?再加参数// url this.url// t 时间戳,也可timestamplocation.href = this.url.indexOf("?")>-1?`${this.url}&t=${Date.now()}`:`${this.url}?t=${Date.now()}`;原创 2022-03-17 19:11:23 · 1014 阅读 · 0 评论 -
JS校验上传图片类型
常见图像文件类型缩写文件格式MIME类型文件拓展名浏览器兼容性APNGAnimated Portable Network Graphics动态便携式网络图像image/apng.apngChrome, Edge, Firefox, Opera, SafariAVIFAV1 Image File FormatAV1 图像文件格式image/avif.avifChrome, Opera, Firefox (feature flag)BMPBitmap f原创 2021-08-30 17:03:21 · 1056 阅读 · 0 评论 -
vue添加nrm失败throw new ERR_INVALID_ARG_TYPE(name, ‘string‘, value);
问题使用nrm添加公司私源失败,报错throw new ERR_INVALID_ARG_TYPE(name, 'string', value);解决1、鼠标移到TypeError第四行,(C:\Users\zhanshiyu\AppData\Roaming\npm\node_modules\nrm\cli.js:17:20),Ctrl+鼠标点击,进入cli.js页面。2、替换第十七行代码:// const NRMRC = path.join(process.env.HOME, '.nrmrc')原创 2021-06-22 11:03:29 · 256 阅读 · 0 评论 -
js去除字符串空格
js原生方法trim()str = str.trim();局限:只能去除字符串两边空格let str = " 1 2 3 ";str0 = str.trim();// "1 2 3"正则表达式去除字符串所有空格str = str.replace(/\s*/g,"");去除字符串两边空格str = str.replace(/^\s*|\s*$/g,"");去除字符串左侧空格str = str.replace(/^\s*/g,"");去除字符串右侧空格str = str.r转载 2021-06-03 14:51:46 · 123 阅读 · 0 评论 -
取消冒泡
showModal = (e) => { e.stopPropagation();}原创 2021-05-25 17:49:29 · 70 阅读 · 0 评论 -
AntD Upload在React useState中使用问题
主要代码<Upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" listType="picture-card" fileList={infoList} onPreview={(val:any)=>{ setName(val.name); setImage(val.url); setVisible(true); }} showUploadList={{showRemoveIcon: false}}原创 2021-05-08 10:42:34 · 521 阅读 · 1 评论 -
JS文件上传时使用MD5加密
什么是MD5?MD5信息摘要算法(英语:MD5 Message-Digest Algorithm),一种被广泛使用的密码散列函数,可以产生出一个128位(16字节)的散列值(hash value),用于确保信息传输完整一致。(MD5 百度百科)简而言之,就是对上传文件进行加密。MD5怎么用?在页面中使用需下载依赖包,yarn spark-md5或npm install spark-md5,并通过import引用。import SparkMD5 from 'spark-md5';实例imp原创 2021-04-02 15:11:52 · 2311 阅读 · 2 评论 -
JS对象数组子级合并到父级
对象数组有最多三层结构,最外层对象数组、children内嵌套对象数组、嵌套数组内children嵌套的对象数组,即如下的arr。别人问的问题,傻瓜解法。循环遍历,push方法即可将子级放进父级中。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">原创 2021-04-02 09:55:44 · 1768 阅读 · 1 评论 -
定时器setInterval,设置执行时间,接口最多请求次数
需求首先请求一个接口,根据返回值请求第二个接口,第二个接口需要每隔1s重复请求一次,根据返回值判断是否终止请求,且第二个接口最多请求5分钟,超时则前端提示“请求超时”。定时器定义MDN setInterval定义WindowOrWorkerGlobalScope 的 setInterval() 方法重复调用一个函数或执行一个代码段,在每次调用之间具有固定的时间延迟。在窗口和工作接口上提供的setInterval()方法重复调用函数或执行代码片段,每次调用之间有固定的时间延迟。它返回一个时间间隔原创 2021-03-22 10:46:18 · 3979 阅读 · 2 评论 -
更改AntD中CheckBox样式
代码index.js文件import React from 'react';import { Checkbox } from 'antd';import './index.less';class demo extends React.PureComponent { constructor(props) { super(props); this.state = { checkBoxValue: [], checkBoxOptions: [ // { label: '周原创 2021-02-03 16:18:52 · 5906 阅读 · 0 评论 -
AntD中Form表单自定义验证规则
需求AntD中Form表单自定义验证规则,不能为xxx或者只能是xxx代码不能为xxx<Form.Item label="学生编码" name="stuId" validateFirst={true} // 出错时两个校验分别生效 rules={[ { required: true, message: '学生编码不能为空' }, { validator: (rule, value) => { let reg = new RegExp(/[\u4E00-\u9FA5]原创 2021-02-03 14:55:28 · 6033 阅读 · 0 评论 -
ECharts中设置部分数据legend默认置灰
需求ECharts中设置部分数据legend默认置灰,数据按名称主要分为三类,收入数据、同比数据及环比数据,需求要将同比数据默认置灰。查找ECharts官方文档,发现可以通过设置legend. selector来实现。legend是动态生成的,因此需要一个方法,动态改变legend的selector设置。代码只写了legend部分的主要代码。getOption = (legend, xAxis, data)=> { let selectedLegent = {}; for(let i i原创 2021-02-03 12:13:56 · 3710 阅读 · 0 评论 -
AntD时间组件Datepicker报错,date.clone is not a function
问题AntD时间组件Datepicker只支持格式为moment类型的数据,不支持string类型的数据。在Form表单中,为了传值,将moment类型转换为了string类型,导致页面崩掉,报错信息:date.clone is not a function解决因为之前将moment类型转为了string类型,所以去掉结尾的format("YYYY-MM-DD"),保留其余代码。因为在Form组件中,无需onChange获取、改变时间,自动取中国时区时间。但是保存时为国际标准时间UTC'2021-0原创 2021-02-02 20:08:05 · 7647 阅读 · 1 评论 -
js引用图片
import img from '../../assets/imgs/img.svg';<img src={img} alt="图片说明" />系统偶现空白页bug,排查问题时遇到图片不加载可能导致bug,使用onError={() => {}}为空就好,不再报错<img src={record.headUrl} onError={() => {}} alt="用户头像" />后来左上角加了loading,又都去掉了好像没问题了?太难复现的bug:)..原创 2021-02-02 16:29:56 · 2952 阅读 · 0 评论 -
moment结合AntD周选择组件更改周默认设置
需求1、每周从周五开始;2、展示默认周,为当前日期的前一个周四所在周,例如今天是1月21日,前一个周四为1月14日,1月14日所在周的第一天为1月8日,这里之前有写过方法,AntD日期选择器组件DatePicker默认展示当前时间前一个周四;3、每年第一周改为当前年的1月4日所在的周。样式AntD的DatePicker:修改后的:代码在进入页面前的路由页面中增加以下代码,React其他代码省略了,说一下moment,moment源码在moment.js中能找到这样一段代码,代码中周默认原创 2021-01-21 19:41:51 · 3255 阅读 · 1 评论 -
多次点击提交按钮导致多次请求问题
问题填了一组数据,多次连续快速点击提交按钮,后端接口响应较慢,约400多ms,导致多次提交成功,前端多次展示接口返回msg“修改成功”。修改Button中添加disabled属性,根据接口返回code码控制按钮置灰与否。代码简单写了主要代码import React, { Component } from 'react'import { Button } from 'antd';import * as http from '../http';class Demo extends Compo原创 2021-01-15 11:37:03 · 1534 阅读 · 0 评论 -
AntD选择器Select模糊搜索,限制个数、字符长度、显示个数
需求AntD选择器Select模糊搜索,最多选5个,最长字符6个,多余省略号显示,选择超过1个第二个+n显示。代码import React from 'react';import ReactDOM from 'react-dom';import 'antd/dist/antd.css';import './index.css';import { Select } from 'antd';const { Option } = Select;const children = [];for原创 2020-12-21 11:26:58 · 6767 阅读 · 2 评论 -
AntD日期选择器组件DatePicker默认展示当前时间前一个周四
util中写个js方法// 取当前时间的前一个周四export const getThursday = () => { let now = new Date(); let nowTime = now.getTime(); let today = now.getDay(); // 今天是星期几 let oneDayLong = 24*60*60*1000; // 周五周六周日,展示本周四 let nowDay1 = new Date(nowTime - (today-4)*o原创 2020-12-18 17:54:06 · 1637 阅读 · 1 评论 -
js数据小数转换为百分比显示
(((text * 10000))/100.00).toFixed(2) + '%'toFixed(n),n位小数例0.9923 -> 99.23%原创 2020-11-29 14:22:05 · 1750 阅读 · 0 评论 -
AntD使用Form表单DatePicker时间组件时间差一天bug
问题在使用AntD使用Form表单DatePicker时间组件的时候,测试意外测出一个历史bug,很神奇,时间会差一天!直接使用Form表单并提交时间会显示时间是Object类型,选择2020-11-30,保存的时候会变成2020-11-29xxx(具体时间后缀),可能是时间组件为英文的原因?转换为中文后日期还是没有转过来,就差了一天……解决保存时用方法转一下日期if(typeof(item.date) === 'object') { item.date= moment(new Date(it原创 2020-11-29 13:23:09 · 2599 阅读 · 0 评论 -
图片加载不出来Network中Img报错404问题
问题:后端接口传值错误,测试数据图片地址错误,导致图片加载不出来、Network中Img报错404、导航栏偶现空白。解决方案:在img中添加onError函数onError可以为空,或是一张替代原图的错误图片。<img src={imgPath} onError={() => {}} alt="图片" /><img src={imgPath} onError={this.onImgError} alt="图片" />onImgError = (e) =>原创 2020-09-24 16:42:19 · 1802 阅读 · 0 评论 -
React结合Antd的Checkbox实现选择框全选、半选功能
默认全不选,鼠标移入卡片上,卡片外框变色点击卡片实现选择效果,选择框实现半选功能,同时记录数量点击选择框,变为全选,再点击,全不选/** * demo */import React, { Component } from 'react';import { Checkbox, } from 'antd';import './index.css';import { CheckCircleFilled } from '@ant-design/icons';class Demo ext原创 2020-09-24 12:01:03 · 4198 阅读 · 0 评论 -
js删除重复对象数组
方法一 deteleObject = obj => { let uniques = []; let stringify = {}; for (let i = 0; i < obj.length; i++) { let keys = Object.keys(obj[i]); keys.sort(function(a, b) { return Number(a) - Nu原创 2020-09-22 18:13:28 · 221 阅读 · 0 评论 -
js前端实现对象数组排序
按name排序let obj = [ {name: '学生', id: 1 } , { name: '教师', id: 2 } ,{ name: '偶像', id: 3 }];obj.sort((a, b) => a.name.localeCompare(b.name, 'zh'));倒序let obj = [ {name: '学生', id: 1 } , { name: '教师', id: 2 } ,{ name: '偶像', id: 3 }];obj.sort((a, b) =>原创 2020-09-21 17:46:03 · 1540 阅读 · 0 评论 -
数字转化为千分位
网上有好多方法,大多是正则表达式,这里记录一下简单的转换方法。1、es6方法num.toLocaleString("en");缺点:.00结尾的数字转换后小数位消失小于1000的数字不能转换?2、正则表达式...原创 2020-05-08 17:50:03 · 722 阅读 · 0 评论 -
数字去除千分位逗号
页面跳转,需要将带千分位的数字去除逗号,网上找的方法比较麻烦还理不清思路,同事帮忙写了一个,感谢同事~// utils.jsx 文件/** * 数字去除千分位逗号 * /export const delComma = num => { // 先定义一个空字符串作为结果 let str = ''; // num两种情况,为普通数字(1000以下不带逗号)或千分位数字,全部强转为...原创 2020-04-27 12:28:12 · 1776 阅读 · 0 评论 -
谷歌浏览器中input重复上传同一文件时上传失败bug
问题解剖首先说一下上传的文件,路径、名称完全相同,才是同一个文件;上传时连续点击上传;谷歌浏览器不会重复加载。直到这里都不算bug,只是防止重复上传时重复加载的问题,下面接着看:关闭弹窗后打开下一条数据的弹窗,上传同一文件,也不会重新加载,打印value发现value不清空。这样同一文件连续上传就会一直为空一直不能上传。产生bug。问题产生原因谷歌浏览器中input的onChang...原创 2020-04-17 15:00:53 · 726 阅读 · 0 评论 -
js根据接口返回url进行图片下载、浏览
调用下载图片函数后,点击下载图片,会弹出一个文件夹,根据后端返回photoName自动命名,也可修改,保存后下载到文件夹。 // 下载图片 downloadPhoto = () => { const { photoName, photoUrl } = this.state; let image = new Image(); // 解决跨域 Canvas 污染问题 imag...原创 2020-03-30 10:35:12 · 2594 阅读 · 0 评论 -
JS遍历字符串、数组、对象
for循环数组let array = [22, "fe4", 83, 39, 22];for(let i = 0; i < array.length; i++) { console.log(i, array[i]);}// 0 22// 1 fe4// 2 83// 3 39// 4 22for in数组let array = [22, "fe4", 83, 39...原创 2020-01-16 16:12:01 · 1459 阅读 · 0 评论 -
判断JS数据类型的四种方式
作用检测数据类型语法typeof(表达式)typeof 变量名返回值//数据类型 typeof返回值undefined //"undefined"null //"object"boolean //"boolean"string //"string"number //"number"object //"object"function //"function"symbol ...原创 2020-01-12 15:12:30 · 2085 阅读 · 0 评论 -
数组去重
ES6 SetES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。《ES6标准入门》let array = [1, 3, 3, 4, 5, 4, 6];console.log([...new Set(array)]);// (5) [1, 3, 4, 5, 6]...原创 2019-12-27 11:50:46 · 107 阅读 · 0 评论 -
前端重要知识点
react生命周期react小知识点Array.isArraypromisereduce源码牛客网前端面试宝典20-50k进阶原创 2019-12-25 17:42:06 · 100 阅读 · 0 评论 -
解决IE低版本兼容问题最快方法
<!--[if lt IE 9]> <script> location.href = "https://www.wkepu.com/updatebrowser/"; </script><![endif]-->打开链接即可原创 2019-12-19 15:46:27 · 318 阅读 · 0 评论 -
原型
什么是原型原型指的是显式原型prototype和隐式原型__proto__prototype:所有的函数都有prototype属性,prototype属性的值是原型对象原型对象上默认有两个属性,constructor和__proto__constructor:指向函数本身,因此foo().prototype.constructor === foo();__proto__:指向Objec...原创 2019-12-18 14:10:04 · 823 阅读 · 0 评论 -
ESLint——JS、JSX代码规范
ESLint简介ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具。JavaScript 是一个动态的弱类型语言,在开发中比较容易出错。ESLint 可以让程序员在编码的过程中发现问题而不是在执行的过程中。ESLint使用安装ESLintnpm i -g eslint使用ESLintes...原创 2019-11-08 10:32:30 · 1354 阅读 · 0 评论 -
JS正则表达式
概念正则表达式(英语:Regular Expression,在代码中常简写为regex、regexp或RE)使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。语法正则表达式有三种形式:字面量,构造函数和工厂符号/pattern/flagsnew RegExp(pattern [, flags])RegExp(pattern [, flags])参数pattern:...原创 2019-11-06 14:51:20 · 210 阅读 · 0 评论 -
JS深拷贝与浅拷贝
深拷贝与浅拷贝的概念如何区分深拷贝与浅拷贝,简单点来说,就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,拿人手短,如果B没变,那就是深拷贝,自食其力。再具体区分,我们就要了解JS基本数据类型、复杂数据类型、栈和堆的概念。JS基本数据类型Undefined、Null、Boolean、Number 和String,还有ES6定义的Symbol以及将来ES1...原创 2019-11-05 10:50:44 · 98 阅读 · 0 评论 -
JS常见事件
JS常见事件1.点击事件onclick:单击事件ondblclick:双击事件2.焦点事件obclur:失去焦点onfocus:获取焦点3.加载事件onload:一张页面或一幅图像完成加载4.鼠标事件onmousedown:鼠标按下onmouseup:鼠标松开onmousemove:鼠标移动onmouseover:鼠标移到某元素上onmouseout:鼠标...原创 2019-10-30 16:07:08 · 309 阅读 · 0 评论 -
js判断两个对象是否相等
有两个对象obj1和obj2let obj1 = { a = 1}let obj2 = { a = 1}比较obj1和obj2:obj1 == obj2 //falseobj1 === obj2 //falseobj1和obj2不是同一个指针对象,因此不相等。下面是比较他们的正确方法:方法一比较两个对象的名和键值,都相同,那么两个对象相等。isObjectV...原创 2019-10-25 15:46:12 · 241 阅读 · 0 评论 -
js时间戳与日期
js获取时间戳当前时间戳(精确到秒)let today = Date.parse(new Date());前一天时间戳(精确到秒)let yesterday = Date.parse(new Date())-24*60*60*1000; //当前时间戳减去一天毫秒数其余时间可以+/-24*60*60*1000*n来得到。当前时间戳精确到毫秒(new Date()).valueOf(...原创 2019-10-23 20:49:13 · 145 阅读 · 0 评论