{{ sortGroup.bubbleData }}
                      
for (let i = 0; i < arr.length - 1; i++) {
  for (let j = i + 1; j < arr.length - 1; j++) {
    if (arr[i] > arr[j]) {
      [arr[i], arr[j]] = [arr[j], arr[i]]
    }
  }
}
                      
                    
排序 {{ sortGroup.bubbleDataNew }}
{{ sortGroup.bubbleData }}
                      
const loopFn = (arr) => {
  if (arr.length <= 1) return arr
  const centerIndex = Math.floor(arr.length / 2)
  const centerValue = arr.splice(centerIndex, 1)[0]
  const [left, right] = [[], []]
  arr.map((e, i) => {
    if (e < centerValue) {
      left.push(e)
    } else {
      right.push(e)
    }
  })
  return loopFn(left).concat([centerValue], loopFn(right))
}
                      
                    
排序 {{ sortGroup.quickDataNew }}
{{ sortGroup.insertData }}
                      
const sortArr = [_arr[0]]
const getIndex = (arr, e) => {
  if (e < arr[0]) return 0
  if (e >= arr[arr.length - 1]) return arr.length
  let i = 0
  for (; i < arr.length; i++) {
    if (e >= arr[i] && e <= arr[i + 1]) {
      break
    }
  }
  return i + 1
}
for (let i = 1; i < _arr.length; i++) {
  const searchIndex = getIndex(sortArr, _arr[i])
  sortArr.splice(searchIndex, 0, _arr[i])
}
this.sortGroup.insertDataNew = sortArr
                      
                    
排序 {{ sortGroup.insertDataNew }}
控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;
页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。
简化流程:设计简洁直观的操作流程;
清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策;
帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。
用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;
结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。