前端开发——让算法“动起来”

时间：2023-04-03 16:24:36 Node.js

文当然，在我们不知道具体操作细节之前，我们可以先假设一下我们可以用什么来实现它。根据之前看过的排序动画，我将它们分成1.Js来操作Dom，然后搭配简单的css2.Canvas动画。查了资料，发现有人用d3库来完成。作为一个有（被）梦想（坑）和（很多）想法的前端，你得从一开始就考虑如何实现多种算法。如果实现单步运行（如果可以的话，必须要有回退的功能），如何实现动画速度的控制等等。当然，一下子幻想这么多是不现实的。我们得找个简单的例子看看，然后一步步深入。先来看下效果图之后我们分析源代码：css:#field{width:500px;height:510px;background:black;position:relative}.bar{position:absolute;bottom:0;background:orange;border:1px纯棕色；宽度：24px}html:

javascript:!function(d){varbars=[].slice.call(d.querySelectorAll('.bar'));vararr=[8,10,3,5,6,9,2,4,7,1];变种状态=[];vardraw=function(){varbar,s;s=state.shift()||[];for(barinbars){bars[bar].style.height=25*s[bar]+'px';bars[bar].style.left=25*bar+'px';}}varsort=function(arr){for(vari=0;我arr[j+1]){arr[j]=arr[j]+arr[j+1]；arr[j+1]=arr[j]-arr[j+1];arr[j]=arr[j]-arr[j+1];(JSON.parse(JSON.stringify(arr)));}}}}排序（arr）；setInterval(draw,500);}(document)整个过程其实已经很清楚了，只是有些代码让我一时糊涂了，经过google和群里的朋友请教，终于解开了迷惑。我们先来明确一下这段代码的思路。首先这个动画是把大小和宽度设置死的。并且排序数组的个数需要和html结构中的条数保持一致。1、html中的bar是一个长方体，宽度为24px，边框为1px。因此，在代码中动态改变left时，需要设置为25.2。在js代码中，使用了一个匿名立即函数来包装代码。bars=[].slice.call(d.querySelectorAll('.bar'));本节将获取到的节点列表转化为对象数组，方便单独修改每根柱。3.设置一个状态空数组来保存每个状态，记住这是动画的关键。4.state.shift()将数组临时模拟成一个队列，draw函数根据最先出队的内容重新排列列表。配合setInterval(draw,400)可以组成一个动画序列。5sort函数和我们之前介绍的冒泡排序一样，只是多了一句state.push(JSON.parse(JSON.stringify(arr)));奇怪，为什么先JSON.stringify，再JSON.parse。这里需要大家慎重考虑。想想你在哪里看到的？深拷贝？是的，它是深拷贝。对于深拷贝不理解的，我在这里给出它的意思：深拷贝就是拷贝变量值，对于非基本类型变量，递归到基本类型变量再拷贝。这两天也整理了一下深拷贝，但是一直没明白为什么要在这里这么写。起初我认为这是错误的。一开始我以为arr是一个数字数组。深拷贝一个中间变量操作不也是一样吗，所以加了几行代码vartemp=arrstate.push(temp);然后动画消失，页面变成最后一个排序的页面。这时群里有人提醒我，浅拷贝会修改原来的数组。我只是根据state.push做出反应。在sort里面，每次push都是为了保存交换后的排序数组的状态。如果我用temp替换它，那么状态将全部包含相同的最后排序状态。而JSON.parse(JSON.stringify(arr))在不改变arr原有数组的情况下对arr进行深拷贝，所以它像快照一样将每一个sort的状态推送到state，然后配合setInterval逐一筛选形成动画.一个简单的排序动画，其实包含了很多有价值的内容。回过头来看，套用公式（方法）还不容易吗？让我们把之前学过的插入排序改一下：functionexchange(array,i,j){vart=array[i];数组[i]=数组[j]；数组[j]=t;}varsort2=function(numbers){for(vari=0;i0&&numbers[j]新生数据并排序