资讯专栏INFORMATION COLUMN

数组多重筛选条件排序方法

rainyang / 1829人阅读

摘要:根据一个或者多个属性对数组进行排序,支持嵌套的属性。而且可以在每个条件中指定排序的方向,并支持传入比较函数。

arr-sort
根据一个或者多个属性对数组进行排序,支持嵌套的属性。而且可以在每个条件中指定排序的方向,并支持传入比较函数。
安装

采用 npm 安装:

$ npm install --save arr-sort

采用 yarn 安装:

$ yarn add arr-sort
用法

通过给定的对象属性进行排序:

var arrSort = require("arr-sort");

arrSort([{foo: "y"}, {foo: "z"}, {foo: "x"}],[{attr:"foo"}]);
//=> [{foo: "x"}, {foo: "y"}, {foo: "z"}]

逆向排序

arrSort([{foo: "y"}, {foo: "z"}, {foo: "x"}],[{attr:"foo", asc: false}]);
//=> [{foo: "z"}, {foo: "y"}, {foo: "x"}]
参数
arrSort(array, comparisonArgs);

array: { Object Array } 待排序的数组

comparisonArgs: { Object Array } 一个或者多个对象组成的数组。 结构如下:{ "attr": attr, "asc": asc }

attr: { String } 对象属性

asc: { Boolean | Function } 指定排序的方向

true: 升序(默认值)

false: 降序

function: 传入的比较函数

注意

如何没有提供 attr 属性, 则这次的排序会自动跳过

attr 属性值类型可以是 string 或者 number

如果是 string, 我们采用 localeCompare 去比较排序

如果是 number, 我们直接比较值的大小

如果提供的比较函数没有返回值,则这次的排序会自动跳过

例子

1. 多重条件排序

var arrSort = require("arr-sort");

var array = [
  { foo: "bbb", num: 4,  flag: 2 },
  { foo: "aaa", num: 3,  flag: 1 },
  { foo: "ccc", num: -6, flag: 2 },
  { foo: "ccc", num: 8,  flag: 2 },
  { foo: "bbb", num: 2,  flag: 4 },
  { foo: "aaa", num: -3, flag: 4 }
];

// sort by `flag`, then `foo`, then `num`
var result = arrSort(array,
    [{
        attr: "flag",
        asc: true
    },
    {
        attr: "foo",
        asc: false
    },
    {
        attr: "num",
        asc: true
    }]
);

console.log(result);
// [ { foo: "aaa", num: 3,  flag: 1},
//   { foo: "ccc", num: -6, flag: 2},
//   { foo: "ccc", num: 8,  flag: 2},
//   { foo: "bbb", num: 4,  flag: 2},
//   { foo: "bbb", num: 2,  flag: 4},
//   { foo: "aaa", num: -3, flag: 4} ]

2. 嵌套的属性排序

var arrSort = require("arr-sort");

var array = [
  { locals: { foo: "bbb", num: 4 },  flag: 2},
  { locals: { foo: "aaa", num: 3 },  flag: 1},
  { locals: { foo: "ccc", num: -6 }, flag: 2},
  { locals: { foo: "ccc", num: 8 },  flag: 2},
  { locals: { foo: "bbb", num: 2 },  flag: 4},
  { locals: { foo: "aaa", num: -3 }, flag: 4},
];

// sort by `flag`, then `locals.foo`, then `locals.num`
var result = arrSort(array,
    [{
        attr: "flag",
        asc: true
    },
    {
        attr: "locals.foo",
        asc: false
    },
    {
        attr: "locals.num",
        asc: true
    }]
);

console.log(result);
// [ { locals: { foo: "aaa", num: 3 },  flag: 1},
//   { locals: { foo: "ccc", num: -6 }, flag: 2},
//   { locals: { foo: "ccc", num: 8 },  flag: 2},
//   { locals: { foo: "bbb", num: 4 },  flag: 2},
//   { locals: { foo: "bbb", num: 2 },  flag: 4},
//   { locals: { foo: "aaa", num: -3 }, flag: 4} ]

3. 传入比较函数排序

