JS
文章平均质量分 67
锦天
这个作者很懒,什么都没留下…
展开
-
javascript Array groupBy javascript中如何根据列表元素中的某个字段对列表进行分组操作?
根据某个列表元素中的某个条件(可能是多个字段),将列表中的元素分成几组。而在 javascript 中,如何实现以下需求?完整描述:SQL中有。原创 2024-06-09 21:15:24 · 435 阅读 · 3 评论 -
基于 JavaScript 中的 Date 类型实现指定日期和天数的加减运算
27岁生日之前,还有246天。可以做很多事。加油。原创 2023-06-20 00:00:16 · 4074 阅读 · 7 评论 -
如何使用 JavaScript 原生 API 对中文进行分词? Intl.Segmenter 的简单使用
今天看到在 JavaScript 直接有一个原生API可以完成“分词”的功能,遂记录一下用法。记得之前,使用 Python 做词云分析的时候,用到了。这个python库做中文分词。原创 2023-04-30 20:41:44 · 1837 阅读 · 0 评论 -
JavaScript 如何优雅地获取多层级response中的某个深层次字段 ?. 可选链条(Optional chaining)
The optional chaining (?.) operator accesses an object's property or calls a function. If the object accessed or function called using this operator is undefined or null, the expression short circuits and evaluates to undefined instead of throwing an error原创 2023-03-07 07:51:08 · 659 阅读 · 0 评论 -
如何用 JavaScript canvas 实现心形特效
一位朋友问:“你是程序员,那你会不会写最近那个很火的心形特效?”。我:“我一个业务程序员,日常不搞这些。但是你需要的话我可以上网查,利用互联网资源可以实现该特效,而且我相信会有多种方法可以实现。”。接下来开始搜索。等上传Python 版本Python提供很多库,包括本次需求所需的 图表绘制类的代码库。所以python一定也可以满足需求,我就不着了。JDK 提供 Swing 包专门用于绘制图形界面,可是几乎没多少比例的人/公司会用这套解决方案去完成软件的界面。一句话,Java可以实现,但是API应用原创 2022-12-15 07:03:17 · 648 阅读 · 0 评论 -
浏览器 禁用 javascript 脚本 解决 网页文本内容无法复制 的问题
有些网站在源码中利用 javascript ,对 copy 事件添加了自定义的事件监听器,阻止了默认事件的发生。如果说你想要复制的内容就一两句,没有必要写javascript改一些东西。禁用其花里胡哨的动作(使他们的javascript无法执行)即可。当然,也会有其他的原因,需要禁用 javascript。比如说:知乎,百度文库,还有一些小说网站,等等。用人话说:有些网站他不让你复制网页内容。客户端自由在你手里,你是用户!自己百度,设置方式应该差不多。服务端代码由人家决定。右上角齿轮状的设置按钮。原创 2022-10-31 22:17:14 · 1857 阅读 · 0 评论 -
javascript 原生类 DOMParser 把 字符串格式的HTML文档源码 转换成 document DOM对象
# Intro有一天我在写爬虫。其实也说不上是爬虫,就是打开浏览器上网,觉得页面有些数据挺有意思,就打开开发者工具,在 Network/Console 中通过 javascript 原生的 fetch 方法 批量、自动地请求一些web资源。其中有一个关节,是以下的需求:有一些字符串格式的HTML源码,需要将其转换为 document 对象(DOM对象),这样我就可以在 console 直接使用选择器(selector)对该HTML文档的文本内容进行过滤清洗处理。原创 2022-10-31 22:02:38 · 4608 阅读 · 1 评论 -
javascript实现 文本过滤 找出一段文本中的所有数字/数值 并在去重后排序
一个小需求,我有一个文本文件/一段文本,其中混杂有多组不尽相同的正整数(暂时不考虑负数/小数/科学计数法表示的数值)。我需要:在一段文本中随意插入一些数值,作为demoStringValue。第一行定义字符串变量的代码量会比较多。所以我一般把它单独拆开放一行。如果代码有修改,这一行不用动。先用反引号包围我们的字符串,定义一个字符串变量a。(使用反引号不用考虑原本字符串内容中的单引号/双引号转义)。 用于:在字符串对象中,按照给定的正则表达式模式,依次查找匹配成功的子字符串。注意正则表达式的flag原创 2022-06-13 21:42:06 · 1016 阅读 · 1 评论 -
javascript 生成 UUID GUID 浏览器环境 NodeJS环境 纯JavaScript函数
文章目录Intro浏览器控制台NodeJS环境纯JavaScript函数实现Intro后端Java可以调用java.util.UUID.randomUUID() 生成一个随机的UUID。可是前端JavaScript有没有自带的API用于生成UUID/GUID呢?以下分三种情况。仅用于浏览器控制台ConsoleNodeJS开发环境(可以自由使用各类开源的package)任意JS环境,自己封装一个简单的JavaScript函数。浏览器控制台var currentUUID = window.原创 2022-05-31 19:19:08 · 1781 阅读 · 0 评论 -
浏览器调试 Network Console 保留历史日志和网络请求 Preserve log
场景今天在公司调试一个前端应用,里面用到了window.location.xxx = "xxx"这样的方式去改变URL。效果类似于页面跳转/刷新。问题: 页面跳转前的控制台日志、网络请求都会“消失”。但要定位的问题必须依赖于页面跳转前的一些信息。所以,如何保留页面跳转前的控制台日志、网络请求?启用Preserve log开关可以做到。保留历史网络请求保留历史的控制台日志其他浏览器环境下的Debug(我目前还不会用,2021-3-10 22:06:52)...原创 2021-03-10 22:07:36 · 5724 阅读 · 0 评论 -
JavaScript String.prototype.replaceAll 兼容性导致的问题
Intro本地开发、测试好的项目,发布到线上正常运行。换了一个浏览器去访问却报错:原因:低版本浏览器不支持字符串的replaceAll方法见MDN String.prototype.replaceAll验证查看运行出问题的浏览器的版本信息:chrome:firefox:当然也可以通过界面去查看浏览器版本(firefox, chrome, …等不同厂商的浏览器,查看方式也不同)解决举个例子,对于文本abc 123 ab 12 cd,搜索12基于replaceAll可以得原创 2021-01-20 22:42:59 · 9281 阅读 · 2 评论 -
react-loadable 组件动态加载 打包文件分割
Intro使用webpack对资源进行打包后,开发后的生成物只有:index.htmlapp.js (可能为其他文件名)而app.js中包含了我们写的所有组件、逻辑等(甚至包含样式配置以及部分很小的图片资源!)。这就导致这样的应用首屏加载速度慢/白屏时间长。除了CDN加速、html的div#root填充默认内容外,还有一个角度就是:将打包了几乎所有资源的app.js分拆,按需请求加载。这样页面的首次响应会快一点。操作安装依赖npm install react-loadable简单原创 2021-01-12 23:53:29 · 814 阅读 · 0 评论 -
webpack打包 CSS分离 mini-css-extract-plugin
Intro优化目的:应用首屏加载时间太久,按不同策略/角度分离打包文件。步骤安装依赖npm install -D mini-css-extract-plugin配置webpack配置文件const MiniCssExtractPlugin = require("mini-css-extract-plugin");module.exports = { // ... plugins: [ new HtmlWebpackPlugin({ template: "pu原创 2021-01-12 23:11:29 · 2105 阅读 · 1 评论 -
NodeJS crypto add a fallback ‘resolve.fallback: { “crypto“: require.resolve(“crypto-browserify“) }‘
Intro使用node开发过程中引入了crypto,环境条件:Windows 10node v12.16.3webpack 5.6.0试图启动,报错如下:REAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.This is no longer the case. Verify if you need this module and configure a poly原创 2021-01-10 16:32:48 · 11061 阅读 · 14 评论 -
前端JavaScript 后端Java 数据库MySQL 三个环节中文本加密算法(MD5 SHA)的应用方式
文章目录前端环境代码后端环境代码MySQL环境加密函数mysql中的其他加密函数NOTE可选的算法名称 && 最终选中的算法方案Java的`str.getBytes()`测试结果对比参数校验前端环境Windows 10NodeJS 12.16.3库:crypto该库的功能:crypto 模块提供了加密功能,包括对 OpenSSL 的哈希、HMAC、加密、解密、签名、以及验证功能的一整套封装。代码const crypto = require("crypto");let in原创 2021-01-10 14:21:42 · 726 阅读 · 0 评论 -
AntDesign Table Warning: validateDOMNesting(...): Text nodes cannot appear as a child of <tfoot>.
使用 AntDesign Table 的时候发生了报错,如下:Warning: validateDOMNesting(...): Text nodes cannot appear as a child of <tfoot>.Warning: validateDOMNesting(...): <span> nodes cannot appear as a child of <tfoot>.错误原因:我写的渲染方法导致最终的DOM嵌套有问题。错误点: Table组件原创 2021-01-08 20:37:25 · 3042 阅读 · 0 评论 -
AntDesign Carousel effect 配置引起的 Warning: `NaN` is an invalid value for the `top` css style property.
文章目录依赖库版本报错内容报错位置定位解决方法及深层原因依赖库版本"antd": "^4.9.4","react": "^17.0.1","react-dom": "^17.0.1",报错内容Warning: `NaN` is an invalid value for the `top` css style property.其中 VersionInfo 是我自己封装的组件。报错位置定位将该组件VersionInfo渲染的标签快一点一点注释,运行测试,最后确定引发报错的一行://原创 2021-01-05 21:45:59 · 2995 阅读 · 0 评论 -
code length overflow 使用qrcode.react做二维码转换的字符数上限/规则
使用qrcode.react@^1.0.1,转换文本,当转换500个中文字符时报错如下:经测试:转换500个纯中文字符,报错:Uncaught Error: code length overflow. (12020>10208)转换1945个纯英文字符,报错:Uncaught Error: code length overflow. (15572>10208)经计算,意义如下:500个汉字,每个汉字3字节(3 byte == 24 bit),总位数为12020。1945个英文字符原创 2021-01-03 23:25:48 · 3054 阅读 · 0 评论 -
Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement‘: Tainted canvases may not be exported.
Intro我在使用qrcode.react测试使用文本生成二维码的功能。当执行以下API时,报错:let domTarget = event.target;let text = domTarget.toDataURL("image/png"); // 本行报错报错内容如下:Uncaught DOMException: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’:Tainted canvases may not be export原创 2021-01-01 13:45:31 · 2347 阅读 · 0 评论 -
react-router BrowserRouter 两行配置解决一刷新就404
配置项devServer.historyApiFallback = trueoutput.publicPath = "/"配置流程react-router 是 React 项目的路由解决方案。其中有三种路由器 Router,分别为 MemoryRouter, HashRouter 以及本片测试的 BrowserRouter 。以下为使用流程中的问题及解决。【暂时写简化版,有空会在过程中截图补上】使用 BrowserRouter 后,点击链接可以正常跳转,但是只要一刷新(当前请求URL非根路原创 2020-12-29 22:14:48 · 5236 阅读 · 0 评论 -
webpack编译速度过慢的一次优化 从 127s 到 10s
Intro自己搭建了react开发环境,一步一步新增配置,测试代码运行。在做完了“集成AntDesign组件库”这一步之后,编译速度变得很慢92s。于是查找了好多优化webpack编译速度的方案。优化点很多个点(的配置)都会有影响。以下列表中,禁用sourceMap这一条最有效(sourceMap生成花费了编译时间的80%以上)。但没啥用,开发环境我还是得留着sourceMap方便调试其他几条在我目前的项目(代码量还很少)中,优化效果不大。最开始的编译时间:不启用sourceMap原创 2020-12-27 13:06:13 · 7129 阅读 · 7 评论 -
JavaScript console.log %c %o %s %d %f
Intro字符串拼接/占位符替换几乎所有语言都有输出函数,当需要快速拼接多个参数 然后输出的时候,有各自的printf函数和%xxx占位符作为解决方案:Cprintf("age is %d\n", 23); // age is 23JavaSystem.out.printf("hello %s\n", "world"); // hello worldString.format("hello %s\n", "world");Pythonprint("hello %s %s"%("wor原创 2020-12-26 18:57:57 · 6136 阅读 · 0 评论 -
webpack 生产环境下禁用日志 console.log
Intro前端开发时使用console.xxx等api打印了很多信息,这些信息在开发时可以帮助调试。但是在生产环境下应该禁用,有以下两个目的:减少性能影响:控制台打印大量数据会影响浏览器性能,见console.log和垃圾回收,未测试,但影响一定会有。避免过多信息泄露:主要针对非普通用户而言配置方法下载依赖 npm i -D terser-webpack-plugin@^5.0.3生产环境条件下,新增配置项:const TerserPlugin = require("terser-w原创 2020-12-26 10:00:54 · 3969 阅读 · 0 评论 -
HTML 鼠标点击复制元素内容
Intro效果展示方法封装copyInnerTextOfCell = (event) => { let innerText = event.target.innerText; var tmpInput = document.createElement("input"); document.body.appendChild(tmpInput); tmpInput.value = innerText; tmpInput.select(); document.exec原创 2020-12-24 23:32:14 · 4648 阅读 · 0 评论 -
HTTP 客户端向服务端传递参数的4种方式 SpringMVC的对应接收方式
Intro本文暂不讨论不同的HTTP请求方法,只对前端向后端传递参数的方式进行测试总结。前端向后端传递参数的4条路径:路由变量 @PathVariable请求参数 @RequestParam请求体 @RequestBody请求头(如Cookie就是一个很著名请求头,用于传递sessionid信息)三个注解表示使用SpringMVC对应的接收方式。Java demo后端web层接口:该web接口会将从不同途径接收到的参数打印出来(作为响应数据返回给前端)。@RestControl原创 2020-12-24 23:05:34 · 2024 阅读 · 0 评论 -
使用 mockjs 随机生成大批量常用字段的值(人名,年龄,地址,邮箱,日期……)
Intro功能:生成随机数据,拦截 Ajax 请求。举个例子:新建了一张用户表,需要测试程序读写命令。但是得提前初始化一些数据啊,此时就可以利用mockjs来随机生成数据源(插入操作略)。受众后面的代码是写给前端开发的。如果有开发需要调用,可以先了解NodeJS的基本环境和使用。Code安装依赖:npm install mockjs运行以下代码:var Mock = require("mockjs");var Random = Mock.Random;for (var原创 2020-12-24 21:34:24 · 11171 阅读 · 2 评论 -
JavaScript 浏览器端信息获取
console.log("\n 系统 navigator.platform\t", navigator.platform, "\n 语言 navigator.language\t", navigator.language, "\n 内存 navigator.deviceMemory\t", navigator.deviceMemory, "\n 并发数 navigator.hardwareConcurrency\t", navigator.hardwareConcurrency, "\n 浏览器原创 2020-12-07 21:42:15 · 906 阅读 · 0 评论 -
JavaScript String RegExp 正则表达式 相关方法
文章目录概念熟悉正则表达式对象的创建正则表达式的标志位 flags正则表达式对象的更多属性StringString.prototype.replace(searchValue, replaceValue): stringString.prototype.match(regexp): string[]String.prototype.search(regexp): NumberRegExpRegExp.prototype.test(string): booleanRegExp.prototype.compil原创 2020-09-19 18:01:49 · 782 阅读 · 0 评论 -
使用二倍均值法模拟抢红包
文章目录场景二倍均值法实现Java版JavaScript版场景微信群发一个红包,金额10元,共10个人抢。有多种方案:按先来后到,对每个人:在[0, 当前剩余金额]区间内生成一个随机数,即为本人抢到的红包金额。缺点:先抢者极占优势,最先抢的人,金额池最大,取随机数的区间范围也最大,抢到大额红包的可能性就大。对应的,越到后面抢红包的人,所得金额数越小。这样的不公平性可能会影响发红包功能的用户体验。优化规则,削弱达者为先的事实。10元,10个人抢,对第一个人:当前剩余金额:10原创 2020-09-19 10:19:09 · 882 阅读 · 0 评论 -
MongoDB 读写命令 与JavaScript的关系
Intro使用客户端命令行工具mongodb测试MongoDB的读写API,发现:这套API的大部分语法遵循(满足)JavaScript的语法规则。实例如下,以下内容包括:- 测试变量定义,数值运算,- 使用Object.prototype.toString.call()原型方法查看变量的类型- 测试JS方法定义,及方法默认的arguments参数。- 输出函数print() (这一点倒是和JS不同)C:\>mongoMongoDB shell version v4.4.0....原创 2020-09-05 22:54:58 · 1243 阅读 · 0 评论 -
使用正则表达式批量替换掉 空格及换行符
Intro场景: 网页解析需求如下:数据源:含有多个空格、换行符的多段文本文本处理过程:识别出这些空格、换行符(替换为统一的单个换行符,或HTML的<br />标签)数据持久化 --> 数据库中间的识别可以利用正则表达式来做:[\ \r\n]+以下为JavaScript范例:var htmlCode = `臣本布衣, 躬耕于南阳先帝不以臣卑鄙, 咨臣以当世之事。后来 ……今当远离,临表涕零,不知所言。`;var result = htmlCod原创 2020-09-04 21:05:06 · 5617 阅读 · 2 评论 -
浏览器 控制台 JavaScript 保存数据到硬盘文件
文章目录写数据到文件 - 方法封装原理解析Demo写数据到文件 - 方法封装/** * 保存数据到指定的文件 * 利用 Blob 对象把要下载的数据转换为二进制 * 然后利用<a>的href属性和download属性,click事件,实现数据下载。 * @param {string} filename 要保存的文件名 * @param {string} str 要保存的文本内容 */function saveStringToFile(filename, str) {原创 2020-09-01 08:10:12 · 2560 阅读 · 0 评论 -
如何使用浏览器对网络请求编辑重发(Edit and Resent) 以及: fetch API 中 ReadablleStream 的打印方法
文章目录需求火狐浏览器-编辑重发(Edit and Resent)fetch API需求上网用F12分析一个请求,调用的事服务端的一个数据接口。想修改请求参数(请求头、请求体,请求URL和方法),来获取我想要的数据。两种方式。火狐浏览器 F12自带的编辑重发功能。任意支持 fetch API的浏览器,会使用F12 console写JS代码即可。火狐浏览器-编辑重发(Edit and Resent)可以编辑地内容:请求方法,请求URL,请求头(包含cookie等信息),请求体f原创 2020-08-28 23:42:05 · 10624 阅读 · 0 评论 -
Error: Objects are not valid as a React child (found: object with keys {list}).
BugError: Objects are not valid as a React child (found: object with keys {list}). If you meant to render a collection of children, use an array instead.Object不能直接作为React的内容(指{}中的变量)。如果想渲染一个集合的话,可以使用数组(但是别用Object类型的变量)。如图:原因写React的render()时,想直.原创 2020-08-18 22:41:47 · 15664 阅读 · 0 评论 -
React组件 生命周期相关方法 调用顺序 参数列表 测试demo
结论1. 挂载顺序: constructor -> 将会挂载 -> render -> 挂载完成。2. 更新顺序:(组件将会收到props -> ) 组件是否可被更新 -> 组件将会被更新 -> render -> 组件更新完成。3. 卸载顺序: 组件将会被卸载测试结果如图:如果有componentWillReceiveProps(),会在组件每次更新前,第一个执行。测试环境搭建create-react-app test-react-life-cyc原创 2020-08-16 11:19:17 · 365 阅读 · 0 评论 -
React 手动卸载组件 API 触发 componentWillUnmount()
已知componentWillUnmount()会在组件将被卸载前,被执行。那么如何手动卸载某个组件,以(触发该方法的执行来)验证该规则?调用以下API即可:ReactDOM.unmountComponentAtNode(container)。// 将组件element渲染到container中ReactDOM.render(element, container);// 卸载container中的组件,定时 5s 后执行setTimeout(function() { ReactDOM.un原创 2020-08-16 10:14:18 · 5981 阅读 · 4 评论 -
JS中数组对象的遍历方法 forEach() map() 区别及使用
文章目录方法声明demo官网链接方法声明map() 方法会创建一个新数组,其结果是该数组中的每个元素是调用一次提供的函数后的返回值。var new_array = arr.map(callback[, thisArg])其中的callback:function callback(currentValue[, index[, array]]) { // Return element for new_array }forEach() 方法对数组的每个元素执行一次给定的函数。arr.forEa原创 2020-08-15 14:28:51 · 5230 阅读 · 0 评论 -
JavaScript对象、DOM对象、jQuery对象 三者的关系和转换
基本概念JavaScript对象最基本也最常用,字符串"hello"或数值123都是JS对象。DOM对象DOM(Document Object Model)文档对象模型,他是HTML和XML文档的编程接口。JS操作HTML文档,就是靠中间的介质:文档对象模型。DOM对象就属于JavaScript对象的,只不过这些类型不常见到,如"HtmlCollection"这种类型就代表多个DOM对象的容器类型。测试见:https://blog.csdn.net/wuyujin1997/articl原创 2020-05-31 00:15:07 · 441 阅读 · 0 评论 -
使用JavaScript提取网页中的表格 行列数据 批量提取
文章目录场景Code场景有时候上网查阅资料,需要网页中表格内、指定行列的数据。如果表格小(操作的 数据量小),可以手动复制粘贴。但如果要操作的表格很大,那么可以使用程序自动执行遍历表格的操作,并提取数据。看懂以下教程需要会:JavaScript简单语法;浏览器DevTools(即F12快捷键呼出的界面);Code选中表格元素F12调出DevTools,切换到控制台ConsoleCtrl+Shift+C,鼠标点击网页中的表格。之后在控制台输入$0,可以打印出最近一次在页面中选中原创 2020-05-31 00:03:30 · 6285 阅读 · 0 评论 -
JavaScript 字符串 自定义函数实现左补0 其他编程语言中 字符串左补0的默认实现
场景在不同语言中,都有一个字符串格式化输出/替换相关的方法:C/C++printf("%d %s", 123, &str);JavaString.format("%d %s", 123, "你好");System.out.printf("%d, %s", 123, "你好");Pythonprintf("%d %s" % (123, "你好"));其中,如果有一个数值101,想补充长度为8,左补0,只需要把格式控制符%d修改为%08d即可。%d decimal,以数值格式输原创 2020-05-23 21:56:58 · 1853 阅读 · 0 评论