【问题标题】:How to work with js arrays, finding and grouping items?如何使用 js 数组,查找和分组项目?
【发布时间】:2013-03-07 20:46:49
【问题描述】:

在 Google 上搜索了一番,但无法弄清楚如何处理这个问题。

我有/计划了一份物品清单。

var list1 = [
  [141,'AAA', 'A Group'],
  [262,'BBB', 'B Group'],
  [345,'CCC', 'B Group'],
  [136,'DDD'],
  [095,'EEE', 'A Group'],
  [175,'FFF'], and so on...
];

我的目标是打印这些项目。 先分组,按字母顺序排列。之后无分组。

所有项目按字母顺序排列。

最终结果会是这样的:

<div>

<h2>A Group</h2>
<ul class="group">
    <li>
        <img src="/141">
        <h3>AAA</h3>
    </li>
    <li>
        <img src="/095">
        <h3>EEE</h3>
    </li>
</ul>

<h2>B Group</h2>
<ul class="group">
    <li>
        <img src="/262">
        <h3>BBB</h3>
    </li>
    <li>
        <img src="/345">
        <h3>CCC</h3>
    </li>
</ul>

<h2>No group</h2>
<ul class="non-group">
    <li>
        <img src="/136">
        <h3>DDD</h3>
    </li>
    <li>
        <img src="/175">
        <h3>FFF</h3>
    </li>
</ul>

</div>

对如何解决这个问题有什么想法吗?


找到了这个,https://stackoverflow.com/a/7596924/543365

非常接近我可以使用的东西。不过,我无法将它弯曲以供我使用。

【问题讨论】:

  • @tracevipin 基于他推荐的链接,我认为他正试图找出与shiftunshift 合作的东西。对于一个多维数组来说,这将导致一些混乱的检查堆栈以使其全部正常工作。
  • 请准确说明您想要哪种排序方式。您希望在每个组内进行排序。或者按组名对组本身进行排序..
  • 我想要 A-Z 中的组。项目,分组与否,A-Z。

标签: javascript sorting filter grouping


【解决方案1】:

我建议研究 underscorejs,但是,如果您希望使用纯 javascript:

1.) 对列表进行排序,使包含组的项目排在第一位。

var i = 0,
    group_arr = [];
for (i = 0; i < list1.length; i++) {
    if (list1[i][2] !== undefined) {
        group_arr.append(list1.splice(i, 1)[0]);
    }
}

2.) 现在所有有组的项目都在group_arr 中,没有的项目在list1 中。我们现在需要对group_arr 进行排序,使其按组按字母顺序排列:

group_arr.sort(function (item1, item2) {
    return (item1[2] > item2[2]) ? 1 : -1;
});

请注意,我们可以根据任意条件对group_arr 进行排序。如果您想按第二个条目的字母顺序排序,只需将比较器函数中传递给 Array.prototype.sort 的索引。

3.) 现在group_arr 中的项目按组按字母顺序排列,并且包含具有组的项目。 list 1 中的项目没有组且未排序。您现在可以遍历每个数组,创建 DOM 元素,然后插入它们。

【讨论】:

  • 纯 JS 不是必需的 :)
【解决方案2】:

Vinay 的回答很棒。像这样的东西也应该起作用:

var list1 = [
    [141,'AAA', 'A Group'],
    [262,'BBB', 'B Group'],
    [345,'CCC', 'B Group'],
    [136,'DDD'],
    [095,'EEE', 'A Group'],
    [175,'FFF']
];

var list1_new = list1.sort(function(a, b){
    if (a[2] == b[2]) {
        return 0; // Do nothing
    }

    if (a[2] > b[2]) {
        return 1; // Put a AFTER b
    }

    if (a[2] < b[2]) {
        return -1; // Put a BEFORE b
    }
});

console.log(list1_new);

在检查索引2(组)后,您也可以重新运行sort()函数来处理其他值,将它们一个接一个地排序。

祝你好运!

【讨论】:

    【解决方案3】:

    我同意,Vinay 的回答很好,我也会建议下划线并让你成为fiddle

    var groups = _.filter(list1,function(entry){
        return entry.length == 3;
    });
    
    var groupsSorted = _.sortBy(groups,function(entry){
        return entry[2] + entry[1]; //sort by group name and second element
    });
    

    【讨论】:

    • sort() 比较的好处是(基于您第一次检查长度是否等于 3),即 undefined == undefined,使用 a[2] == b[2] 可以不用担心查看如果他们都没有第三个索引键。好回答,喜欢! :)
    • 这很简洁,只需要分组。
    猜你喜欢
    • 2020-05-23
    • 1970-01-01
    • 1970-01-01
    • 2018-04-06
    • 2020-09-03
    • 1970-01-01
    • 1970-01-01
    • 2017-02-21
    • 1970-01-01
    相关资源
    最近更新 更多