如果提供了比较函数,数组会根据其返回值排序。比较函数具体可以参考docs

var arrSort = require("arr-sort");

var array = [
  { locals: { foo: "bbb", num: 4 },  flag: -2},
  { locals: { foo: "aaa", num: 3 },  flag: 1},
  { locals: { foo: "ccc", num: -6 }, flag: 2},
  { locals: { foo: "ccc", num: 8 },  flag: 2},
  { locals: { foo: "bbb", num: 2 },  flag: 4},
  { locals: { foo: "aaa", num: -3 }, flag: 4},
];

// sort by `flag`, then `locals.foo`, then `locals.num`
var result = arrSort(array,
    [{
        attr: "flag",
        asc: function(a,b){return (Math.abs(a) - Math.abs(b))}
    },
    {
        attr: "locals.foo",
        asc: false
    },
    {
        attr: "locals.num",
        asc: true
    }]
);

console.log(result);
// [ { locals: { foo: "aaa", num: 3 },  flag: 1},
//   { locals: { foo: "ccc", num: -6 }, flag: 2},
//   { locals: { foo: "ccc", num: 8 },  flag: 2},
//   { locals: { foo: "bbb", num: 4 },  flag: -2},
//   { locals: { foo: "bbb", num: 2 },  flag: 4},
//   { locals: { foo: "aaa", num: -3 }, flag: 4} ]
关于 相关项目

arr-del: 一次性删除数组指定index的元素 | homepage

集成测试

跑集成测试是一个非常好的熟悉一个项目及其API的方法。你可以通过以下命令安装依赖并跑测试:

$ npm install && npm test
作者

tywei90

github/tywei90

blog/tywei90

许可证

Copyright © 2018, tywei90.
Released under the MIT License.

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/107520.html

相关文章

  • 集合数据处理(C#、JavaScript 和 Java)

    摘要:系列公用委托都用于委托带有返回值的的方法,所有都是最后一个参数代表返回值类型。的字面对象据称也是哈希实现。 Java 丢了好多年,最近在拣起来,首先当然是了解这么多年来它的变化,于是发现了 Java 8 的java.util.stream。在学习和试验的过程中,相比较于 C# 和 javascript,有那么些心得,作文以记之。 早些时间写过一篇《ES6 的 for..of 和 Ge...

    zacklee 评论0 收藏0
  • 集合数据处理(C#、JavaScript 和 Java)

    摘要:系列公用委托都用于委托带有返回值的的方法,所有都是最后一个参数代表返回值类型。的字面对象据称也是哈希实现。 Java 丢了好多年,最近在拣起来,首先当然是了解这么多年来它的变化,于是发现了 Java 8 的java.util.stream。在学习和试验的过程中,相比较于 C# 和 javascript,有那么些心得,作文以记之。 早些时间写过一篇《ES6 的 for..of 和 Ge...

    sherlock221 评论0 收藏0
  • Vue.js 实践(2):实现多条件筛选、搜索、排序及分页的表格功能

    摘要:基础布局的中主要为部分,分别是用于搜索筛选和分页的表单控件用于排序表格的表头以及用于展示数据的。这也是前瞻发布之后,提出废弃部分功能后许多人反应较为强烈的原因。 与上周的第一篇实践教程一样,在这篇文章中,我将继续从一种常见的功能——表格入手,展示Vue.js中的一些优雅特性。同时也将对filter功能与computed属性进行对比,说明各自的适用场景,也为vue2.0版本中即将删除的部...

    Profeel 评论0 收藏0
  • Vue.js 实践(2):实现多条件筛选、搜索、排序及分页的表格功能

    摘要:基础布局的中主要为部分,分别是用于搜索筛选和分页的表单控件用于排序表格的表头以及用于展示数据的。这也是前瞻发布之后,提出废弃部分功能后许多人反应较为强烈的原因。 与上周的第一篇实践教程一样,在这篇文章中,我将继续从一种常见的功能——表格入手,展示Vue.js中的一些优雅特性。同时也将对filter功能与computed属性进行对比,说明各自的适用场景,也为vue2.0版本中即将删除的部...

    ChanceWong 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<