js冒泡排序动画

最新推荐文章于 2025-05-11 13:19:14 发布

weixin_33800463

最新推荐文章于 2025-05-11 13:19:14 发布

阅读量542

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c7cb5a6e51d4558d360609a

在《深入浅出node》中看到了这个问题，感觉很有趣，那就写一个吧！效果如图：

我们先来实现一个简单的冒泡排序：

const arrLength = 10
const arrRange = 30

const generateArr = () => {
  return Array.from({ length: arrLength }).map(() =>
    Math.floor(Math.random() * arrRange)
  )
}

const compare = (x, y) => x - y

const swap = (a, i, j) => {
  a[i] ^= a[j]
  a[j] ^= a[i]
  a[i] ^= a[j]
}

const bubbleSort = a => {
  const len = a.length
  for (let i = 0; i < len; i++) {
    for (let j = 0; j < len - i - 1; j++) {
      if (compare(a[j], a[j + 1]) > 0) {
        swap(a, j, j + 1)
      }
    }
  }
}

const arr = generateArr()
console.log(arr)

bubbleSort(arr)
console.log(arr)
复制代码

接下来实现一个图表：

const generateChart = () => {
  const block = document.querySelector('#sort')
  block.style.width = `${arrLength * (pillarGap + pillarWidth)}px`
  for (let i = 0; i < arrLength; i++) {
    const newDiv = document.createElement('div')
    Object.assign(newDiv.style, {
      height: `${((arr[i] / arrRange) * 100).toFixed(0)}%`,
      width: `${pillarWidth}px`,
      marginLeft: `${pillarGap}px`
    })
    newDiv.innerText = arr[i]
    block.append(newDiv)
  }
}
复制代码

排序中主要变化是交换，再写一个交换元素的函数：

function exchange(el1, el2) {
  var ep1 = el1.parentNode,
    ep2 = el2.parentNode,
    index1 = Array.prototype.indexOf.call(ep1.children, el1),
    index2 = Array.prototype.indexOf.call(ep2.children, el2)
  ep2.insertBefore(el1, ep2.children[index2])
  ep1.insertBefore(el2, ep1.children[index1])
}
复制代码

最后我们只要把 bubbleSort 变为异步调用即可：

const bubbleSort = async a => {
  const len = a.length
  for (let i = 0; i < len; i++) {
    for (let j = 0; j < len - i - 1; j++) {
      await swapTransform(a, j, j + 1, compare(a[j], a[j + 1]) > 0)
    }
  }
  return a
}
复制代码