Javascript如何实现排序_如何自定义比较函数?

Array.prototype.sort()默认按字符串Unicode码点排序,数字数组需用(a,b)=>a-b升序或b-a降序;对象数组可按属性用减法或localeCompare排序,多级排序用逻辑或实现优先级。

javascript如何实现排序_如何自定义比较函数?

JavaScript 中的 Array.prototype.sort() 默认按字符串 Unicode 码点排序,直接对数字数组使用会导致 [10, 2, 33, 4] 排成 [10, 2, 33, 4](因为转成字符串后 “10”

比较函数的基本规则

比较函数接收两个参数 ab,返回一个数字:

返回值 :表示 a 应排在 b 前面返回值 === 0:表示 ab 位置不变(相等)返回值 > 0:表示 a 应排在 b 后面

最简写法就是 (a, b) => a - b(升序),(a, b) => b - a(降序)——仅适用于数字。

对数字数组升序/降序

直接用减法最安全高效:

立即学习“Java免费学习笔记(深入)”;

[5, 1, 9, 3].sort((a, b) => a - b);     // [1, 3, 5, 9][5, 1, 9, 3].sort((a, b) => b - a);     // [9, 5, 3, 1]

⚠️注意:不要写成 return a > b,那返回布尔值,会被转为 0 或 1,导致错误排序。

对对象数组按属性排序

比如按用户年龄升序,或按姓名字母序(忽略大小写):

const users = [  { name: 'Alice', age: 32 },  { name: 'bob', age: 25 },  { name: 'Charlie', age: 28 }];

// 按 age 升序users.sort((a, b) => a.age - b.age);

// 按 name 字母序(不区分大小写)users.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()));

String.prototype.localeCompare() 是推荐的字符串比较方法,比 a.name > b.name 更可靠,能正确处理中文、重音字符等。

多级排序(先按 A,再按 B)

用逻辑或 || 实现优先级:第一级相等时才比较第二级:

const items = [  { category: 'fruit', price: 3.5 },  { category: 'veg',   price: 2.1 },  { category: 'fruit', price: 2.9 }];

// 先按 category 升序,category 相同时按 price 升序items.sort((a, b) => {const catDiff = a.category.localeCompare(b.category);return catDiff !== 0 ? catDiff : a.price - b.price;});

这种结构清晰、可读性强,也容易扩展到三级或更多级。

以上就是Javascript如何实现排序_如何自定义比较函数?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1544128.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 15:38:47
下一篇 2025年12月12日 00:32:44

相关推荐

  • 什么是javascript纯函数_它如何带来可预测性?

    纯函数是只依赖输入参数且无副作用的JavaScript函数,给定相同输入必返回相同输出,不修改外部状态;其核心特征为无副作用和输出仅由输入决定,适用于数据转换等需稳定性的场景。 纯函数是JavaScript中一种特定类型的函数,它只依赖于输入参数,且不产生任何副作用。这种设计让函数的行为变得完全可预…

    好文分享 2025年12月21日
    000
  • 为什么javascript需要严格模式_它能解决哪些潜在问题

    严格模式是JavaScript的限制性执行环境,通过”use strict”启用,能提前暴露隐性错误、防止意外创建全局变量、禁止静默失败操作、限制易错语法,并为ES6+特性提供兼容性基础。 JavaScript 严格模式(Strict Mode)不是新语言,而是对 JavaS…

    2025年12月21日
    000
  • JavaScript中的“this”关键字如何理解?

    JavaScript中this的指向由调用时决定,而非定义时;普通调用指向全局或undefined,对象方法调用指向该对象,构造调用指向新实例,箭头函数继承外层this。 JavaScript中的this不是指向函数本身,也不是定义时绑定的,而是**调用时决定的**——它指向函数执行时的“当前对象”…

    2025年12月21日
    000
  • javascript模块打包是什么_Webpack和Vite有何不同?

    Vite开发时免打包、按需编译,启动瞬时且HMR精准;Webpack全量构建、兼容性广但冷启动慢;新项目优先Vite,老项目或需深度定制选Webpack。 JavaScript模块打包,就是把项目里分散的JS文件、CSS、图片等资源,按依赖关系组织起来,合并或分片生成浏览器能加载运行的静态文件。核心…

    2025年12月21日
    000
  • javascript的Canvas是什么_如何绘制图形和动画?

    Canvas是HTML绘图元素,需三步使用:获取画布、获取2D上下文、调用绘图方法;图形绘制分直接矩形与路径类,动画靠requestAnimationFrame循环清空重绘;注意尺寸设置、坐标原点、beginPath()调用及上下文状态管理。 Canvas 是 HTML 中的一个绘图元素,它提供了一…

    2025年12月21日
    000
  • javascript模块打包是什么_为什么需要Webpack这样的工具?

    JavaScript模块打包是将多个JS及非JS资源按依赖合并转换优化为少量浏览器可运行文件的过程;它解决ES6模块的局限性,支持Loader/Plugin扩展、代码分割、Tree Shaking等工程化能力。 JavaScript模块打包,就是把多个JS文件(可能还有CSS、图片等资源)按依赖关系…

    2025年12月21日
    000
  • javascript中的国际化API是什么_如何实现多语言支持

    JavaScript国际化依赖Intl对象进行数字、日期、货币等格式化,不处理文本翻译;需结合ICU消息格式资源包、语言检测与动态切换逻辑实现完整本地化。 JavaScript 中的国际化 API 主要是 Intl 对象及其配套接口(如 Intl.Locale、Intl.NumberFormat、I…

    2025年12月21日
    000
  • 如何解构赋值_Javascript的语法是什么

    解构赋值是JavaScript中按位置(数组)或属性名(对象)提取值并赋给变量的语法,支持跳过、剩余元素、默认值、重命名、嵌套及函数参数解构,但需注意括号包裹、null/undefined报错及保留字限制。 解构赋值是 JavaScript 中一种简洁提取数组或对象中值的语法,它让你不用通过下标或属…

    2025年12月21日
    000
  • 如何掌握javascript闭包_你真的理解javascript的作用域链吗

    闭包是函数与其定义时词法作用域中变量的组合,由作用域链保障变量可访问;作用域链在函数定义时确定,按嵌套层级向上查找变量,与调用位置无关。 掌握 JavaScript 闭包,关键不是死记定义,而是看懂函数如何“记住”它被创建时的环境——这背后起作用的,就是作用域链。 作用域链:函数执行时找变量的“路线…

    2025年12月21日
    000
  • 什么是JavaScript的柯里化函数_它如何在函数式编程中应用?

    柯里化是将多参函数转换为一系列单参函数的过程,每次调用返回新函数并利用闭包固化已传参数,直至集齐所有参数才执行原逻辑;其核心在于闭包保存与length判断。 柯里化(Currying)是将一个接收多个参数的函数,转换为一系列只接收一个参数的函数的过程。它不是简单地“分次传参”,而是每次调用都返回一个…

    2025年12月21日
    000
  • 如何使用JavaScript进行数据可视化_Chart.js和D3.js有什么区别呢

    Chart.js适合快速实现常规图表,D3.js适合高度定制化复杂可视化;前者开箱即用、响应式强但扩展性有限,后者掌控底层、生态丰富但学习成本高。 Chart.js 适合快速画常见图表,D3.js 更灵活但学习成本高,选哪个取决于你的需求:要快上线就用 Chart.js,要高度定制或处理复杂交互就上…

    2025年12月21日
    000
  • 如何用JavaScript实现一个分页组件_如何计算页码和更新数据?

    分页组件核心是总数据量、每页数量与当前页码三者实时同步;通过数组切片获取本页数据,按规则生成省略式页码导航,并响应切换更新视图与页码,需校验边界条件。 分页组件的核心是根据总数据量、每页条数和当前页码,算出要显示的数据片段,并动态生成页码导航。关键不在渲染本身,而在三组关系的实时同步:总数据 ↔ 每…

    2025年12月21日
    000
  • JavaScript模块化开发有哪些方法?

    JavaScript模块化开发主要有四种方法:1. CommonJS(Node.js默认,同步加载,导出值拷贝);2. AMD(浏览器异步设计,依赖前置);3. CMD(就近依赖,延迟加载);4. ES6 Module(标准规范,静态分析、实时绑定、原生支持,推荐新项目使用)。 JavaScript…

    2025年12月21日
    000
  • javascript如何实现惰性函数_它有什么优点

    惰性函数是在首次调用时完成初始化并重写自身、后续调用直接执行优化逻辑的函数;它通过首次判断环境后替换函数引用,避免重复检测开销,适用于高频调用且判断逻辑较重的场景。 惰性函数(Lazy Function)是指在**首次调用时才完成初始化或重写自身**的函数,后续调用直接走优化后的逻辑。它不是“延迟执…

    2025年12月21日
    000
  • javascript如何实现编辑器_CodeMirror和Monaco Editor有什么区别

    选CodeMirror适合轻量嵌入,Monaco适合深度IDE功能。CodeMirror体积小(约100KB)、模块化、易定制但需手动集成LSP;Monaco功能完整(开箱支持LSP、类型提示等),但体积大(1.5MB+)、定制受限、构建配置复杂。 CodeMirror 和 Monaco Edito…

    2025年12月21日
    000
  • JavaScript模块化是什么_ES6模块和CommonJS有什么区别呢

    JavaScript模块化将代码拆分为独立可复用单元,ES6模块(import/export,编译时加载、实时引用)与CommonJS(require/module.exports,运行时加载、值拷贝)核心区别在于设计目标和运行机制不同。 JavaScript模块化是把代码按功能拆分成独立、可复用的…

    2025年12月21日
    000
  • javascript如何实现拖放功能_需要处理哪些事件?

    JavaScript拖放功能依赖Drag and Drop API,需监听dragstart、dragend、dragenter、dragover、drop共6个事件,关键前提是设置draggable=”true”并在dragover中调用preventDefault()。 …

    2025年12月21日
    000
  • javascript中的命令行工具如何开发_可以调用哪些系统API

    JavaScript 借助 Node.js 可开发 CLI 工具:需添加 #!/usr/bin/env node、设可执行权限,用 process.argv 或 commander 解析参数,fs 操作文件,child_process 调用外部命令,os 获取系统信息,注意权限限制与跨平台适配。 J…

    2025年12月21日
    000
  • async和await是什么_如何简化异步代码?

    async/await 是 JavaScript 中基于 Promise 的异步语法糖,使异步代码更线性易读:async 函数自动返回 Promise,await 在 async 内暂停执行并等待 Promise 完成。 async 和 await 是 JavaScript 中处理异步操作的语法糖,…

    2025年12月21日
    000
  • javascript_包管理工具比较

    目前主流JavaScript包管理工具为npm、yarn和pnpm。npm生态成熟,开箱即用;yarn安装快,依赖一致性强;pnpm磁盘效率高,适合大型项目。选择需根据项目需求与团队习惯,当前趋势倾向于pnpm。 JavaScript 的包管理工具在现代前端开发中扮演着核心角色,帮助开发者管理项目依…

    2025年12月21日
    000

发表回复

登录后才能评论
关注微信