![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript
文章平均质量分 58
遇见小美好
爱生活、爱运动、爱学习、喜欢尝试探索行业新技术的前端妹子(*^▽^*)
展开
-
【算法篇】查找字符串数组中的最长公共前缀
【算法篇】查找字符串数组中的最长公共前缀原创 2024-06-28 00:53:24 · 638 阅读 · 0 评论 -
用promise实现批量请求数据,同时支持控制请求的并发数
用promise实现批量请求数据,同时支持控制请求的并发数,支持取消请求。原创 2024-06-28 00:30:49 · 522 阅读 · 0 评论 -
【算法篇】无重复字符的最长子串
无重复字符的最长子串,滑动窗口解法 JavaScript版本原创 2024-06-10 11:27:18 · 391 阅读 · 0 评论 -
【算法篇】滑动窗口的最大值JavaScript版
对于类似的滑动窗口问题,如求最小值、求平均值等,都可以采用类似的思路,关键在于如何维护一个能够快速提供所需信息的辅助数据结构。原创 2024-06-10 10:48:54 · 402 阅读 · 0 评论 -
【算法篇】大数加法JavaScript版
大数加法算法题JavaScript版原创 2024-06-09 20:23:10 · 315 阅读 · 0 评论 -
【算法篇】求最长公共前缀JavaScript版本
求最长公共前缀原创 2024-06-09 17:48:11 · 524 阅读 · 0 评论 -
使用Service Worker、Web Workers进行大量数据渲染优化(例如地图)
使用Service Worker、Web Workers进行地图渲染优化,提高地图渲染性能原创 2024-06-06 13:23:13 · 1192 阅读 · 0 评论 -
常用的几种异步实现方式
前端异步实现方式原创 2024-06-05 15:27:58 · 412 阅读 · 0 评论 -
codereview时通常需要关注哪些
codereview注意事项原创 2024-06-04 23:57:51 · 316 阅读 · 0 评论 -
防抖(debounce)和节流(throttle)的优化方法
防抖(debounce)和节流(throttle)是两种常用的优化方法,用于减少高频事件(如滚动、输入、鼠标移动等)触发的函数执行次数,从而提高页面性能。原创 2024-06-04 23:45:03 · 503 阅读 · 0 评论 -
【算法篇】快速排序算法JavaScript版
快速排序算法,JavaScript版原创 2024-06-02 16:36:55 · 412 阅读 · 0 评论 -
Web Workers使用场景
Web Workers使用场景.原创 2024-05-31 15:41:47 · 236 阅读 · 0 评论 -
如何确保原始函数只执行一次?
这个例子展示了如何使用`once`函数确保原始函数只执行一次,并在后续调用中直接返回第一次调用的结果。这在某些场景下非常有用,例如初始化操作、单次网络请求等。原创 2024-05-22 16:20:02 · 662 阅读 · 0 评论 -
一道前端面试题:商家优惠券折扣
JavaScript面试题,商家优惠券折扣原创 2024-05-21 15:23:43 · 66 阅读 · 0 评论 -
yahoo performance 14 rules 雅虎性能优化14条军规
雅虎性能优化14条军规……一、尽可能的减少HTTP请求。二、使用CDN(内容分发网络)。三、添加Expire/Cache-Control头。四、启用Gzip压缩。五、将css放在页面最上面。六、将script放在页面最下面。七、避免在CSS中使用Expressions。八、把JS和CSS放到外部文件中。九、减少DNS查询。十、压缩 JavaScript。十一、避免重定向。十二、移除重复的脚本。十三、配置实体标签(ETag)。十四、使 AJAX 缓存。原创 2022-08-22 19:45:46 · 435 阅读 · 0 评论 -
LeetCode算法题226. 翻转二叉树 JavaScript版
LeetCode算法题226. 翻转二叉树 JavaScript版。原创 2022-08-08 12:37:00 · 253 阅读 · 0 评论 -
leetcood 算法题102. 二叉树的层序遍历
即逐层地,从左到右访问所有节点)。原创 2022-08-07 23:13:53 · 111 阅读 · 0 评论 -
LeetCode 1556. 整数每隔3位数字添加千位分隔符
LeetCode 1556. 千位分隔数 JavaScript版本题目要求:给你一个整数 n,请你每隔三位添加点(即 "." 符号)作为千位分隔符,并将结果以字符串格式返回。原创 2022-07-12 19:44:17 · 174 阅读 · 0 评论 -
经典面试题:判断有效的括号——javascript版本
面试题目:给定一个只包括 ‘(’,’)’,’{’,’}’,’[’,’]’ 的字符串 s ,判断字符串是否有效。有效字符串需满足:左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。示例 1:输入:s = “()”输出:true示例 2:输入:s = “()[]{}”输出:true示例 3:输入:s = “(]”输出:false示例 4:输入:s = “([)]”输出:false示例 5:输入:s = “{[]}”输出:true解题思路:使用栈“后进先出”这个规原创 2021-07-08 18:42:50 · 1047 阅读 · 0 评论 -
学习笔记——JavaScript(四):多继承
讲多继承之前,咱们先看看当前流行的一个用来继承单对象属性的extend方法,// 单继承,属性复制var extend = function(target, source) { // 遍历源对象的属性 for (var p in source) { // 将源对象属性复制到目标对象中 target[p] = source[p] } // 返回目标对象 return target;}稍微对以上代码简单修改,传入多个对象参数即可实现对多个对象属性的继承,即多继承。//原创 2021-05-17 18:27:58 · 182 阅读 · 0 评论 -
学习笔记——JavaScript(三):继承的几种实现方式
继承是面向对象的,通过继承我们可以更好地复用以前的开发代码,缩短开发的周期、提升开发效率。JavaScript常见的继承方式有以下几种。子类的原型对象——类式继承// 声明父类function SuperClass() { this.superValue = true;}// 为父类添加公共方法SuperClass.prototype.getSuperValue = function() { return this.superValue;}// 声明子类function SubCl原创 2021-05-14 19:21:56 · 378 阅读 · 22 评论 -
策略模式应用示例——表单校验
项目中,注册、登录、修改用户信息等功能的实现都离不开提交表单。在将用户输入的数据交给后台之前,常常要做一些客户端力所能及的校验工作,比如注册的时候需要校验是否填写了用户名,密码的长度是否符合规定,等等。这样可以避免因为提交不合法数据而带来的不必要网络开销。假设我们正在编写一个注册的页面,在点击注册按钮之前,有如下几条校验逻辑。用户名不能为空。密码长度不能少于 6 位。手机号码必须符合格式。表单校验:版本一或许我们会看到类似如下版本的表单校验:<!DOCTYPE html>&原创 2021-03-03 18:53:28 · 313 阅读 · 2 评论 -
代码重构技巧总结
1. 提炼函数如果一个函数过长,不得不加上若干注释才能让这个函数显得易读一些,那这些函数就很有必要进行重构。如果在函数中有一段代码可以被独立出来,那我们最好把这些代码放进另外一个独立的函数中。这是一种很常见的优化工作,这样做的好处主要有以下几点。 避免出现超大函数。 独立出来的函数有助于代码复用。 独立出来的函数更容易被覆写。 独立出来的函数如果拥有一个良好的命名,它本身就起到了注释的作用。比如在一个负责取得用户信息的函数里面,我们还需要打印跟用户信息有关的 log,那么打印 log原创 2021-02-08 17:00:28 · 418 阅读 · 0 评论 -
JavaScript设计模式——享元模式
享元模式的要求与目标享元模式要求将对象的属性划分为内部状态与外部状态(状态在这里通常指属性)。享元模式的目标是尽量减少共享对象的数量,关于如何划分内部状态和外部状态,下面的几条经验提供了一些指引。 内部状态存储于对象内部。 内部状态可以被一些对象共享。 内部状态独立于具体的场景,通常不会改变。 外部状态取决于具体的场景,并根据场景而变化,外部状态不能被共享。这样一来,我们便可以把所有内部状态相同的对象都指定为同一个共享的对象。而外部状态可以从对象身上剥离出来,并储存在外部。享元模式应用原创 2021-02-05 16:36:50 · 153 阅读 · 0 评论 -
js用高阶函数动态创建代理(代理模式之缓存代理)
运用高阶组件结合代理模式中的缓存代理可以减少不必要的计算,举例我们经常使用到的加减乘除法。// 加法运算var plus = function(){ console.log('加法'); // TODO: 用于验证,记得删除 var a = 0; for(var i = 0, l = arguments.length; i < l; i++){ a = a + arguments[i]; }; return a;}// 乘法运算var mult = function(){ c原创 2021-02-02 15:21:16 · 215 阅读 · 2 评论 -
JavaScript设计模式——惰性单例模式
我们知道单例模式的核心是确保只有一个实例,并提供全局访问。而惰性单例只在需要的时候才创建对象实例并且只创建唯一的一个。创建对象和管理单例的职责被分布在两个不同的方法中,在实际开发中非常有用。惰性单例技术中创建单例的逻辑:用一个变量来标志是否创建过对象,如果是,则在下次直接返回这个已经创建好的对象:var object;if(!object){ object = xxx;}可以封装一个创建单例的getSingle函数,把创建对象的方法fn作为参数动态传入该getSingle函数:// 创原创 2021-01-30 18:53:12 · 170 阅读 · 0 评论 -
JavaScript闭包作用之一——延续局部变量的寿命
JavaScript中闭包的作用不少,这里就不一一例举了,今天要说的是利用闭包延续局部变量的寿命在工作中的使用场景。工作中img 对象经常用于进行数据上报,如下所示:var report = function( src ){ var img = new Image(); img.src = src; }; report( 'http://xxx.com/getUserInfo' );但是因为一些低版本浏览器的实现存在 bug,在这些浏览器下使用 report 函数进行数据上报会原创 2021-01-27 22:16:39 · 235 阅读 · 0 评论 -
JavaScript计算传入参数的乘积以及优化方案
遇到求几个参数乘积的问题(例如求(1,2,3,4)的乘积得24),我们可能会毫不犹豫地写出如下代码:原始版本var multiply = function () { var a = 1; for (let i = 0; i < arguments.length; i++) { a = a * arguments[i]; } return a;}console.log('11:',multiply(1,2,3,4)); // 输出:24multiply 函数接受一些原创 2021-01-27 18:59:52 · 589 阅读 · 0 评论 -
JavaScript模拟bind方法
目前大部分高级浏览器都实现了内置的 Function.prototype.bind,用来指定函数内部的 this指向,对于还没有支持原生的 Function.prototype.bind 的就需要手动模拟实现,一个简易版bind方法,可以这样实现:Function.prototype.bind = function (context) { var _this = this; // 保存原函数 return function () { // 返回一个新函数 return _this.appl原创 2021-01-27 16:42:53 · 87 阅读 · 0 评论 -
js高频面试题:new的过程发生了什么?手写new的实现代码
今天我们来看一个js高频面试题:new的过程发生了什么?然后可能还会让现场手写new的实现代码。我们知道,new 运算符可以创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。举例用new创建一个有year, color, model属性的汽车对象Car:function Car(year, color, model) { this.year = year; this.color = color; this.model = model;}const myCar = new Car原创 2021-01-26 11:59:37 · 825 阅读 · 0 评论 -
javascript数组常用到的核心方法
concat: 连接 2 个或更多数组,并返回结果every: 对数组中的每个元素运行给定函数,如果该函数对每个元素都返回 true,则返回 truesome 对数组中的每个元素运行给定函数,如果任一元素返回 true,则返回 truefilter:对数组中的每个元素运行给定函数,返回该函数会返回 true 的元素组成的数组forEach: 对数组中的每个元素运行给定函数。这个方法没有返回值map: 对数组中的每个元素运行给定函数,返回每次函数调用的结果组成的数组join: 将所有的数组元素连接原创 2020-09-03 12:34:15 · 106 阅读 · 0 评论 -
js 将多层嵌套的数组转换为一层数组
js将一个嵌套多层的数组 array (嵌套可以是任何层数)转换为只有一层的数组。例如 输入:[1,2,[3,4,[5,6],‘7’],‘a,b]cd’]期望输出:[1,2,3,4,5,6,‘7’,‘a,b]cd’]var newArr = []; // 用于存放转换后的数组function arrOfOneDimension(arr) { for (let key of arr) { if (Array.isArray(key)) { arrOfOneDimension(原创 2020-08-22 18:42:52 · 4054 阅读 · 0 评论 -
javascript简单快速实现将数组添加到另一个数组
假如现在有两个数组var array1 = [1, 2, 3]; var array2 = ['a', 'b'];我们想要的效果是:把array2数组元素添加到array1中,使得array1直接变成下面这个样子:[1, 2, 3, 'a', 'b']如何快速实现呢?可能有小伙伴会想到使用push方法,我们来看看push效果是怎么样的:var array1 = [1, 2, 3];...原创 2020-01-20 17:23:10 · 12130 阅读 · 0 评论 -
js判断数据类型(对象类型、字符串类型、函数类型、数组类型、数字类型等)
js判断是否为对象类型、字符串类型、函数类型的方法JavaScript封装几个简单的判断数值类型的工具方法,工作中还是挺实用的。判断数据是否为对象类型const isObject = (data) => { return Object.prototype.toString.call(data) === '[object Object]';}// 调用方法示例isObject...原创 2020-01-13 11:49:50 · 4566 阅读 · 0 评论 -
前端css+js实现自定义上传文件/图片按钮,并显示已选文件/图片名称
默认的文件上传按钮样式(如下图)确实不太好看,想展现得美观一些就自己写一个样式吧。下面我们做一个自定义的上传按钮效果,上传后把已上传文件/图片名称也显示出来。实现思路也很简单:1、先把原元素隐藏起来,自己写一个好看的按钮2、点击自定义按钮时触发原元素点击事件达到选择文件上传的效果(等同于触发了原input元素 )最终效果如下图:一、html部分代码:<div> ...原创 2019-07-23 18:13:22 · 5282 阅读 · 2 评论 -
Web前端开发面试题——将字符串转成驼峰写法
一道JavaScript面试题: 要求:将给定字符串 border-left-color转换成驼峰写法为borderLeftColor 知识点: 小写转换成大写的方法toUppercase()方法; 将字符分隔成数组的方法split()方法; 正则表达式运用。原创 2017-05-02 22:57:42 · 1845 阅读 · 0 评论 -
JavaScript封装跨浏览器的class、id选择器函数
用原生js封装一个通用的选择器函数,选择class或者id元素,类型jQuery的id选择器、class选择器。原创 2017-04-28 10:51:08 · 1261 阅读 · 0 评论 -
通过Object.prototype扩充功能,增加对所有对象都可用的方法
通过给 Object.prototype增加方法可以让该方法对所有对象都可用举例:对 Function.prototype增加方法来使得该方法对所有函数可用。原创 2017-07-28 17:02:59 · 1438 阅读 · 0 评论 -
自定义一个函数区分数组或者对象
JavaScript 对于数组和对象的区别比较容易混淆,可以自定义一个is_array函数来区别数组或者对象,判断一个对象是否为数组原创 2017-07-28 17:24:40 · 328 阅读 · 0 评论 -
一个匹配URL的正则表达式例子(带详细解释)
可处理正则表达式的方法有regexp.exec、regexp.test、string、match、string.replace、string.search和string.split。一个带详细解释的匹配URL的正则表达式原创 2017-07-28 20:38:00 · 6251 阅读 · 0 评论