当前位置:首页 > JavaScript

js实现orderby

2026-03-14 20:27:51JavaScript

实现 JavaScript 的 orderBy 功能

在 JavaScript 中,可以通过自定义排序函数或使用 Array.prototype.sort() 方法实现类似 orderBy 的功能。以下是几种常见的实现方式:

基础数组排序

对简单数组进行升序或降序排序:

const numbers = [3, 1, 4, 1, 5, 9];
// 升序
numbers.sort((a, b) => a - b); // [1, 1, 3, 4, 5, 9]
// 降序
numbers.sort((a, b) => b - a); // [9, 5, 4, 3, 1, 1]

对象数组按属性排序

对对象数组根据某个属性值排序:

const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 20 }
];
// 按 age 升序
users.sort((a, b) => a.age - b.age);
// 按 name 字母顺序
users.sort((a, b) => a.name.localeCompare(b.name));

多条件排序

实现先按一个属性排序,再按另一个属性排序:

const items = [
  { name: 'Apple', category: 'Fruit', price: 1 },
  { name: 'Orange', category: 'Fruit', price: 2 },
  { name: 'Carrot', category: 'Vegetable', price: 1 }
];
items.sort((a, b) => {
  // 先按 category 排序
  if (a.category !== b.category) {
    return a.category.localeCompare(b.category);
  }
  // 相同 category 再按 price 排序
  return a.price - b.price;
});

通用 orderBy 函数

封装一个通用的 orderBy 函数,支持多字段排序:

function orderBy(array, keys, orders = 'asc') {
  return array.sort((a, b) => {
    if (!Array.isArray(keys)) keys = [keys];
    if (!Array.isArray(orders)) orders = [orders];

    for (let i = 0; i < keys.length; i++) {
      const key = keys[i];
      const order = orders[i] || 'asc';
      const compare = order === 'desc' ? -1 : 1;

      if (a[key] > b[key]) return compare;
      if (a[key] < b[key]) return -compare;
    }
    return 0;
  });
}

// 使用示例
const data = [
  { name: 'Alice', age: 25, score: 90 },
  { name: 'Bob', age: 30, score: 85 },
  { name: 'Charlie', age: 20, score: 95 }
];
// 按 age 升序
orderBy(data, 'age');
// 按 score 降序
orderBy(data, 'score', 'desc');
// 多字段排序:先按 age 升序,再按 score 降序
orderBy(data, ['age', 'score'], ['asc', 'desc']);

使用 Lodash 库

如果需要更强大的排序功能,可以使用 Lodash 的 _.orderBy 方法:

js实现orderby

const _ = require('lodash');
const sorted = _.orderBy(
  [
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 30 },
    { name: 'Charlie', age: 20 }
  ],
  ['age'], // 排序字段
  ['desc'] // 排序顺序
);

这些方法涵盖了 JavaScript 中实现排序功能的不同场景,从简单到复杂,可以根据实际需求选择合适的实现方式。

标签: jsorderby
分享给朋友:

相关文章

js分组实现

js分组实现

分组实现方法 在JavaScript中,可以通过多种方式实现数组或对象的分组操作。以下是几种常见的方法: 使用Array.prototype.reduce() 通过reduce方法可以轻松实现数组分…

使用js实现

使用js实现

使用JavaScript实现 JavaScript可以通过Math.random()函数生成随机数,结合其他方法可以实现多种随机数生成需求。 // 生成0到1之间的随机小数 const random…

节流js实现

节流js实现

节流(Throttle)的实现原理 节流是一种限制函数执行频率的技术,确保函数在一定时间间隔内最多执行一次。适用于高频触发事件(如滚动、输入、窗口调整等)的场景。 基础实现方式 使用时间戳判断是否执…

js实现显示隐藏

js实现显示隐藏

显示隐藏的实现方法 在JavaScript中,实现元素的显示和隐藏可以通过多种方式完成。以下是几种常见的方法: 修改CSS的display属性 通过改变元素的display属性可以在none(隐藏)…

js分页实现

js分页实现

分页的基本原理 分页的核心是通过计算当前页码和数据偏移量,从服务器或本地数据中截取对应范围的数据进行展示。通常需要以下参数:当前页码(currentPage)、每页条数(pageSize)、总数据量(…

js 实现mvc

js 实现mvc

MVC 模式简介 MVC(Model-View-Controller)是一种软件设计模式,将应用程序分为三个核心组件:模型(Model)处理数据和业务逻辑,视图(View)负责展示数据,控制器(Con…