排序数组和索引答案

【问题标题】：Sorting arrays and indexes排序数组和索引
【发布时间】：2016-06-03 04:03:39
【问题描述】：

我在对固定数据表进行排序时遇到问题。我试着用这个例子： https://github.com/facebook/fixed-data-table/blob/master/examples/old/SortExample.js

当我第一次按名称降序排序时，它会成功排序并将前两行带到这些值：

id:11 姓名：玛丽

id:1 姓名：玛丽

....

之后我按名称升序排序，然后我再次按名称降序排序。

它带来了前两列这些值：

id:1 姓名：玛丽

id:11 姓名：玛丽

....

为什么会改变同名值的索引？ (id:11 和 id:1)

我每次都需要相同的排序索引。有什么问题，我该如何解决？

var SortTypes = {
  ASC: 'ASC',
  DESC: 'DESC',
};

function renderDate(/*object*/ cellData) {
  return <span>{cellData.toLocaleString()}</span>;
}

var SortExample = React.createClass({
  getInitialState() {
    return {
      rows: [{"id":"1","name":"Mary"},{"id":"2","name":"Felix"},
                   {"id":"3","name":"Mary"},{"id":"4","name":"Felix"},
                   {"id":"5","name":"Mary"},{"id":"6","name":"Felix"},
                   {"id":"7","name":"Mary"},{"id":"8","name":"Felix"},
                   {"id":"9","name":"Mary"},{"id":"10","name":"Felix"},
                   {"id":"11","name":"Mary"},{"id":"12","name":"Felix"},
                   {"id":"13","name":"Mary"},{"id":"14","name":"Felix"},
                   {"id":"15","name":"Mary"},{"id":"16","name":"Felix"},
                   {"id":"17","name":"Mary"},{"id":"18","name":"Felix"} ,
                   {"id":"19","name":"Mary"},{"id":"20","name":"Felix"}],sortBy: 'id',
      sortDir: null,
    };
  },

  _rowGetter(rowIndex) {
    return this.state.rows[rowIndex];
  },

  _sortRowsBy(cellDataKey) {
    var sortDir = this.state.sortDir;
    var sortBy = cellDataKey;
    if (sortBy === this.state.sortBy) {
      sortDir = this.state.sortDir === SortTypes.ASC ? SortTypes.DESC : SortTypes.ASC;
    } else {
      sortDir = SortTypes.DESC;
    }

    var rows = this.state.rows.slice();
    rows.sort((a, b) => {
      var sortVal = 0;
      if (a[sortBy] > b[sortBy]) {
        sortVal = 1;
      }
      if (a[sortBy] < b[sortBy]) {
        sortVal = -1;
      }

      if (sortDir === SortTypes.DESC) {
        sortVal = sortVal * -1;
      }

      return sortVal;
    });

    this.setState({
      rows,
      sortBy,
      sortDir,
    });
  },

  _renderHeader(label, cellDataKey) {
    return (
      <a onClick={this._sortRowsBy.bind(null, cellDataKey)}>{label}</a>
    );
  },

  render() {
    var sortDirArrow = '';

    if (this.state.sortDir !== null){
      sortDirArrow = this.state.sortDir === SortTypes.DESC ? ' ↓' : ' ↑';
    }

    return (
      <Table
        rowHeight={50}
        rowGetter={this._rowGetter}
        rowsCount={this.state.rows.length}
        headerHeight={50}
        width={1000}
        height={500}
        {...this.props}>
        <Column
          headerRenderer={this._renderHeader}
          label={'id' + (this.state.sortBy === 'id' ? sortDirArrow : '')}
          width={100}
          dataKey='id'
        />
        <Column
          headerRenderer={this._renderHeader}
          label={'First Name' + (this.state.sortBy === 'name' ? sortDirArrow : '')}
          width={200}
          dataKey='name'
        />

      </Table>
    );
  },
});









ReactDOM.render(
 <SortExample/>,
  document.getElementById('app')
)

【问题讨论】：

但根据您的标准排序是正确的。如果您希望其他字段作为辅助排序，则需要指定
是的，按名称排序基本上是正确的。但是它会更改同名的索引。为什么会更改或在对相同名称进行排序时采用哪些标准？
可能是因为它第二次排序的数组与第一次排序的顺序不同
是的，我想是的。但是解决方案是什么？其实我正在寻找它。
解决什么？您正在根据标准获得正确的排序

标签： javascript reactjs underscore.js fixed-data-table

【解决方案1】：

对于稳定的排序，您需要更多排序参数，例如此解决方案，它首先按name 排序，然后按id。

var rows = [{ "id": "1", "name": "Mary" }, { "id": "2", "name": "Felix" }, { "id": "3", "name": "Mary" }, { "id": "4", "name": "Felix" }, { "id": "5", "name": "Mary" }, { "id": "6", "name": "Felix" }, { "id": "7", "name": "Mary" }, { "id": "8", "name": "Felix" }, { "id": "9", "name": "Mary" }, { "id": "10", "name": "Felix" }, { "id": "11", "name": "Mary" }, { "id": "12", "name": "Felix" }, { "id": "13", "name": "Mary" }, { "id": "14", "name": "Felix" }, { "id": "15", "name": "Mary" }, { "id": "16", "name": "Felix" }, { "id": "17", "name": "Mary" }, { "id": "18", "name": "Felix" }, { "id": "19", "name": "Mary" }, { "id": "20", "name": "Felix" }];

rows.sort(function (a, b) {
    return a.name.localeCompare(b.name) || a.id - b.id;
});

document.write('<pre>' + JSON.stringify(rows, 0, 4) + '</pre>');

【讨论】：