JavaScript
JavaScript
高先生的猫
求知若渴,虚心若愚。
展开
-
js金额数字格式化
通过这种方式,可以使用 JavaScript 快速简单地实现金额格式化效果。需要注意的是,toLocaleString() 方法在不同的操作系统中可能存在差异,需要进行兼容性测试和兼容性处理。要格式化金额,可以使用 JavaScript 的 toLocaleString() 方法。该方法可以将数字转换为本地化的字符串表示形式,并可以指定货币符号、小数点和千位分隔符等格式。在这个示例中,通过 toFixed 使金额保留两位小数,使用正则替换的方式增加千位分隔符,再使用模板字符串进行拼接。原创 2023-08-18 09:18:54 · 852 阅读 · 0 评论 -
ES10 中 Object.fromEntries() 怎么用?
我们知道Object.entries()是将对象转成一个自身可枚举属性的键值对数组。同样,我们也可以把键值对数组转成了对象。原创 2022-12-27 17:36:07 · 833 阅读 · 0 评论 -
js生成1到100的数组方法
JavaScript有多种方法可以用来生成1到100的数组原创 2022-12-27 17:32:04 · 6068 阅读 · 0 评论 -
js数据流文件下载
js数据流文件下载原创 2022-11-10 13:56:17 · 397 阅读 · 0 评论 -
js判断文件上传的类型
js判断文件上传的类型原创 2022-11-10 13:54:09 · 1217 阅读 · 0 评论 -
js根据当前时间获取当月的1号和最后一号
根据当前时间获取当月的1号和最后一号原创 2022-11-10 13:51:07 · 336 阅读 · 0 评论 -
js打印去除浏览器的默认的页眉页脚
js打印去除浏览器的默认的页眉页脚原创 2022-09-28 10:06:45 · 489 阅读 · 0 评论 -
js删除字符串最后一个字符方法总汇
js删除字符串最后一个字符方法总汇原创 2022-08-16 17:41:49 · 30598 阅读 · 3 评论 -
JS 中的类数组对象如何转换为数组?
JS 中的类数组对象如何转换为数组?原创 2022-08-16 17:42:33 · 672 阅读 · 0 评论 -
如何写好代码注释?
注释的本质对于注释来说,在原则中有不同的规定或者解释。有的原则是需要使用 JavaDoc 来描写每个方法,而有的原则是要求每一个属性标注命名。我愿意相信每一份看起来不那么妥当的注释都是出于一些善意的目的,这就是注释的本质:对未能自行解释的代码做出解释。在进行代码工作的时候我们多多少少会有一些陈旧的、与业务无关的逻辑在代码中运行。有时候并不是一个变量名或者一个方法名就能阐述清楚产品同学所期望的业务内容。我们希望将代码外的逻辑也加入到其中,但是一篇长篇大论的注释似乎也不那么妥当,所以对于注释我一般会原创 2022-05-07 10:03:14 · 737 阅读 · 0 评论 -
Js中判断运算符和||的区别
?? 运算符是 ES2020 引入,也被称为 null 判断运算符( Nullish coalescing operator) 它的行为类似 || ,但是更严 || 运算符是左边是空字符串或 false 或 0 等 falsy值 ,都会返回后侧的值。而 ?? 必须运算符左侧的值为 null 或 undefined 时,才会返回右侧的值。因此0||1的结果为1,0??1的结果为0。相同点用法相同,都是前后是值,中间用符号连接。根据前面的值来判断最终返回前面的值还是后面的值。值1 ?? 值2原创 2022-05-06 15:10:14 · 456 阅读 · 0 评论 -
vite 配置环境变量
在做项目环境变量配置前,可以先到官网回忆一下环境变量的基本使用,环境变量和模式 | Vite 官方中文文档一、环境模式首先环境变量是可以分模式的,常用模式如下:.env # 所有情况下都会加载.env.local # 所有情况下都会加载,但会被 git 忽略.env.[mode] # 只在指定模式下加载.env.[mode].local # 只在指定模式下加载,但会被 git 忽略默认dev环境下使用.env....原创 2022-04-21 14:01:07 · 4332 阅读 · 2 评论 -
彻底搞懂js这 5 种 for 循环
for 循环在平时开发中使用频率最高的,前后端数据交互时,常见的数据类型就是数组和对象,处理对象和数组时经常使用到 for 遍历,因此下班前花费几分钟彻底搞懂这 5 种 for 循环。它们分别为:for for ... in for ... of for await .. of forEach map一、各个 for 介绍1、forfor 循环是出现最早,也是应用最普遍的一个遍历,能够满足绝大多数的遍历。可以遍历 数组、对象、字符串,示例:// 遍历数组var arr = [原创 2022-04-14 16:54:09 · 1225 阅读 · 1 评论 -
前端 一键换肤 的几种方案
现在越来越多的网站都提供了拥有换肤(切换主题)功能,如 ElementUI,既是为了迎合用户需求,或是为了凸显自己特点,因此提供了个性化定制的功能.其实之前就想了解和实现 “一键换肤” 功能,但是由于种种原因一直拖到了现在.css样式覆盖实现核心通过切换 css 选择器的方式实现主题样式的切换.在组件中保留不变的样式,将需要变化的样式进行抽离提供多种样式,给不同的主题定义一个对应的 CSS 选择器根据不同主题设置不同的样式实现下面通过 vuex 存储和控制全局的主题色原创 2022-04-11 09:22:36 · 700 阅读 · 0 评论 -
pm2的配置文件
PM2 是 node 进程管理工具,可以利用它来简化很多 node 应用管理的繁琐任务,如性能监控、自动重启、负载均衡等,而且使用非常简单。这篇文章主要介绍pm2配置文件的相关写法,文件支持的配置格式为Javascript、JSON、YAML,以下主要讲述Javascript,JSON这2种格式。1.Javascript格式输入以下命令可以生产配置文件模板:pm2 init然后执行:pm2 ecosystem生成是ecosystem.config.js如下:module..原创 2022-04-07 09:10:52 · 5224 阅读 · 0 评论 -
js从数组中过滤出虚假值
0,undefined,null,false,"",''可以很容易地通过以下方法省略const array = [3, 0, 6, 7, '', false];array.filter(Boolean);// 输出(3) [3, 6, 7]原创 2022-04-01 15:08:06 · 503 阅读 · 0 评论 -
用reduce找出数组 总和、最小值和最大值
const array = [5,4,7,8,9,2];// 总和array.reduce((a,b) => a + b);// 输出: 35// 最大值array.reduce((a,b) => a > b ? a : b);// 输出: 9// 最小值array.reduce((a,b) => a < b ? a : b);// 输出: 2原创 2022-04-01 15:06:01 · 986 阅读 · 0 评论 -
VUE中的filters过滤器2种用法
Vue允许我们自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示。<!-- 在双花括号中 --> <div>{{ message | capitalize }}</div> <!-- 在 `v-bind` 中 --> <div v-bind:id="rawId | forma原创 2022-03-30 09:05:56 · 2820 阅读 · 0 评论 -
什么是 LRU 算法?
缓存是我们写代码过程中常用的一种手段,是一种空间换时间的做法。就拿我们经常使用的 HTTP 协议,其中也存在强缓存和协商缓存两种缓存方式。当我们打开一个网站的时候,浏览器会查询该请求的响应头,通过判断响应头中是否有Cache-Control、Last-Modified、ETag等字段,来确定是否直接使用之前下载的资源缓存,而不是重新从服务器进行下载。下面就是当我们访问百度时,某些资源命中了协商缓存,服务端返回304状态码,还有一部分资源命中了强缓存,直接读取了本地缓存。但是,缓存并不是...原创 2022-03-15 19:50:08 · 1049 阅读 · 0 评论 -
JavaScript中的map()和forEach()有什么区别?
基本上,在JavaScript中遍历对象取决于对象是否可迭代。默认情况下,数组是可迭代的。map 和 forEach 包含在Array.prototype 中,因此我们无需考虑可迭代性。如果你想进一步学习,我推荐你看看什么是JavaScript中的可迭代对象!什么是map()和forEach()?map 和 forEach 是数组中的帮助器方法,可以轻松地在数组上循环。我们曾经像下面这样循环遍历一个数组,没有任何辅助函数。var array = ['1', '2', '3'];for (va原创 2022-01-24 11:21:23 · 183 阅读 · 0 评论 -
array.flatMap 使用指南
Array.map()是我们日常开发过程中经常使用到的一个映射函数,它需要一个映射函数作为入参并随之根据入参生成一个新的函数。在es2019之后,出现了一个新的方法——Array.flatMap。它完全可以替代Array.map,因为它不仅能完成映射,还可以删除或者在生成新数组时添加你需要的元素。但是使用时要注意兼容性。灵活的映射器假如我们有一个数组const number = [0, 3, 6] ,我们如何将每一个元素都翻倍,并返回一个新的数组呢?方法一:使用Array.map(.原创 2022-01-24 11:16:06 · 1521 阅读 · 0 评论 -
Js新方法array.groupby() 和array.groupbytomap()
新的数组组提案(目前处于第三阶段),它引入了新方法array.groupby()和array.groupbytomap()。它们的polyfills文件可以在core-js库中找到。接着,我们来看下能从中学到些什么。1. array.groupBy()假设我们有一个产品列表,其中每个产品都是一个具有2个属性的对象:name和category。const products = [ { name: 'apples', category: 'fruits' }, ...原创 2022-01-13 13:50:34 · 2465 阅读 · 0 评论 -
js数学运算 取整、取余、取模
Math 对象的方法介绍abs(x) 返回数的绝对值 1 2 3acos(x) 返回数的反余弦值 1 2 3asin(x) 返回数的反正弦值 1 2 3atan(x) 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值 1 2 3atan2(y,x) 返回从 x 轴到点 (x,y) 的角度(介于 -PI/2 与 PI/2 弧度之间) 1 2 3ceil(x) 对一个数进行上舍入。 1 2 3cos(x) 返回数的余弦 1 2 3exp(x) 返回 e 的指数。 1原创 2022-01-13 13:46:23 · 16213 阅读 · 0 评论 -
原生js 判断一个元素是否处于聚焦状态
const elementIsInFocus = (el) => (el === document.activeElement);elementIsInFocus(anyElement)// Result: 如果处于焦点状态会返回 True 否则返回 False原创 2021-12-24 15:21:03 · 2202 阅读 · 0 评论 -
js 识别移动端还是pc端
function getMobileOrPC() { let browser = { versions: (function () { var u = navigator.userAgent, app = navigator.appVersion return { //移动终端浏览器版本信息 trident: u.indexOf('Trident') > -1,.原创 2021-11-15 15:06:11 · 519 阅读 · 0 评论 -
js实现千位分隔符
在项目开发中需要js实现千位分隔符来分割一个整数,比如我想将数字 1234567 显示为“1,234,567”。我该怎么实现呢?方法一、利用循环实现思路是将数字转换为字符数组,再循环整个数组, 每三位添加一个分隔逗号,最后再合并成字符串。function numberWithCommas(x) { x = x.toString(); var pattern = /(-?\d+)(\d{3})/; while (pattern.test(x)) x = x原创 2021-11-11 17:45:05 · 600 阅读 · 0 评论 -
CSS 实现新拟态(Neumorphism) UI 风格
新拟态是一种图形样式,其原理是为界面的UI元素赋予真实感。原生名词有几个叫法,Neumorphism / soft ui,翻译过来是新拟态或者是软ui。国内的翻译叫,新拟物风格。Neumorphism,是New +Skeuomorphism的组合词。按照我个人的通俗理解,就是将界面的一部分凸起来,另一部分凹下去,形成的一种错落有致的拟物风格。代表作是乌克兰设计师 Alexander Plyuto 在各平台发布的新作品「Skeuomorph Mobile Banking」新拟态 UI 风格与扁平、原创 2021-09-16 11:38:45 · 632 阅读 · 0 评论 -
jquery中attr和prop的区别
- 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。- 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。上面的描述也许有点模糊,举几个例子就知道了。<a href="xxxxx" target="_self" class="btn">高先生的猫</a>这个例子里元素的DOM属性有“href、target和class",这些属性就是元素本身就带有的属性,也是W3C标准里就包含有这几个属性,或者说在IDE里能够智能提示出的属性,这.原创 2021-09-01 10:52:43 · 180 阅读 · 0 评论 -
阿里解决「前端白屏」的方案
背景不知从什么时候开始,前端白屏问题成为一个非常普遍的话题,'白屏' 甚至成为了前端bug 的代名词:_喂,你的页面白了。_而且,'白' 这一现象似乎对于用户体感上来说更加强,回忆起 windows 系统的崩溃 '蓝屏'。可以说是非常相似了,甚至能明白了白屏这个词汇是如何统一出来的。那么,体感如此强烈的现象势必会给用户带来一些不好的影响,如何能尽早监听,快速消除影响就显得很重要了。为什么单独监控白屏不光光是白屏,白屏只是一种现象,我们要做的是精细化的异常监控。异常监控各个公司肯定都.原创 2021-08-31 10:07:01 · 2086 阅读 · 0 评论 -
Vue.js 中使用defineAsyncComponent 延迟加载组件
使用vue3 的defineAsyncComponent特性可以让我们延迟加载组件。这意味着它们仅在需要时从服务器加载。这是改善初始页面加载的好方法,因为我们的应用程序将以较小的块加载,而不必在页面加载时加载每个组件。在本教程中,我们将学习defineAsyncComponent的全部内容,并看一个例子,该例子将一个弹出窗口的加载推迟到我们的应用程序需要的时候。好了,让我们开始吧。什么是defineAsyncComponent// SOURCE: https://v3.vu...原创 2021-08-31 10:03:19 · 1388 阅读 · 1 评论 -
JavaScript 正则表达式的 5 个方法
介绍一些 JavaScript 中的编写正则表达式的常见用法。1. match()match()与字符串一起使用以检查字符串和正则表达式regex之间的匹配,以正则表达式为参数。语法:str.match(regex);方法返回 3 个可能的值:如果正则表达式包含一个g标记,即为全局匹配,它将返回一个包含所有匹配项的数组,没捕获组信息; 如果正则表达式没有g标记,它将返回一个包含第一个匹配项和其相关的捕获组的数组; 如果根本没有匹配项,则返回null。gro...原创 2021-08-31 10:00:21 · 145 阅读 · 0 评论 -
Typescript 类型断言
TypeScript 允许你覆盖它的推断,并且能以你任何你想要的方式分析它,这种机制被称为「类型断言」。TypeScript 类型断言用来告诉编译器你比它更了解这个类型,并且它不应该再发出错误。类型断言的一个常见用例是当你从 JavaScript 迁移到 TypeScript 时:const foo = {};foo.bar = 123; // Error: 'bar' 属性不存在于 ‘{}’foo.bas = 'hello'; // Error: 'bas' 属性不存在于 '{}'这里原创 2021-08-31 09:58:49 · 4675 阅读 · 0 评论 -
Typescript 字符串字面量
字面量是 JavaScript 本身提供的一个准确变量。#字符串字面量你可以使用一个字符串字面量作为一个类型:let foo: 'Hello';在这里,我们创建了一个被称为foo变量,它仅接收一个字面量值为Hello的变量:let foo: 'Hello';foo = 'Bar'; // Error: 'bar' 不能赋值给类型 'Hello'它们本身并不是很实用,但是可以在一个联合类型中组合创建一个强大的(实用的)抽象:type CardinalDirect...原创 2021-08-31 09:55:59 · 349 阅读 · 0 评论 -
Typescript 枚举介绍
枚举是组织收集有关联变量的一种方式,许多程序语言(如:c/c#/Java)都有枚举数据类型。下面是定义一个 TypeScript 枚举类型的方式:enum CardSuit { Clubs, Diamonds, Hearts, Spades}// 简单的使用枚举类型let Card = CardSuit.Clubs;// 类型安全Card = 'not a member of card suit'; // Error: string 不能赋值给 `CardSuit` 类型原创 2021-08-31 09:27:45 · 871 阅读 · 0 评论 -
js 两位小数验证
const validateValidity = (rule, value, callback) => { if (!/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(value)) { callback(new Error('最多两位小数!!!')); } else { callback(); }};原创 2021-08-31 09:24:51 · 2189 阅读 · 0 评论 -
js验证是否是[0-100]的小数
export function isBtnZeroToHundred(rule, value, callback) { if (!value) { return callback(new Error('输入不可以为空')); } setTimeout(() => { if (!Number(value)) { callback(new Error('请输入[1,100]之间的数字')); } else { if (value < 0 .原创 2021-08-31 09:24:03 · 587 阅读 · 0 评论 -
vue3 element plus按需引入最优雅的用法
全局导入下载安装element plus后,在入口文件配置一下并挂载,就能畅通无阻的使用了。但问题是这样有很多用不上的组件都被打包进来了,导致包的体积非常大。按需导入采用按需导入的方法,其实是用解构的方式,从element的包中解构出来,再挂载到app上面。这样开发中用到什么组件就打包什么确实很好,减少了包的体积。但是又有一个新的问题,就是每次想要使用新的组件的时候,都要去解构一下,并且挂载。操作起来非常繁琐。有什么办法能够像使用全局引入那样只配置一次,后面要用到什么组件,都会自己按需加原创 2021-08-13 10:20:05 · 14782 阅读 · 11 评论 -
vue多环境配置方案
一般服务器分为本地环境,测试环境,正式环境,如果每次都要修改配置就很麻烦,总结一下我使用的方法vue-demo/ |-build/ |-config/ |-dist/ |-src/ |-config/ |-index.js |-dev.conf.js |-sit.conf.js |-prod.conf.js |-package.json |-index.html修改执行命令修改pack原创 2021-08-13 10:15:19 · 1431 阅读 · 1 评论 -
手写一个async/await的实现
众所周知,async/await只是一个语法糖,它是基于生成器来实现的,我根据网上的资料,从头开始写出它中间的原理实现。生成器生成器是在定义函数时在function后添加*定义的,像这样:function* func(){},执行生成器函数后会得到一个迭代器,在生成器函数中能支持yield来暂停函数,直到迭代器调用next方法.同时next能传入一个参数来作为yield的值。这里先定义两个异步函数来作为以后的实验对象:function afunc() { return new Pr原创 2021-08-13 10:13:40 · 1570 阅读 · 0 评论 -
前端代码经常见到的Provider是什么
不知道你有没有在某处见过 xxProvider,Provider 并不是 23 种经典设计模式之一,但是却应用特别多,可以算是一种比较新的模式。Angular2 中提供了创建对象的时候基于 Provider VSCode 插件中有各种 registerXxxProvider 的 api react提供了 Provider 组件用于 context数据的传递还有很多别的地方也经常会见到 Provider 的概念,那么 Provider 究竟是什么呢?本文就来回答下这几个问题:provid..原创 2021-08-13 10:12:49 · 2110 阅读 · 0 评论