0

0

控制台版数据排序算法可视化_冒泡/选择排序过程打印练习

P粉602998670

P粉602998670

发布时间:2026-02-14 14:26:03

|

900人浏览过

|

来源于php中文网

原创

正确做法是外层循环每轮结束打印数组并标注轮次,内层循环范围递减,避免中间状态干扰;用padstart对齐数字,禁用json.stringify;settimeout需闭包捕获轮次变量防i值共享。

控制台版数据排序算法可视化_冒泡/选择排序过程打印练习

怎么在控制台逐轮打印冒泡排序过程

关键不是实现排序,而是让每一轮交换后的数组状态清晰可见。很多人直接在 swapconsole.log(arr),结果输出混乱——因为没区分“轮次”和“单次比较”。

正确做法是外层循环每执行一次,就打印当前轮结束后的数组,并标出本轮最大值已“沉底”的位置:

  • 用变量 round 记录轮次,从 0 开始;每轮结束后 console.log(`Round ${round}:`, [...arr])
  • 内层循环范围要递减:for (let j = 0; j ,否则会重复比较已排好序的末尾
  • 避免在每次 if (arr[j] > arr[j+1]) 里都打印——那会混入中间状态,看不出“轮”的边界

选择排序可视化时,为什么总漏掉最后一轮交换

因为选择排序的逻辑是“每轮找最小值,与当前轮起始位置交换”,但第 n-1 轮交换后,最后一个元素自动归位,第 n 轮其实无事可做。如果循环写成 for (let i = 0; i ,最后一轮会做一次无意义的自交换(<code>arr[n-1] 和自己交换),还多打一行日志。

实操建议:

  • 外层循环上限设为 arr.length - 1,即 for (let i = 0; i
  • 每轮开始前先 console.log(`Round ${i}: searching min from index ${i}`),再打印交换后的数组
  • 注意:交换发生后才打印,不要在找最小值过程中打印——那样会误把“候选最小值”当成结果

Node.js 环境下中文对齐乱码,怎么让数组打印更易读

控制台默认等宽字体不一致、中文字符占位不同,导致多轮日志纵向不对齐,看不出数值变化趋势。这不是算法问题,是输出格式问题。

道影AI
道影AI

专业的AI短剧生成解决方案,从资产创建到视频生成,一站式智能化内容生产。

下载

简单有效的方法:

  • 不用 console.log(arr),改用 console.log(arr.map(x => x.toString().padStart(3)).join(' ')),统一数字宽度
  • 如果含负数,padStart(4) 更稳妥;若确定全是正数且 ≤99,padStart(2) 足够
  • 别用 JSON.stringify()——它带括号和逗号,破坏对齐节奏,也增加视觉噪音

浏览器 DevTools 里跑可视化,为什么 setTimeout 不按轮次延迟

想用 setTimeout 每轮停顿 500ms,结果所有日志瞬间刷完。根本原因是没正确闭包捕获轮次变量,或者把异步调用塞进了同步循环体。

典型错误写法:for (let i = 0; i { ... }, 500) —— 所有回调共享最后的 i 值。

安全做法:

  • 用立即执行函数包裹: (function(i) { setTimeout(() => { /* log round i */ }, i * 500); })(round)
  • 或改用 let 声明 + 箭头函数(ES6+ 环境):for (let round = 0; round { ... }, round * 500); }
  • 注意:setTimeout 是近似延迟,高负载时可能累积误差,别依赖它做精确节拍

真正难的不是写对算法,是让每一步变化被人眼可靠识别——对齐、节奏、信息密度,一个错位就让练习失去意义。

相关文章

全能打印神器
全能打印神器

全能打印神器是一款非常好用的打印软件,可以在电脑、手机、平板电脑等设备上使用。支持无线打印和云打印,操作非常简单,使用起来也非常方便,有需要的小伙伴快来保存下载体验吧!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

436

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

544

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

317

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

81

2025.09.10

es6新特性
es6新特性

es6新特性有:1、块级作用域变量;2、箭头函数;3、模板字符串;4、解构赋值;5、默认参数;6、 扩展运算符;7、 类和继承;8、Promise。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

106

2023.07.17

es6新特性有哪些
es6新特性有哪些

es6的新特性有:1、块级作用域;2、箭头函数;3、解构赋值;4、默认参数;5、扩展运算符;6、模板字符串;7、类和模块;8、迭代器和生成器;9、Promise对象;10、模块化导入和导出等等。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

196

2023.08.04

JavaScript ES6新特性
JavaScript ES6新特性

ES6是JavaScript的根本性升级,引入let/const实现块级作用域、箭头函数解决this绑定问题、解构赋值与模板字符串简化数据处理、对象简写与模块化提升代码可读性与组织性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

228

2025.12.24

if什么意思
if什么意思

if的意思是“如果”的条件。它是一个用于引导条件语句的关键词,用于根据特定条件的真假情况来执行不同的代码块。本专题提供if什么意思的相关文章,供大家免费阅读。

810

2023.08.22

pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法

本专题系统整理pixiv网页版官网入口及登录访问方式,涵盖官网登录页面直达路径、在线阅读入口及快速进入方法说明,帮助用户高效找到pixiv官方网站,实现便捷、安全的网页端浏览与账号登录体验。

23

2026.02.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
C++教程
C++教程

共115课时 | 17.7万人学习

微信小程序开发之API篇
微信小程序开发之API篇

共15课时 | 1.3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号