练习二、用JS语言输入数组并判断是否数组，并从小到大进行冒泡排序

1. 功能描述：在界面输入以逗号间隔开的字符串，转换成数组并判断是否有效，有效即进行排序（选择冒泡排序）

1. 主要考点：以输入框为输入参数入口，进行逐步推导

2.1 输入框是字符串需要转换成数组

2.2 一个输入框，要是输入双位数还是会分割成，单位数值，在字符串输入框用逗号进行分割每个数值

2.3 对转换的数组看是否是一个纯数字的数组，而且每一项是否位数字（需要弹窗提示），以及正则表达式的运用（*还未全看懂正则表达式）

2.4 当遍历完数组时，进行调用冒泡排序函数的书写

2.5 Number()把数组内的字符串类型的变量变成数值型比较，不然判断会报错(因为比较的是其字符编码)

2.6 交换两个变量的多种方法

1. 框架：elementui

1. 相关代码

<template>
  <div class="stylebg">
    <h1>输入数组判断并进行从小到大排序</h1>
    <div>
      <span>数组</span>
      <el-input v-model="testArray"></el-input>
    </div>
    <div>
      <el-button @click="toCheck(testArray)">排序</el-button>
    </div>
    <div>
      <span>{{sortArray}}</span>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      testArray:'3,5,1,10,8342,9.34,9,0.546,-9,0,-213',
      // testArray:'',
      sortArray:''
    }
  },
  methods:{
    toCheck(item){
      //1.因为输入testArray的输入框是字符串需要转换成数组
      // split方法
      // console.log(item.split(''))
      // 展开运算符
      // console.log([...item])
      // Array.from （量多1000以上，性能弱）
      // console.log(Array.from(item))

      //2.一个输入框，要是输入双位数还是会分割成，单位数值，在字符串输入框用逗号进行分割每个数值
      // console.log(item.split(','))

      //3.对转换的数组看是否是一个纯数字的数组，而且每一项是否位数字
      let checkArray =  item.split(',')
      for(var count = 0 ; count<checkArray.length ;count++){
        //4.1 每一位检查它是否是数字，不是数字需要弹窗提示
        if(this.isNumber(checkArray[count])){
          // checkArray
          console.log('是数字')
        }else{
          console.log('不是数字')
          this.$message({
            type:'warning',
            message:'输入格式错误'
          })
          return
        }
      }
      //5.当遍历完数组时，进行调用排序函数
      this.toSortArray(checkArray)
    },

    //4.2 检查输入的是否是纯数字，是则返回真
    isNumber(checkNum){
      // 正则表达式/^([0-9]+\.?[0-9]*|-[0-9]+\.?[0-9]*)$/判断是否为0，或者正负数字
      let regPos = /^([0-9]+\.?[0-9]*|-[0-9]+\.?[0-9]*)$/
      if(regPos.test(checkNum)){
        return true
      }else{
        return false
      }
    },

    //5.排序（使用的是冒泡排序）
    toSortArray(array){
      for(var count_o = 0 ; count_o< array.length; count_o++){
        for(var count_i = 0 ; count_i<array.length - count_o; count_i ++){
          //count_i是最后一位时，不进行比较
          if(count_i + 1 <= array.length - 1){
            //6.Number()把变量变成数值型比较，不然判断会报错(比较其字符编码)
            array[count_i] = Number(array[count_i])
            array[count_i + 1] = Number(array[count_i + 1])
            if(array[count_i] > array[count_i + 1]){
              //7.交换两个变量

              //7.1 使用第三变量进行交换
              // let val = array[count_i]
              // array[count_i] = array[count_i + 1]
              // array[count_i + 1] = val

              //7.2 两两相加并赋值到A，A-B赋值到B，再把A-B赋值到A
              // array[count_i + 1] = array[count_i + 1] + array[count_i]
              // array[count_i] = array[count_i + 1] - array[count_i]
              // array[count_i + 1] = array[count_i + 1] - array[count_i]

              //7.3 生成指定两个对象赋值到A，再从中取值(对象形式)
              // array[count_i + 1] = {'a':array[count_i] ,'b':array[count_i + 1]}
              // array[count_i] = array[count_i + 1].b
              // array[count_i + 1] = array[count_i + 1].a

              //7.4 生成指定两个对象赋值到A，再从中取值(数组形式)
              // array[count_i + 1] = [array[count_i] , array[count_i + 1]]
              // array[count_i] = array[count_i + 1][1]
              // array[count_i + 1] = array[count_i + 1][0]

              // OR 运算符优先级 新建数组中B=A完成赋值，并定义B，再把数组中的B取出来
              // array[count_i + 1] = [array[count_i] , array[count_i] = array[count_i + 1]][0]

              //7.5 ES6的解构赋值语法
              [array[count_i],array[count_i + 1]]=[array[count_i + 1],array[count_i]]
            }
          }
        }
      }
      this.sortArray = array
    }
  }
}
</script>

<style scoped>

</style>

5，运行效果