js冒泡排序详解

JavaScript032

js冒泡排序详解,第1张

冒泡排序的原理就是讲两个相邻的元素进行比较,数值大的元素就会往后排就是换到走遍,而我们依次比较并把大数放在后面依次循环,那么最大的元素就会排在最后边,注意:在排完一次之后最后面的数已经是最大的了所以我们并不需再再次比较最后一个元素,也就是比较的次数以此减少。

var arr=[4,2,7,2,5,8,0,4,5,7,3,8,9]

         冒泡排序

         i 的目的是做多少轮的 比较   j和j+1是前后数据比较

         var arr=[4,1,7,2]

          i==0

        arr[i]=4

         j=0  arr[j]=4   arr[j+1]=1    4,1,7,2---->1,4,7,2 

         j=1  arr[j]=4  1,4,7,2--->1,4,7,2

         j=2  arr[j]=7  1,4,7,2--->1,4,2,7

       ### j=3  arr[j]=7 arr[j+1]不存在   因为j+1超过数组的长度,所以j必须是长度-1

         i==1

         j==0 arr[j]=1    1,4,2,7--->1,4,2,7

         j==1 arr[j]=4    1,4,2,7--->1,2,4,7

         ###j==2  上面一次循环中放在最后的是最大的,所以不需要循环到2

          i==2

         j=0  arr[j]=1    1,2,4,7-->1,2,4,7

       function sorts(arr){

            var len=arr.length-1

            for(var i=0i<leni++){

                for(var j=0j<len-ij++){

                    if(arr[j]>arr[j+1]){

                    // if(arr[j+1]-arr[j]<0)

                        var temp=arr[j+1]

                        arr[j+1]=arr[j]

                        arr[j]=temp

                    }

                }

            }

        }

        sorts(arr)

        console.log(arr) 

        以click点击事件为例。假如我们有一个多层结构标签。如下图,是4个div嵌套。每个div都有点击的监听事件,分别输出1234。当我们点击最里面的div时,点击事件开始传递,传递的 全过程是1-2-3-4-4-3-2-1 。

前半部分,事件从最外面的父div依次传递到最里面的后代div, 1-2-3-4这部分我们叫捕获过程 。

之后事件又从最里层的后代div逐层传出, 4-3-2-1这部分我们叫冒泡过程 。

如果我把捕获监听器和冒泡监听器都加上,如下图这样。

这时我们有8个监听器了,在捕获过程和冒泡过程都有监听。输出如下图。

如果我去除几个监听器如下图。为了容易理解我调整了格式

仍然是按照箭头顺序,明显应该输出1423。

        在不使用任何框架的情况下,我们在js中通过addEventListener方法给Dom添加事件监听。这个方法有三个参数可以传递addEventListener(event,fn,useCapture)。event是事件类型click,focus,blur等;fn是事件触发时将执行的函数方法(function);第三个参数可以不传,默认是false,这个参数控制是否捕获触发。所以我们只穿两个参数时,这个事件是冒泡传递触发的,当第三个参数存在且为true时,事件是捕获传递触发的。

        使用框架时可使用对应的框架提供的方法。如上面我使用了Vue框架,通过事件装饰来区分捕获与冒泡。

        在不使用任何框架的情况下,我们在js中通过stopPropagation方法阻止事件继续传递。

        使用框架时可使用对应的框架提供的方法。接下来我将了Vue框架的stop修饰符来阻止事件传递。

        我们可以在传递过程中阻止事件继续传递,防止触发不需要的事件。

如图我在第三层捕获后阻止事件继续传递,那么后面的log方法不会继续执行。最终只输出1-2-3。

        我们在使用中多数情况下只使用冒泡监听。例如一条购物车信息,在这条信息中,右下角有一个删除按钮。点击这条消息可查看详情,点击删除按钮可将此商品移除。我们会分别给信息的div和删除button添加一个冒泡的click事件监听。如果不做阻止传递,点击删除button后,会显示商品详情。显然这不是我们想看到的。这时我们给button一个阻止事件传递的功能,点击删除按钮后,事件就会结束,就不再显示商品详情。

前端豆知识,很小却有用

时间复杂度指的是一个算法执行所耗费的时间空间复杂度指运行完一个程序所需内存的大小稳定指,如果a=b,a在b的前面,排序后a仍然在b的前面不稳定指,如果a=b,a在b的前面,排序后可能会交换位置原理依次比较相邻的两个值,如果后面的比前面的小,则将小的元素排到前面。

依照这个规则进行多次并且递减的迭代,直到顺序正确。

时间复杂度,空间复杂度,稳定性1.平均时间复杂度O(n*n)2.最好情况O(n)3.最差情况O(n*n)4.空间复杂度O(1)5.稳定性:稳定冒泡排序的写法两个循环当i=0的时候,里面的循环完整执行,从j=0执行到j=6,这也就是第一遍排序,结果是将最大的数排到了最后,这一遍循环结束后的结果应该是[8,15,88,55,76,21,39,94]当i=1的时候,里面的循环再次完整执行,由于最大的数已经在最后了,没有必要去比较数组的最后两项,这也是j<arr.length-1-i的巧妙之处,结果是[8,15,55,76,21,39,88,94]说到这里,规律就清楚了,辽宁北大青鸟http://www.kmbdqn.cn/建议每次将剩下数组里面最大的一个数排到最后面,当第一个循环执行到最后的时候,也就是i=6,此时,j=0,只需要比较数组的第一和第二项,比较完毕,返回。