JavaScript数组去重
导读在JavaScript中,数组去重有多种实现方式。本文将对10种常见的去重方法进行性能分析,并按执行时间从快到慢排序。 性能排序以下是10种去重方法的性能排序(从最快到最慢): 使用 Set 使用 Array.from 和 Set 使用 reduce 和 Set 结合 使用 Object 或 Map 使用 reduce 和 Object 结合 使用 filter 和 indexOf 使用 forEach 和 includes 使用 reduce 使用 for 循环 使用 lodash 库 性能分析1. 使用 SetSet 是专门用于存储唯一值的数据结构,其去重操作的时间复杂度为 O(n),是所有方法中最快的。 1const uniqueArray = [...new Set(array)]; 2. 使用 Array.from 和 Set与直接使用 Set 类似,Array.from 将 Set 转换为数组,性能接近 Set。 1const uniqueArray = Array.from(new Set(array)); 3. 使用 reduce 和 Set...
判断函数是否有async 前缀
问题字节有一道面试题如何判断某个函数是否使用了async前缀 1234567async function fn(){ return void 0}function isAsyncFn(fn){ //?} 控制台查看 对于普通函数而言: 于是可以有: 123function isAsyncFn(fn){ return fn.constructor.prototype[Symbol.toStringTag] === 'AsyncFunction'} 补充 可以看到,对于生成器函数,也可以使用Symbol.toStringTag来判断其类型,可有: 123function isGenerateFn(fn){ return fn.constructor.prototype[Symbol.toStringTag] === 'GeneratorFunction'} 1
Javascript Number精度问题与解决
导读JS 面试中精度和小数四则运算不准确的问题是一个高频问题,下面是想关的记录。 十进制与二进制下述举例了整数和小数的十进制和二进制相互转换的情况。 1234(57).toString(2) // 111001parseInt("111001",2) // 57(.1).toString(2) '0.0001100110011001100110011001100110011001100110011001101' //无限不循环小数//由于计算机存储有限,四舍五入处理了 由于0.1被转换为二进制后,其是一个无限不循环小数,加上计算机存储空间有限,就被四舍五入了。 对于JS,其Number类型实际上为双精度浮点型,采用``IEEE...
JS中错误捕获小结
导读开发中,我们不可避免地会遇到捕获错误处理、做一些日志上报,埋点的功能,以下是一些常见的错误捕获方式。 **# **对setTimeout错误捕获 由于setTimeout的回调是异步任务,以下代码无法捕获执行错误 1234567try { setTimeout(() => { throw new Error('定时器错误') },10)} catch (err) { console.log("捕获的",err)} 必须在setTimeout的回调里使用try...catch...语句包裹 1234567setTimeout(() => { try { throw new Error("定时器错误"); } catch (err) { console.log("捕获错误", err); }},...
前端大图切分加载
前言前段时间面试时被问到了一张10M的大图如何能快速加载,当时的回答不是很好,现在来重新研究一下。 本文使用的哭包和主要版本为: 技术调研加载大图,图像10M以上哪怕几十M任何的压缩手段都不在考虑范围内了,而是想办法把图片分割为小图,并行请求后再加载显示。 而把图片切分为小图,可以使用sharp这个库包实现,可以通过 123456789const sharp = require('sharp');sharp(imagePath) .extract({ left: x , top: y, width: tileWidth, height: tileHeight ...
mediaSource使用记录
导读看到网上有采用MediaSource实践视频缓冲区的,我也抱着试一试的态度实践了一下,但是却有许多过不去的坎,特此记录。 首先,可以从MDN官网看到介绍,其可以附着在媒体元素上控制播放和资源加载。 例如,可以和<video>搭配: 123456<video></video><script> const video = document.getElementByTag("video"); const mediaSource = new MediaSource() video.src =...
使用nestjs启动nextjs
导读最近一直使用Nest.js和Next.js做项目开发,这两款都是非常优秀的开源框架,且对于主要从事前端开发工作的我来说,由于其都基于npm生态,使用起来也比其他语言容易得多。Nextjs其主要是一款全栈的SSR的框架,而Nest.js则是纯后端的框架。对于Next.js,官方告诉我们可以在/api路径下自定义常规的api接口,但是由于middleware仅仅支持Edge Runtime这一运行时,很多功能上比较受限,加之/api路径和文件即路由的开发范式只适合简单接口的开发,并不适合大多数情况的接口开发。因此,我会使用Nest.jsl来完成后端接口的开发。然而,新的问题又随之出现。如果分开项目开发,且都采用TypeScript以获得完善的类型提示,就会导致两侧都需要定义相同但又不同的ts定义,十分地麻烦。这时,笔者我想到,Nest.js和Next.js本质上都是一个node创建的服务器,不如将Next.js集成到Nest.js当中,让Nest.js提供给Next.js...
bytemd插件开发--将链接渲染为卡片模式
导读**笔者经常使用语雀这一强大的在线文档编辑网站,在编辑时选择将超链接渲染为卡片的样式。 ...
nestjs使用redis实现ip限流
导读如果使用nestjs开发接口并部署之后,我们通常需要考虑到接口是否会被恶意盗刷消耗过多的资源,一个简单的方式就是限制在单位时间内的访问次数。 本文使用的库包版本如下: 库名 版本号 @nestjs/core 10.0.0 @nestjs/common 10.0.0 @nestjs/schedule 4.1.2 ioredis 5.4.2 本文的主要工作环境基于****Macbook Pro M1 MacOS 14.6.1。 新建nestjs 项目1nest new nestjs-with-ip-limit -g nestjs中的守卫Guardnestjs 提供了一种可以是否拦截请求的方式,守卫(Guard),我们可以通过实现CanActive接口来完成,详细解释参考官方链接。 自定义的一个ip.guard.ts文件,用于最终实现我们的ip请求拦截。 1234567891011121314//ip.guard.tsimport { Injectable, CanActivate,...