switch case 判断(分支):应用于一个变量在等于不同值情况下(按照“===”比较),做的不同操作 。
对于前端初学者而言,这样的一个功能你做出来了那就很好,慢慢的,我们的工作年限越来越长,如果我们还继续那样做,这样,迟早会淘汰。这个时候,就需要对你的项目进行优化。之前讲到过对于react项目的优化。 这篇文章主要是针对于算法相关的代码进行优化,从而是程序的运行速度更快,已达到程序的优化。 算法更多的是针对于数据的增删改查,或许你认为前端涉及不到,如果这样想,那你就错了。 前端可能用的不多,但不会涉及不到,同时,了解算法,那么对于以后的职业道路也会有所帮助。
基本排序算法 这里主要介绍的基本排序算法主要包括: 冒泡排序,选择排序,插入排序,之后的文章会介绍希尔排序,快速排序等高级排序算法, 文章后面会对这几个算法进行性能比较. 基本排序算法的核心思想是对一组数据按照一定的顺序重新排列. 重新排列主要就是嵌套的for循环. 外循环会遍历数组每一项,内循环进行元素的比较. 注: 文中都以实现升序排序为例: 1.冒泡排序 冒泡排序是最慢的排序算法之一, 也是最容易实现的排序算法.使用这种算法进行排序时,数据值会像气泡一样从数组的一端漂浮到另一端,所以称之为冒泡排序.假设要对数组按照升序排列 preIndex--; } arr[preIndex + 1] = current; } return arr; } 4.基本排序算法的性能比较 arr.push(Math.floor((Math.random() * 100))); } return arr; } 分别记录3种算法所用时间
正文在前端中确实用到不少与树相关的的知识,比方说 DOM 树,Diff 算法,包括原型链其实都算是树,学会树,其实对于学这些知识还是有比较大的帮助的,当然我们学算法还是得考虑面试,而树恰好也是一个大重点 -- 起码在前端而言;主要原因在于,树它华而不实,比较下里巴人,需要抽象但是又能把图画出来不至于让你毫无头绪,简单而言就是看上去很厉害,但实际上也很接地气,俗称比较一般;要知道做前端的面试算法,考的不就是你有么得主动学习能力 ,抽象能力等,但是考虑到参差不齐的前端娱乐圈,考得难吧可能就全是漏网之鱼了,所以既要筛选出鱼,但是又不能难度过大,树就是那个比较适中的,所以赶紧刷起来吧朋友们;这里本来是要遵照 3:5:2 难度来刷,预计刷个 选题主要是那个男人精选的例题以及 Leetcode 中 HOT 题和字节专题,总的来说代表性还是够的,刷完应该大概或许能够应付一下树这方面的算法了。 ret = Math.max(ret, depth); }; dfs(root, 1); return ret;};递归 -- 自低向上既然有自顶向下,那么当然就有自低向上了;就我浅薄的算法能力而已
maxCountLetters, maxCount: maxCount}; } getMaxCount('aabbc'); //{maxCountLetters: ['a', 'b'], maxCount: 2} 2.排序算法 } } } return arr; } var arr = [1, 2, 8, 3, 4, 1]; console.log(bubbleSort(arr)); 3去重算法 randomRang(min, max) { return Math.ceil(Math.random()* (max - min) + min);; } 9.二分查找 二分查找的前提是有序数组,算法的思想是 () { console.log(`index: ${index}`) } })(index) } }; 11.冒泡排序算法
前言 前几天逛 github 的时候看到一些前端的算法题,自己做了一遍发现还挺有意思的,因此整理了一下收录 daily-question 的 algorithm 文件夹中,后续会继续增加,本文分享我整理的十个算法题目 题外话:其实给这篇文章起名字的时候不知道起什么名字,看了下掘金命名的文章,整理了几个模板: 你不知道系列 ——《你不知道的前端算法》 满足系列 —— 《前端算法看这篇就足够了》 灵魂系列 —— 《前端算法之灵魂拷问 》 你真的懂吗系列 —— 《你真的懂前端算法吗?》 万字长文建议收藏系列 —— 《(万字长文,强烈建议收藏,错过没有)之前端算法》 最后想想还是朴素一点,不做标题党吧哈哈哈? ,发现里面的前端代码有一部分是 C/C++ 程序员写的,他们喜欢用下划线命名,例如: is_good。
这一步叫划分操作 3) 接着,算法对划分后的小数组(较主元小的值组成的的小数组, 以及较主元大的值组成的小数组)重复之前的两个步骤,直到排序完成 快速排序demo: function quickSort 1]] = [arr[index - 1], arr[pivot]]; return index - 1; } 选择排序: 大概思路是找到最小的放在第一位,找到第二小的放在第二位,以此类推 算法复杂度 } return arr; } 归并排序: Mozilla Firefox 使用归并排序作为Array.prototype.sort的实现,而chrome使用快速排序的一个变体实现的,前面三种算法性能不好 ,但归并排序性能不错 算法复杂度O(nlog^n) 归并排序是一种分治算法。
最近看一些文章和题目有接触一些算法题,我整理了一下收录daily-question 的 algorithm 文件夹中,后续会继续增加,本文分享我整理的十个算法题目。 这个和我上一个算法《走楼梯的动态规划》有些相似,我们也来动态规划下: 假设数组和目标值如下 var nums = [8, 9, 2, 15, 7, 1]; var target = 9; 首先我们拿出第一个元素 如何从 1110 标记中取出 1 的个数 最简单的方式: const n = num => num.toString(2).replace(/0/g, '').length; 复制代码 这其实也是一道算法常考题 选择算法 对整个数组进行排序有点浪费,我们只是取前 K 个,后面剩下的不进行排序也行。因此,对此数组使用选择算法获取前 K 个数即可。 } // 测试一下 var nums = [8, 9, 2, 15, 7, 1]; console.log(getLargeNumber(nums, 3)); // [15,9,8] 复制代码 快排算法
温馨提示,建议每一道题都自己 new 一个堆,这样才能发现堆之美,其实就是不会再次遇到 topK 的时候只能用冒泡来做。
温馨提示,建议每一道题都自己 new 一个堆,这样才能发现堆之美,其实就是不会再次遇到 topK 的时候只能用冒泡来做。
前言在前端工程上,日益复杂的今天,性能优化已经成为必不可少的环境。前端需要从每一个细节的问题去优化。那么如何更优,当然与他的如何怎么实现的有关。比如key为什么不能使用index呢? 相信你看完本文的diff算法就能略懂一些。 diff算法的概念diff算法, 是 Virtual DOM 产生的一个概念, 作用是用来计算出 Virtual DOM 中被改变的部分,然后根据算法算出dom的结果进行原生DOM操作,而不用重新渲染整个页面 手写diff算法的过程背景:dom对性能的消耗特别高,因此前辈们提出用js对象模拟dom的操作,计算出最后需要更新的部分。而dom本身的算法的时间复杂度是O(n ^ 3)。 DelProps',//表示该属性给删除 ChangeProps: 'ChangeProps',//表示该属性有变化 AddProps: 'AddProps',//表示该属性是新增的参考面试题解答参见 前端手写面试题详细解答
不管是在实际项目中还是在面试的时候我们大都会碰到算法问题,比如排序啊,比较大小啊之类的这些最基本的算法。我总结了一些,以后在碰到在慢慢补充。 1.排序问题 1.1冒泡排序 冒泡排序算法就是依次比较大小,小的的大的进行位置上的交换。 1] + fibarr[i - 2]) } i++; } return fibarr; } 6.二分查找 二分查找:是在有序数组中用的比较频繁的一种算法
属于一种暴力解题的思路;实际上也是如此,当我们在遇到一些分类讨论的问题,无法想到比较精妙的解决方案,我们第一时间考虑到的就是暴力枚举所有情况,然后再做处理,而 回溯 就是这样的一个暴力法下一个 tab 学习一下常规的排序算法吧正文在做回溯题
排序算法 1、冒泡排序 function bubbleSort(arr){ var i = 0, j = 0; for(i=1; i<arr.length; i++){ for if(arr[i] < min) min = arr[i]; if(arr[i] > max) max = arr[i]; } return max - min; } 其他常见算法
温馨提示,建议每一道题都自己 new 一个堆,这样才能发现堆之美,其实就是不会再次遇到 topK 的时候只能用冒泡来做。
前言在前端工程上,日益复杂的今天,性能优化已经成为必不可少的环境。前端需要从每一个细节的问题去优化。那么如何更优,当然与他的如何怎么实现的有关。比如key为什么不能使用index呢? 相信你看完本文的diff算法就能略懂一些。 diff算法的概念diff算法, 是 Virtual DOM 产生的一个概念, 作用是用来计算出 Virtual DOM 中被改变的部分,然后根据算法算出dom的结果进行原生DOM操作,而不用重新渲染整个页面 手写diff算法的过程背景:dom对性能的消耗特别高,因此前辈们提出用js对象模拟dom的操作,计算出最后需要更新的部分。而dom本身的算法的时间复杂度是O(n ^ 3)。 patches) } } else { index += 1; } last = item });}参考 前端进阶面试题详细解答核心的代码
相同元素的前后顺序并没有改变,所以冒泡排序是一种稳定排序算法。 left.shift()); } while (right.length){ result.push(right.shift()); } return result; } 快速排序 快速排序算法是一种基于分治思想的排序算法 right.push(currentItem); } } return [...quickSort(left), pivot, ...quickSort(right)]; } 堆排序 堆排序算法是一种基于堆数据结构的排序算法 该算法的基本思想是统计每个元素在待排序数组中出现的次数,然后根据统计结果构建有序序列。 桶排序的时间复杂度取决于桶的数量和桶内使用的排序算法,通常情况下是O(n+k)。
正文在前端中确实用到不少与树相关的的知识,比方说 DOM 树,Diff 算法,包括原型链其实都算是树,学会树,其实对于学这些知识还是有比较大的帮助的,当然我们学算法还是得考虑面试,而树恰好也是一个大重点 -- 起码在前端而言;主要原因在于,树它华而不实,比较下里巴人,需要抽象但是又能把图画出来不至于让你毫无头绪,简单而言就是看上去很厉害,但实际上也很接地气,俗称比较一般;要知道做前端的面试算法,考的不就是你有么得主动学习能力 ,抽象能力等,但是考虑到参差不齐的前端娱乐圈,考得难吧可能就全是漏网之鱼了,所以既要筛选出鱼,但是又不能难度过大,树就是那个比较适中的,所以赶紧刷起来吧朋友们;这里本来是要遵照 3:5:2 难度来刷,预计刷个 选题主要是那个男人精选的例题以及 Leetcode 中 HOT 题和字节专题,总的来说代表性还是够的,刷完应该大概或许能够应付一下树这方面的算法了。 ret = Math.max(ret, depth); }; dfs(root, 1); return ret;};递归 -- 自低向上既然有自顶向下,那么当然就有自低向上了;就我浅薄的算法能力而已
但是市场上面依然能看到一句缪论“前端不需要算法”,这个不可否认,是不需要太多的算法,因为一个合理的产品,对于展示层的表现,应该注重的是视觉的还原和细节,但是! 这就是算法对于程序带来的提升。可能你会说,这样的设计是不合理的。对,我也认可,这样的计算应该放在后端,那么我们再来看一个小例子。 我们有一组n个元素的价格表,其实在展示逻辑里,我们有一个价格,想要在这个价格表中找到比对,如果没有在价格表中,则说明这个价格是一个错误的价格,需要在前端展示一个红色的标注。 这个时候,其实二分查找,就能很好的解决这个问题,这是一个很高效搜索的方法,这都谈不上算法,是一个很常见的方式。 于是,你就可以在前端的展示中,用红色来标记一个提示了。 可见,前端还是很需要了解算法和数据结构的,只有了解这些,你才能更好的去选择方案,知道哪些可以做,哪些不能做,也知道哪些可以做的更好。
贪心算法是一种很常见的算法思想,而且很好理解,因为它符合人们一般的思维习惯。下面我们由浅入深的来讲讲贪心算法。 这其实就是贪心算法的思想,每次都很贪心的去找最大的匹配那个值,然后再找次大的。 上面的找零问题就是贪心算法,每次都去贪最大面值的,发现贪不了了,再去贪次大的。 从概念上讲,贪心算法是: ? 从上面的定义可以看出,并不是所有问题都可以用贪心算法来求解的,因为它每次拿到的只是局部最优解,局部最优解组合起来并不一定是全局最优解。 数字拼接问题 再来看一个贪心算法的问题,加深下理解,这个问题如下: ?