java冒泡排序以及优化，并用vue+element在网页上进行可视化排序

短命女 2023-10-01 21:05 32阅读 0赞

**目录**

网页图片：

冒泡排序（java版本）

冒泡排序优化（java版本）

前端代码

VUE.JS

element-ui

部分html

script

全部代码：

--------------------

### 网页图片： ###

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASmF2YXNjcmlwdF90c2o_size_20_color_FFFFFF_t_70_g_se_x_16][]

在输入框中输入数组，点击测试就能动态图演示排序过程.

由于不方便录制视频，就以图片的形式呈现：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASmF2YXNjcmlwdF90c2o_size_20_color_FFFFFF_t_70_g_se_x_16 1][]![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASmF2YXNjcmlwdF90c2o_size_20_color_FFFFFF_t_70_g_se_x_16 2][]![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASmF2YXNjcmlwdF90c2o_size_20_color_FFFFFF_t_70_g_se_x_16 3][]

####  ####

### 冒泡排序（java版本） ###

package suanfa;
    import java.util.Arrays;
    import java.util.Scanner;
    public class xishuarr {
    public static void main(String[] args) {
    System.out.println("输入要排序的值，输入的每个值用逗号隔开:");
    Scanner sc = new Scanner(System.in);
    String str = sc.nextLine();
    // 将字符串按照","拆分成字符串数组
    String[] strArray = str.split(",");
    // 新建数组用来存储拆分出来的每个值
    int[] array = new int[strArray.length];
    // 给数组循环遍历赋值
    
    for (int i = 0; i < strArray.length; i++) {
    array[i]=Integer.parseInt(strArray[i]); }
    sort(array);
    System.out.println("排序后的数组：" + Arrays.toString(array)); }
    /** *用冒泡排序算法对数组进行排序 * @param array */
    private static void sort(int[] array) {
    int count=0; int cnt=0; int x=0;
    // array.length - 1是因为最后一轮不需要排序
    for (int i=0; i < array.length-1; i++) {
    // array.length - i是因为每一轮都能确定排序好一个数
    for (int j=0; j < array.length-1- i; j++) { count++; int
    temp=0; if (array[j]> array[j + 1]) {
    cnt++;
    temp = array[j];
    array[j] = array[j + 1];
    array[j + 1] = temp;
    }}
    System.out.println("第"+(i+1)+":"+Arrays.toString(array));
    x=i;
    }
    System.out.println("运行次数:"+count+ " 执行了" + (x + 1) + "趟 排序" + "交换次数:"+cnt);
    }
    }

### 冒泡排序优化（java版本） ###

package suanfa;
    import java.util.Arrays;
    import java.util.Scanner;
    public class xishuarr {
    public static void main(String[] args) {
    System.out.println("输入要排序的值，输入的每个值用逗号隔开:");
    Scanner sc = new Scanner(System.in);
    String str = sc.nextLine();
    // 将字符串按照","拆分成字符串数组
    String[] strArray = str.split(",");
    // 新建数组用来存储拆分出来的每个值
    int[] array = new int[strArray.length];
    // 给数组循环遍历赋值
    
    for (int i = 0; i < strArray.length; i++) {
    array[i]=Integer.parseInt(strArray[i]); }
    sort(array);
    System.out.println("排序后的数组：" + Arrays.toString(array)); }
    /** *用冒泡排序算法对数组进行排序 * @param array */
    private static void sort(int[] array) {
    int count=0; int cnt=0; int x=0;boolean flag=false;
    // array.length - 1是因为最后一轮不需要排序
    for (int i=0; i < array.length-1; i++) {
    // array.length - i是因为每一轮都能确定排序好一个数
    for (int j=0; j < array.length-1- i; j++) { count++; int
    temp=0; if (array[j]> array[j + 1]) {
    cnt++;flag=true;
    temp = array[j];
    array[j] = array[j + 1];
    array[j + 1] = temp;
    }}
    System.out.println("第"+(i+1)+":"+Arrays.toString(array));
    x=i;
    if(!flag) { break; }else { flag=false; }
    }
    System.out.println("运行次数:"+count+ " 执行了" + (x + 1) + "趟 排序" + "交换次数:"+cnt);
    }
    }

### 前端代码 ###

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASmF2YXNjcmlwdF90c2o_size_9_color_FFFFFF_t_70_g_se_x_16][]

#### VUE.JS ####

可以取 vue的官网下载 :[VUE.JS][]

#### element-ui ####

elementui下载地址：[UNPKG - element-ui][]

#### 部分html ####

####  ####

#### script ####

#### 全部代码： ####

链接：https://pan.baidu.com/s/1d0mtm9QqrEVL5rT600kSTQ  
提取码：ac1v

（只写了冒泡）

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASmF2YXNjcmlwdF90c2o_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/7649f251f61b4829beda7be4e1c0b3ec.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASmF2YXNjcmlwdF90c2o=,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASmF2YXNjcmlwdF90c2o_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/e93cd7e3952046b7a6b81155a9c5ba86.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASmF2YXNjcmlwdF90c2o=,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASmF2YXNjcmlwdF90c2o_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/064f3e533dd74dff896af7628307e300.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASmF2YXNjcmlwdF90c2o=,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASmF2YXNjcmlwdF90c2o_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/533abf7a4daf4617a393f8f915ec211c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASmF2YXNjcmlwdF90c2o=,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBASmF2YXNjcmlwdF90c2o_size_9_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/24a2a57d61d04635956211e27512a5c9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASmF2YXNjcmlwdF90c2o=,size_9,color_FFFFFF,t_70,g_se,x_16
[VUE.JS]: https://cn.vuejs.org/
[UNPKG - element-ui]: https://unpkg.com/browse/element-ui@2.11.1/