JS 数组排序方法 – sortFun

有时候,不是因为你没有能力,也不是因为你缺少勇气,只是因为你付出的努力还太少,所以,成功便不会走向你。而你所需要做的,就是坚定你的梦想,你的目标,你的未来,然后以不达目的誓不罢休的那股劲,去付出你的努力,成功就会慢慢向你靠近。

导读:本篇文章讲解 JS 数组排序方法 – sortFun,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

在前端开发中,经常需要对数组进行排序操作。在 javascript 中,数组的排序方法是 sort(),但是它并不支持根据指定的字段进行排序。因此,我们需要自己实现一个根据指定字段进行排序的方法。本文将介绍一个基于 JavaScript 的数组排序方法 sortFun,它可以根据指定的字段进行排序,并支持升序和降序两种排序方式。

1. 排序方法 sortFun

sortFun 是一个 JavaScript 函数,可以通过传递三个参数来对数组进行排序。具体的函数定义如下:

/**
 * @method sortFun
 * @param arr 要传递的排序对象数组
 * @param name 要传递的排序字段
 * @param type 要传递的排序类型 默认升序:order 降序:desc
 */
const sortFun = (arr, name, type) => {
  const compare = (prop) => {
    return function(obj1, obj2) {
      let val1 = obj1[prop];
      let val2 = obj2[prop];
      if (val1 < val2) {
        return -1;
      } else if (val1 > val2) {
        return 1;
      } else {
        return 0;
      }
    }
  }
  if (type == 'desc') {
    return arr.sort(compare(name));
  } else {
    return arr.sort(compare(name)).reverse();
  }
}

其中,arr 是要排序的数组,name 是要排序的字段名,type 是排序类型,可以是 'order'(升序,默认值)或 'desc'(降序)。函数内部使用了 compare 函数来定义排序规则,根据指定的字段名对数组中的元素进行排序。

2. 排序规则 compare

compare 函数是 sortFun 函数内部定义的,它接受一个参数 prop,表示要根据哪个字段进行排序。具体的函数定义如下:

const compare = (prop) => {
  return function(obj1, obj2) {
    let val1 = obj1[prop];
    let val2 = obj2[prop];
    if (val1 < val2) {
      return -1;
    } else if (val1 > val2) {
      return 1;
    } else {
      return 0;
    }
  }
}

其中,obj1 和 obj2 分别表示要比较的两个对象,prop 表示要根据哪个字段进行排序。函数内部通过访问对象的属性来获取相应的值,然后进行比较。如果第一个对象的属性值小于第二个对象的属性值,则返回 -1;如果第一个对象的属性值大于第二个对象的属性值,则返回 1;如果两个对象的属性值相等,则返回 0。

3. 排序示例

使用 sortFun 函数进行排序非常简单,只需要传递要排序的数组、要排序的字段名和排序类型即可。下面是一些示例代码:

const arr = [
  { name: 'Tom', age: 20 },
  { name: 'Jerry', age: 18 },
  { name: 'John', age: 25 }
];

// 按 name 字段升序排序
const sortedArr1 = sortFun(arr, 'name', 'order');
console.log(sortedArr1); // [{ name: 'Jerry', age: 18 }, { name: 'John', age: 25 }, { name: 'Tom', age: 20 }]

// 按 age 字段升序排序
const sortedArr2 = sortFun(arr, 'age', 'order');
console.log(sortedArr2); // [{ name: 'Jerry', age: 18 }, { name: 'Tom', age: 20 }, { name: 'John', age: 25 }]

// 按 name 字段降序排序
const sortedArr3 = sortFun(arr, 'name', 'desc');
console.log(sortedArr3); // [{ name: 'Tom', age: 20 }, { name: 'John', age: 25 }, { name: 'Jerry', age: 18 }]

 从上面的示例可以看出,`sortFun` 函数非常方便易用,可以根据不同的字段和排序类型对数组进行排序。

4. 总结

本文介绍了一个 JavaScript 数组排序方法 `sortFun`,它可以根据指定的字段进行排序,并支持升序和降序两种排序方式。具体的实现原理是定义一个 `compare` 函数,根据指定的字段对数组中的元素进行比较,然后使用 JavaScript 数组对象的 `sort()` 和 `reverse()` 方法对数组进行排序和反转操作。 希望本文能够帮助大家更好地理解 JavaScript 数组的排序操作。如果有任何问题或建议,欢迎在评论区留言。

作者:Emo_TT。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由半码博客整理,本文链接:https://www.bmabk.com/index.php/post/144785.html

(0)

相关推荐

  • vue路由守卫

    导读:本篇文章讲解 vue路由守卫,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

    前端开发 2022年5月16日
    00
  • vue-cli升级失败,vue-cli2.9.6卸载不掉

    导读:本篇文章讲解 vue-cli升级失败,vue-cli2.9.6卸载不掉,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

    2022年5月17日
    00
  • 京东前端面试题

    导读:本篇文章讲解 京东前端面试题,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

    Vue 2022年11月9日
    00
  • 大事件项目(技术选型vue2、element-ui、vuex、vue-router、axios、ESLint)

    命运对每个人都是一样的,不一样的是各自的努力和付出不同,付出的越多,努力的越多,得到的回报也越多,在你累的时候请看一下身边比你成功却还比你更努力的人,这样,你就会更有动力。

    导读:本篇文章讲解 大事件项目(技术选型vue2、element-ui、vuex、vue-router、axios、ESLint),希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

    前端开发 2023年5月24日
    00
  • JavaScript获取树型数据(数组)最深层级数

    勤奋不是嘴上说说而已,而是实际的行动,在勤奋的苦度中持之以恒,永不退却。业精于勤,荒于嬉;行成于思,毁于随。在人生的仕途上,我们毫不迟疑地选择勤奋,她是几乎于世界上一切成就的催产婆。只要我们拥着勤奋去思考,拥着勤奋的手去耕耘,用抱勤奋的心去对待工作,浪迹红尘而坚韧不拔,那么,我们的生命就会绽放火花,让人生的时光更加的闪亮而精彩。

    导读:本篇文章讲解 JavaScript获取树型数据(数组)最深层级数,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

    前端开发 2023年4月28日
    00
  • TypeScript 深水区:3 种类型来源和 3 种模块语法

    TypeScript 给 javaScript 添加了一套类型语法,我们声明变量的时候可以给变量加上类型信息,这样编译阶段就可以检查出变量使用的对不对,也就是类型检查。 给变量添加…

    2023年2月17日
    00
  • 利用LRU策略实现Axios请求缓存

    导读:本篇文章讲解 利用LRU策略实现Axios请求缓存,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

    前端开发 2022年5月23日
    00
  • Koa之洋葱模型分析

    作者:前端小帅 掘金:https://juejin.cn/post/7095566716347875336/ 博客:https://ssscode.com/pages/d8b0e2…

    2023年2月19日
    00
  • vue+element动态设置el-menu导航,刷新页面保持当前菜单选中项及路由

    导读:本篇文章讲解 vue+element动态设置el-menu导航,刷新页面保持当前菜单选中项及路由,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

    前端开发 2023年1月18日
    00
  • PostMan——安装使用教程(图文详解)

    导读:本篇文章讲解 PostMan——安装使用教程(图文详解),希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

    前端开发 2022年5月16日
    00

发表回复

登录后才能评论