异常教程

jQuery.uniqueSort() 方法（超详细）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言：为什么需要 jQuery.uniqueSort()？

在 JavaScript 开发中，数组的排序和去重是常见的操作。例如，当用户提交搜索请求后，我们需要将返回的数据按价格、名称或时间排序，并去除重复项以保证展示结果的准确性。虽然原生 JavaScript 提供了 Array.sort() 和 Array.filter() 等方法，但它们需要手动组合逻辑，容易出错且效率较低。

jQuery 的 uniqueSort() 方法巧妙地将排序和去重结合，简化了这一过程。它既能在数组中快速找到唯一值，又能根据自定义规则进行排序，特别适合处理动态生成的列表或需要实时更新的前端场景。本文将从基础概念、核心参数、实际案例和进阶技巧等维度，深入解析这一方法。

一、基础概念：什么是 jQuery.uniqueSort()？

1.1 方法定义与功能

jQuery.uniqueSort() 是 jQuery 库提供的一个实用函数，用于对数组进行 排序（Sort） 和 去重（Unique） 的操作。其核心功能可以概括为：

  • 排序：按照指定规则对数组元素进行升序或降序排列。
  • 去重：自动过滤掉数组中的重复元素，返回唯一值的集合。

与原生 JavaScript 的 Array.sort() 和 Array.filter() 不同，uniqueSort() 在单次调用中同时完成这两个操作，减少了代码冗余。

示例：基础用法

const arr = [3, 2, 2, 5, 1, 5, 3];  
const sortedUniqueArr = jQuery.uniqueSort(arr);  
console.log(sortedUniqueArr); // 输出：[1, 2, 3, 5]

1.2 参数详解

jQuery.uniqueSort() 的参数是一个数组，支持以下形式：

jQuery.uniqueSort(array);
  • array：必填参数，需要排序和去重的原始数组。

注意：该方法会直接修改原数组，但返回一个新的排序后的数组。

二、核心原理：如何实现排序与去重？

2.1 排序机制

uniqueSort() 内部调用了 Array.sort() 方法，默认按照元素的 字符串 Unicode 码点 进行排序。例如：

const arr = [5, 3, "2", 1];  
jQuery.uniqueSort(arr); // 输出：[1, "2", 3, 5]

此时，字符串 "2" 的 Unicode 码点（50）比数字 3（51）小，因此排在前面。

如何自定义排序规则？

通过传递一个 比较函数（compareFunction），可以控制排序逻辑。例如，按数字大小排序：

const arr = [5, 3, "2", 1];  
jQuery.uniqueSort(arr, (a, b) => a - b); // 输出：[1, 3, 5, "2"]

比喻：比较函数就像一个“裁判”，告诉 uniqueSort() 如何判断两个元素的“大小”。

2.2 去重逻辑

uniqueSort() 的去重机制基于 引用值比较。如果两个元素的 值和类型 完全相同，则视为重复项。例如：

const arr = [1, "1", 1, "1"];  
jQuery.uniqueSort(arr); // 输出：[1, "1"]

此处，数字 1 和字符串 "1" 因为类型不同，不会被判定为重复。

特殊场景：对象的去重

对于对象数组，uniqueSort() 默认无法识别重复项，因为对象的引用地址不同。例如：

const arr = [{id: 1}, {id: 1}];  
jQuery.uniqueSort(arr); // 输出：[{id:1}, {id:1}]（未去重）

此时需要结合其他方法（如自定义键值比较）实现去重，稍后会详细说明。

三、与原生 JavaScript 方法的对比

3.1 对比 Array.sort()

特性jQuery.uniqueSort()Array.sort()
是否自动去重是否
默认排序规则字符串 Unicode 码点字符串 Unicode 码点
返回值新数组原数组（就地修改）

示例：原生去重与排序

// 原生方法实现类似功能  
const arr = [3, 2, 2, 5, 1];  
const sortedUniqueArr = [...new Set(arr)].sort((a, b) => a - b);

