Question

我想按字母顺序显示按钮的内容，并将它们分为A-H，I-Q和R-Z等组。我的代码是用angular2 +编写的。

我的数组是-

this.dropdownList = [
      { item_text: 'Organisation' },
      {  item_text: 'EwayBill' },
      {  item_text: 'SAP' },
      {  item_text: 'Collection' },
      {  item_text: 'Cancel' },
      {  item_text: 'Generate' },
      {  item_text: 'Payments' },
      {  item_text: 'SMS' },
      {  item_text: 'Update' }
]

Answer 1

这是我想出的解决方案。对于我们知道字母范围不相交的情况，可以进行优化。

// some basic interfaces to describe types
interface Item {
  item_text: string;
}
interface LetterRange {
  first: string;
  last: string;
}

// the letter ranges
// this solution allows them to intersect
// can adjust for any letter ranges
const ranges: LetterRange[] = [
  {first: 'a', last: 'h'},
  {first: 'i', last: 'q'},
  {first: 'r', last: 'z'}
];


const dropdownList: Item[] = [
  { item_text: 'Organisation' },
  {  item_text: 'EwayBill' },
  {  item_text: 'SAP' },
  {  item_text: 'Collection' },
  {  item_text: 'Cancel' },
  {  item_text: 'Generate' },
  {  item_text: 'Payments' },
  {  item_text: 'SMS' },
  {  item_text: 'Update' }
];

// sort the words alphabetically so that they will appear in the right order
const sorted: Item[] = dropdownList.sort((a,b) => a.item_text.localeCompare(b.item_text));

// array of grouped items (each group is array as well)
const grouped: Item[][] = sorted.reduce((groups, item) => {
  const firstLetter: string = item.item_text.slice(0,1).toLowerCase();
  console.log(firstLetter);

  // run through each range and check whether the 'firstLetter' fits there
  ranges.forEach((range, index) => {
    if (firstLetter >= range.first.toLowerCase()
       && firstLetter <= range.last.toLowerCase()) {
      groups[index].push(item);
    }
  });
  return groups;
}, new Array(ranges.length).fill([])); // initialise with N empty arrays

console.log(grouped);

/*
[ 
  [ { item_text: 'Cancel' },
    { item_text: 'Collection' },
    { item_text: 'EwayBill' },
    { item_text: 'Generate' }
  ],
  [ 
    { item_text: 'Organisation' },
    { item_text: 'Payments' }
  ],
  [ { item_text: 'SAP' },
    { item_text: 'SMS' },
    { item_text: 'Update' }
  ] 
]
 */

Answer 2

使用比较功能https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

对其进行排序

dropdownList.sort(function (item1, item2) {
 if (item1.item_text < item2.item_text)
  return -1;
 if ( item1.item_text > item2.item_text)
  return 1;
 return 0;
})

或更简单：

dropdownList.sort(function (item1, item2) {
  return ('' + item1.item_text).localeCompare(item2.item_text);
})

这是复制的副本，其中包含https://stackoverflow.com/a/51169/7329611的更改（以点数计入Shog9

排序后，您可以使用切片函数https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice将数组切片成组排序后，您应该找到具有下一个较高字母字符的对象首次出现的索引，并将这些索引设置为slice（from，to）因此，对于第一步，您必须找到下一个更高字符的第一个元素，在这种情况下，其字符为'i'，因为其后跟'h'

let breakpoint = dropdownList.find(function(element) {
 return element.item_text.charAt(0).toLowerCase() === 'i';
})

接下来，您可以在以下位置切片原始数组

let slicePoint = dropdownList.indexOf(breakpoint)-1

dropdownList.slice(slicePoint);

当然，这需要数组至少包含一个以'i'开头的元素。

Answer 3

通过操纵提到的代码，我将代码制成这样的框架-

 Proceed() {


// some basic interfaces to describe types
interface Item {
  item_text: string;
}
interface LetterRange {
  first: string;
  last: string;
}

// the letter ranges
// this solution allows them to intersect
// can adjust for any letter ranges
const rangesAtoH: LetterRange[] = [
  {first: 'a', last: 'h'},

];

const rangesItoQ: LetterRange[] = [

  {first: 'i', last: 'q'},

];

const rangesRtoZ: LetterRange[] = [

  {first: 'r', last: 'z'}
];

const dropdownParameter: Item[] = [
  { item_text: 'Organisation' },
  {  item_text: 'EwayBill' },
  {  item_text: 'SAP' },
  {  item_text: 'Collection' },
  {  item_text: 'Cancel' },
  {  item_text: 'Generate' },
  {  item_text: 'Payments' },
  {  item_text: 'SMS' },
  {  item_text: 'Update' }
];

// sort the words alphabetically so that they will appear in the right order
const sorted: Item[] = this.dropdownParameter.sort((a,b) => a.item_text.localeCompare(b.item_text));

console.log("inside Proceed, Sorted = ", sorted)


// --------------------------  Array 2 - suggestion-----------------------------

// array of grouped items (each group is array as well)
const grouped: Item[][] = sorted.reduce((groups, item) => {
  const firstLetter: string = item.item_text.slice(0,1).toLowerCase();
  console.log(firstLetter);

  // run through each range and check whether the 'firstLetter' fits there
  rangesAtoH.forEach((range, index) => {
    if (firstLetter >= range.first.toLowerCase()
       && firstLetter <= range.last.toLowerCase()) {
      groups[index].push(item);
    }
  });
  return groups;
}, new Array(rangesAtoH.length).fill([])); // initialise with N empty arrays

console.log("grouped", grouped);


// ---letter range I to Q ------------------

const groupedItoQ: Item[][] = sorted.reduce((groups, item) => {
  const firstLetter: string = item.item_text.slice(0,1).toLowerCase();
  console.log(firstLetter);

  // run through each range and check whether the 'firstLetter' fits there
  rangesItoQ.forEach((range, index) => {
    if (firstLetter >= range.first.toLowerCase()
       && firstLetter <= range.last.toLowerCase()) {
      groups[index].push(item);
    }
  });
  return groups;
}, new Array(rangesItoQ.length).fill([])); // initialise with N empty arrays

console.log("grouped I to Q = ", groupedItoQ);


// ---letter range R to Z ------------------

const groupedRtoZ: Item[][] = sorted.reduce((groups, item) => {
  const firstLetter: string = item.item_text.slice(0,1).toLowerCase();
  console.log(firstLetter);

  // run through each range and check whether the 'firstLetter' fits there
  rangesRtoZ.forEach((range, index) => {
    if (firstLetter >= range.first.toLowerCase()
       && firstLetter <= range.last.toLowerCase()) {
      groups[index].push(item);
    }
  });
  return groups;
}, new Array(rangesRtoZ.length).fill([])); // initialise with N empty arrays

console.log("grouped I to Q = ", groupedRtoZ);





  }

如何在angular2 +中按字母顺序对数组进行排序，分组和分割

3 个答案: