将对象按降序排序，在更改时重新添加DOM。

Question

我有一个我正在开发的react应用程序，我需要在修改之后再次更新DOM --根据段落中的字数从最高到最低对数字进行排序。

到目前为止这看起来是这样的：

import "./styles.css";
// this represents a couple of paragraphs where we count the words
import text from "./text.js";

export default function App() {
  let allTheWords = text.split(" ");
  let countData = [];
  let theWordCount = {};
  const createTable = () => {
    for (const num of allTheWords) {
      theWordCount[num] = theWordCount[num] ? theWordCount[num] + 1 : 1;
    }
    for (const property in theWordCount) {
      countData.push(
        <tr key={property}>
          <td>{property}</td>
          <td>{theWordCount[property]}</td>
        </tr>
      );
    }
  };
  createTable();
  // let's sort the words, but we need to go from high to small
  const sortWords = () => {
    theWordCount = Object.entries(theWordCount)
      .sort(([, a], [, b]) => a - b)
      .reduce((r, [k, v]) => ({ ...r, [k]: v }), {});
    console.log("OKAY I THINK WE SORTED: " + JSON.stringify(theWordCount));
    createTable();
  };
  return (
    <div>
      <button onClick={sortWords}>SORT WORDS</button>
      <table>
        <tbody>
          <tr>
            <th>Word</th>
            <th>Count</th>
          </tr>
          {countData}
        </tbody>
      </table>
    </div>
  );
}

此块的输出如下：

OKAY I THINK WE SORTED: {"10":1,"27":1,"1815":1,"1842":1,"1852":1,"Augusta":1,"King,":1,"(née":1,"Byron;":1,"December":1,"–":1,"November":1,"1852)":1,"English":1,"writer,":1,"chiefly":1,"proposed":1,"mechanical":1,"general-purpose":1,"computer,":1,"recognise":1,"machine":1,"had":1,"applications":1,"pure":1,"calculation,":1,"have":1,"published":1,"intended":1,"As":1,"result,":1,"regarded":1,"programmer.[2][3][4]\n\nAda":1,"child":1,"poet":1,"Lord":1,"Lady":1,"Byron.[5]":1,"All":1,"Byron's":1,"children":1,"were":1,"wedlock":1,"women.[6]":1,"separated":1,"his":1,"wife":1,"month":1,"after":1,"left":1,"England":1,"forever":1,"four":1,"months":1,"later.":1,"commemorated":1,"parting":1,"poem":1,"begins,":1,"\"Is":1,"face":1,"like":1,"mother's":1,"fair":1,"child!":1,"ADA!":1,"sole":1,"daughter":1,"house":1,"heart?\".[7]":1,"Greece":1,"when":1,"eight":1,"old.":1,"mother":1,"bitter":1,"promoted":1,"Ada's":1,"interest":1,"mathematics":1,"logic":1,"effort":1,"prevent":1,"developing":1,"father's":1,"perceived":1,"insanity.":1,"Despite":1,"this,":1,"him,":1,"naming":1,"two":1,"sons":1,"Gordon.":1,"Upon":1,"death,":1,"buried":1,"next":1,"request.":1,"Although":1,"ill":1,"childhood,":1,"pursued":1,"studies":1,"assiduously.":1,"married":1,"William":1,"1835.":1,"made":1,"Earl":1,"1838,":1,"thereby":1,"becoming":1,"Lovelace.\n\nHer":1,"educational":1,"social":1,"exploits":1,"brought":1,"into":1,"contact":1,"scientists":1,"Andrew":1,"Crosse,":1,"Sir":1,"David":1,"Brewster,":1,"Wheatstone,":1,"Michael":1,"Faraday":1,"author":1,"Dickens,":1,"contacts":1,"which":1,"used":1,"further":1,"education.":1,"described":1,"approach":1,"science\"[8]":1,"herself":1,"\"Analyst":1,"(&":1,"Metaphysician)\".[9]\n\nWhen":1,"teenager":1,"(18),":1,"mathematical":1,"talents":1,"long":1,"working":1,"relationship":1,"friendship":1,"fellow":1,"British":1,"who":1,"\"the":1,"father":1,"computers\".":1,"particular":1,"met":1,"June":1,"1833,":1,"through":1,"their":1,"mutual":1,"friend,":1,"private":1,"tutor,":1,"Mary":1,"Somerville.\n\nBetween":1,"1843,":1,"translated":1,"article":1,"Italian":1,"military":1,"engineer":1,"Luigi":1,"Menabrea":1,"engine,":1,"supplementing":1,"it":1,"elaborate":1,"set":1,"notes,":1,"simply":1,"called":1,"\"Notes\".":1,"Lovelace's":1,"are":1,"important":1,"early":1,"history":1,"computers,":1,"containing":1,"what":1,"consider":1,"program—that":1,"is,":1,"designed":1,"Other":1,"historians":1,"reject":1,"this":1,"perspective":1,"point":1,"personal":1,"1836/1837":1,"contain":1,"programs":1,"engine.[10]":1,"also":1,"developed":1,"vision":1,"capability":1,"computers":1,"go":1,"mere":1,"or":1,"number-crunching,":1,"while":1,"others,":1,"including":1,"Babbage":1,"himself,":1,"focused":1,"those":1,"capabilities.[11]":1,"mindset":1,"science\"":1,"ask":1,"questions":1,"Engine":1,"(as":1,"shown":1,"notes)":1,"examining":1,"how":1,"individuals":1,"society":1,"relate":1,"technology":1,"collaborative":1,"tool.[6]\n\nShe":1,"uterine":1,"cancer":1,"age":1,"36.":1,"Countess":2,"known":2,"for":2,"work":2,"Engine.":2,"beyond":2,"algorithm":2,"carried":2,"such":2,"machine.":2,"is":2,"often":2,"computer":2,"only":2,"other":2,"born":2,"He":2,"thy":2,"my":2,"died":2,"years":2,"Her":2,"remained":2,"interested":2,"him":2,"at":2,"King":2,"Babbage,":2,"\"poetical":2,"led":2,"about":2,"calculating":2,"notes":2,"many":2,"Lovelace":3,"mathematician":3,"on":3,"Babbage's":3,"Analytical":3,"that":3,"be":3,"by":3,"from":3,"with":3,"She":4,"out":4,"she":4,"Byron":4,"Charles":5,"an":6,"first":6,"as":6,"Ada":8,"was":9,"a":9,"to":13,"in":14,"of":15,"and":16,"her":16,"the":18}

所以现在我们要做的是，把这个从最高的数字排序到最低的数字。

Sorting object property by values

在

中，可以使用Object.entries()将对象转换为数组：

const maxSpeed ={ car: 300，自行车: 60，摩托车: 200，飞机: 1000，直升机: 400，火箭:8* 60 * 60 }；

const sortable = Object.entries(maxSpeed) .sort((，a，b) => a).reduce(r，k，v) => ({ ...r，k: v })，{}；

Console.log(可排序)；

我们成功地回答了这个问题：

    const sortWords = () => {
        theWordCount = Object.entries(theWordCount)
          .sort(([, a], [, b]) => a - b)
          .reduce((r, [k, v]) => ({ ...r, [k]: v }), {});
        console.log("OKAY I THINK WE SORTED: " + JSON.stringify(theWordCount));
        createTable();
      };

所以现在，我们需要改变这一点，这样在我们下降到小数字的过程中，大量的数字首先出现。

https://www.w3schools.com/jsref/jsref_sort.asp

示例按降序排序数组中的数字：

const点= 40,100，1，5，25，10；points.sort(a，b){返回b-a}；

https://www.codegrepper.com/code-examples/javascript/array+sort+from+higher+to+lower+in+js

“数组排序在js中从高到低”代码答案

Arqa从最高到最低的javascriptjavascript排序数组

在2020年3月25日，注释14 1/对一系列数字进行排序，让数字=5、13、1、44、32、15、500 3​4/最低至最高5 let​= numbers.sort((a，b) => a- b)；6/输出: 1，5，13，15，32，42,500 7​8/最高至最低9 let highestToLowest =numbers.sort(a，b) => b-a；10 /输出: 500, 44，32,15,13,5,1，1

所以我试着：

    const sortWords = () => {
        theWordCount = Object.entries(theWordCount)
          .sort(([, a], [, b]) => b - a)
          .reduce((r, [k, v]) => ({ ...r, [k]: v }), {});
        console.log("OKAY I THINK WE SORTED: " + JSON.stringify(theWordCount));
        createTable();
      };

但它不是从高到低，它是这样的：

OKAY I THINK WE SORTED: {"10":1,"27":1,"1815":1,"1842":1,"1852":1,"the":18,"and":16,"her":16,"of":15,"in":14,"to":13,"was":9,"a":9,"Ada":8,"an":6,"first":6,"as":6,"Charles":5,"She":4,"out":4,"she":4,"Byron":4,"Lovelace":3,"mathematician":3,"on":3,"Babbage's":3,"Analytical":3,"that":3,"be":3,"by":3,"from":3,"with":3,"Countess":2,"known":2,"for":2,"work":2,"Engine.":2,"beyond":2,"algorithm":2,"carried":2,"such":2,"machine.":2,"is":2,"often":2,"computer":2,"only":2,"other":2,"born":2,"He":2,"thy":2,"my":2,"died":2,"years":2,"Her":2,"remained":2,"interested":2,"him":2,"at":2,"King":2,"Babbage,":2,"\"poetical":2,"led":2,"about":2,"calculating":2,"notes":2,"many":2,"Augusta":1,"King,":1,"(née":1,"Byron;":1,"December":1,"–":1,"November":1,"1852)":1,"English":1,"writer,":1,"chiefly":1,"proposed":1,"mechanical":1,"general-purpose":1,"computer,":1,"recognise":1,"machine":1,"had":1,"applications":1,"pure":1,"calculation,":1,"have":1,"published":1,"intended":1,"As":1,"result,":1,"regarded":1,"programmer.[2][3][4]\n\nAda":1,"child":1,"poet":1,"Lord":1,"Lady":1,"Byron.[5]":1,"All":1,"Byron's":1,"children":1,"were":1,"wedlock":1,"women.[6]":1,"separated":1,"his":1,"wife":1,"month":1,"after":1,"left":1,"England":1,"forever":1,"four":1,"months":1,"later.":1,"commemorated":1,"parting":1,"poem":1,"begins,":1,"\"Is":1,"face":1,"like":1,"mother's":1,"fair":1,"child!":1,"ADA!":1,"sole":1,"daughter":1,"house":1,"heart?\".[7]":1,"Greece":1,"when":1,"eight":1,"old.":1,"mother":1,"bitter":1,"promoted":1,"Ada's":1,"interest":1,"mathematics":1,"logic":1,"effort":1,"prevent":1,"developing":1,"father's":1,"perceived":1,"insanity.":1,"Despite":1,"this,":1,"him,":1,"naming":1,"two":1,"sons":1,"Gordon.":1,"Upon":1,"death,":1,"buried":1,"next":1,"request.":1,"Although":1,"ill":1,"childhood,":1,"pursued":1,"studies":1,"assiduously.":1,"married":1,"William":1,"1835.":1,"made":1,"Earl":1,"1838,":1,"thereby":1,"becoming":1,"Lovelace.\n\nHer":1,"educational":1,"social":1,"exploits":1,"brought":1,"into":1,"contact":1,"scientists":1,"Andrew":1,"Crosse,":1,"Sir":1,"David":1,"Brewster,":1,"Wheatstone,":1,"Michael":1,"Faraday":1,"author":1,"Dickens,":1,"contacts":1,"which":1,"used":1,"further":1,"education.":1,"described":1,"approach":1,"science\"[8]":1,"herself":1,"\"Analyst":1,"(&":1,"Metaphysician)\".[9]\n\nWhen":1,"teenager":1,"(18),":1,"mathematical":1,"talents":1,"long":1,"working":1,"relationship":1,"friendship":1,"fellow":1,"British":1,"who":1,"\"the":1,"father":1,"computers\".":1,"particular":1,"met":1,"June":1,"1833,":1,"through":1,"their":1,"mutual":1,"friend,":1,"private":1,"tutor,":1,"Mary":1,"Somerville.\n\nBetween":1,"1843,":1,"translated":1,"article":1,"Italian":1,"military":1,"engineer":1,"Luigi":1,"Menabrea":1,"engine,":1,"supplementing":1,"it":1,"elaborate":1,"set":1,"notes,":1,"simply":1,"called":1,"\"Notes\".":1,"Lovelace's":1,"are":1,"important":1,"early":1,"history":1,"computers,":1,"containing":1,"what":1,"consider":1,"program—that":1,"is,":1,"designed":1,"Other":1,"historians":1,"reject":1,"this":1,"perspective":1,"point":1,"personal":1,"1836/1837":1,"contain":1,"programs":1,"engine.[10]":1,"also":1,"developed":1,"vision":1,"capability":1,"computers":1,"go":1,"mere":1,"or":1,"number-crunching,":1,"while":1,"others,":1,"including":1,"Babbage":1,"himself,":1,"focused":1,"those":1,"capabilities.[11]":1,"mindset":1,"science\"":1,"ask":1,"questions":1,"Engine":1,"(as":1,"shown":1,"notes)":1,"examining":1,"how":1,"individuals":1,"society":1,"relate":1,"technology":1,"collaborative":1,"tool.[6]\n\nShe":1,"uterine":1,"cancer":1,"age":1,"36.":1} 

如何以这种方式对对象进行从高到低的排序？

我试过了

.sort(([, b], [, a]) => b - a)

.sort(([b, ], [a, ]) => b - a)

.sort(([, a], [, b]) => b - a)

所有这些都不起作用，我该如何做在Sorting object property by values中做的事情，但是要向后做呢？

在sortWords函数中，我调用；createTable();，但是DOM不更新，因为呈现只被调用一次。

我需要以某种方式更新它，是否再次以某种方式调用render？

Answer 1

问题不在排序函数中，它工作得很好。您可以看到，仅由数字组成的对象属性的顺序已被打破。在这个简单的例子中可以看到：

const t = {a: 1, b: 2, c: 3};
console.log('Order of keys is preserved', t);

const s = {a: 1, b: 2, "10": 3};
console.log('Order of keys is ruined', s);

我不知道你能做些什么.一些想法：

1. 不用为对象键排序，而是使用另一种更合适的数据结构。

1. 如果您绝对需要使用带有排序键的对象，则可以在执行reduce时将空间附加到键中，然后在需要使用键时使用trim (非常愚蠢的想法，但它可以用于保持密钥顺序)：

const u = {" a": 1, " b": 2, " 10": 3};
console.log('Ordering of keys preserved', u);