相比之下，uniqueSort() 更简洁且效率更高。

3.2 对比 Array.filter()

Array.filter() 需要手动编写去重逻辑，而 uniqueSort() 已经内置了这一功能。例如：

// 原生去重  
const arr = [3, 2, 2, 5, 1];  
const uniqueArr = arr.filter((item, index, self) =>  
  self.indexOf(item) === index  
);

uniqueSort() 则直接省略了这部分代码，适合快速开发。

四、实战案例：电商商品排序与去重

4.1 场景描述

假设我们有一个电商网站，需要展示用户收藏的商品列表。商品数据可能包含重复项（如用户误操作导致的重复收藏），且需要按价格从低到高排序。

4.2 数据准备

const products = [  
  { id: 1, name: "手机", price: 2000 },  
  { id: 2, name: "耳机", price: 200 },  
  { id: 1, name: "手机", price: 2000 }, // 重复项  
  { id: 3, name: "平板", price: 1500 },  
];

4.3 解决方案

步骤1：自定义去重逻辑

由于对象的去重需要比较其属性（如 id），我们需结合 JSON.stringify() 将对象转换为字符串进行比较：

const sortedProducts = jQuery.uniqueSort(products, (a, b) => {  
  // 按价格升序排序  
  return a.price - b.price;  
});

问题：此时 uniqueSort() 仍无法去重，因为对象的引用地址不同。

步骤2：实现对象去重

通过 JSON.stringify() 将对象序列化为字符串，再利用 Set 去重：

const uniqueProducts = jQuery.uniqueSort(  
  products,  
  (a, b) => a.price - b.price // 排序函数  
).filter((item, index, self) => {  
  const currentStr = JSON.stringify(item);  
  return index === self.findIndex(obj => JSON.stringify(obj) === currentStr);  
});

最终输出：

[  
  { id: 2, name: "耳机", price: 200 },  
  { id: 3, name: "平板", price: 1500 },  
  { id: 1, name: "手机", price: 2000 }  
]

五、进阶技巧与常见问题

5.1 处理嵌套数组

如果数组元素是数组（如 [["A", 1], ["B", 2], ["A", 1]]），可以通过修改比较函数实现去重：

const nestedArr = [["A", 1], ["B", 2], ["A", 1]];  
const result = jQuery.uniqueSort(nestedArr, (a, b) => a[1] - b[1]);  
// 输出：[["A",1], ["B",2]]

5.2 结合其他 jQuery 方法

可以与 $.grep() 或 $.map() 配合使用，例如过滤并排序：

const filtered = jQuery.uniqueSort(  
  jQuery.grep([5, 3, 3, 2], (item) => item > 2), // 过滤出大于2的元素  
  (a, b) => b - a // 降序排序  
);  
// 输出：[5, 3]

5.3 常见问题解答

Q：为什么排序结果不符合预期？

  • 检查比较函数是否正确返回 a - b（升序）或 b - a（降序）。
  • 确保元素类型一致（如数字与字符串混合会导致意外结果）。

Q：对象数组无法去重怎么办？

  • 使用 JSON.stringify() 将对象转换为字符串，再通过 Set 或自定义逻辑去重。

结论：选择 jQuery.uniqueSort() 的场景与优势

jQuery.uniqueSort() 是一个 高效、简洁 的数组处理工具，尤其适合以下场景：

  1. 需要同时完成排序和去重的操作。
  2. 开发基于 jQuery 的项目，希望减少代码量。
  3. 处理简单类型（如数字、字符串）的数组。

然而，对于复杂对象的去重或性能要求极高的场景，建议结合原生 JavaScript 的 Set 或第三方库（如 Lodash 的 _.uniqBy()）进一步优化。

通过本文的讲解和案例，相信读者已经掌握了 jQuery.uniqueSort() 的核心用法，并能根据实际需求灵活应用这一方法。下一步，可以尝试将其融入自己的项目，例如优化搜索结果展示、动态列表排序等功能，提升用户体验。

最新发布

查看更多文章