使用 javascript 迭代嵌套在索引中的键值对的最佳方法是什么？

Question

我正在尝试对一组关联的键值对进行排序。它们看起来像这样：

{"word":"a","votes":9326,"userMade":"FALSE","limiter":"FALSE"}, 但是组织成最好是字符串或索引的标记子集，如果需要的话。

数据集是对被解析成页面的最常用英语单词的每次使用投票 table。由于我的用例的限制，我将它们作为文本附加到其他 html 元素，这让它有点棘手，但是，例如我可以使用页面值的简单 console.log通过该页面中存储的每个单词值的 console.log。我需要保留订单。所以可能索引。我还需要能够按投票值对每个页面进行排序，但我想我可以解决剩下的问题。

我找到了有关如何通过键值对进行搜索的教程，但我找不到如何使用一种解决方案来完成以下所有操作：

A：访问word的值
B：维护数据集的顺序，允许我将它们附加到匹配的 html 元素
C: 让我有机会在完成对父索引的单个成员（记录页面的那个）的循环后更改要追加的元素集

我想它是 for/of 和 for/in 的某种组合，但我有点头疼。请帮忙？

地址信息：函数将运行在应用程序启动时或正在检查的数据集更改时。函数将采用一个包含大约 200 个页码值的大型数据集，每个包含 60 多组数据，如上面列出的那样，例如单个页面索引的内容：

{"word":"a","votes":9326,"userMade":"FALSE","limiter":"FALSE"},
{"word":"aaron","votes":4129,"userMade":"FALSE","limiter":"FALSE"},
{"word":"abandoned","votes":1289,"userMade":"FALSE","limiter":"FALSE"},
{"word":"abc","votes":5449,"userMade":"FALSE","limiter":"FALSE"},
{"word":"aberdeen","votes":641,"userMade":"FALSE","limiter":"FALSE"},
{"word":"abilities","votes":2210,"userMade":"FALSE","limiter":"FALSE"},
{"word":"ability","votes":7838,"userMade":"FALSE","limiter":"FALSE"},
{"word":"able","votes":8649,"userMade":"FALSE","limiter":"FALSE"},
{"word":"aboriginal","votes":1837,"userMade":"FALSE","limiter":"FALSE"},
{"word":"abortion","votes":3232,"userMade":"FALSE","limiter":"FALSE"},
{"word":"about","votes":9295,"userMade":"FALSE","limiter":"FALSE"},
{"word":"above","votes":8818,"userMade":"FALSE","limiter":"FALSE"},
{"word":"abraham","votes":867,"userMade":"FALSE","limiter":"FALSE"},
{"word":"abroad","votes":4969,"userMade":"FALSE","limiter":"FALSE"},
{"word":"abs","votes":2415,"userMade":"FALSE","limiter":"FALSE"},
{"word":"absence","votes":4934,"userMade":"FALSE","limiter":"FALSE"},
{"word":"absent","votes":2937,"userMade":"FALSE","limiter":"FALSE"},
{"word":"absolute","votes":5251,"userMade":"FALSE","limiter":"FALSE"},
{"word":"absolutely","votes":5936,"userMade":"FALSE","limiter":"FALSE"},
{"word":"absorption","votes":285,"userMade":"FALSE","limiter":"FALSE"},
{"word":"abstract","votes":7946,"userMade":"FALSE","limiter":"FALSE"},
{"word":"abstracts","votes":1907,"userMade":"FALSE","limiter":"FALSE"},
{"word":"abuse","votes":7238,"userMade":"FALSE","limiter":"FALSE"},
{"word":"academic","votes":7917,"userMade":"FALSE","limiter":"FALSE"},
{"word":"academics","votes":1706,"userMade":"FALSE","limiter":"FALSE"},
{"word":"academy","votes":6755,"userMade":"FALSE","limiter":"FALSE"},
{"word":"acc","votes":6469,"userMade":"FALSE","limiter":"FALSE"},
{"word":"accent","votes":1020,"userMade":"FALSE","limiter":"FALSE"},
{"word":"accept","votes":7547,"userMade":"FALSE","limiter":"FALSE"},
{"word":"acceptable","votes":4907,"userMade":"FALSE","limiter":"FALSE"},
{"word":"acceptance","votes":7273,"userMade":"FALSE","limiter":"FALSE"},
{"word":"accepted","votes":7684,"userMade":"FALSE","limiter":"FALSE"},
{"word":"accepting","votes":1789,"userMade":"FALSE","limiter":"FALSE"},
{"word":"accepts","votes":1535,"userMade":"FALSE","limiter":"FALSE"},
{"word":"access","votes":9031,"userMade":"FALSE","limiter":"FALSE"},
{"word":"accessed","votes":2932,"userMade":"FALSE","limiter":"FALSE"},
{"word":"accessibility","votes":5702,"userMade":"FALSE","limiter":"FALSE"},
{"word":"accessible","votes":5662,"userMade":"FALSE","limiter":"FALSE"},
{"word":"accessing","votes":2096,"userMade":"FALSE","limiter":"FALSE"},
{"word":"accessories","votes":8875,"userMade":"FALSE","limiter":"FALSE"},
{"word":"accessory","votes":5661,"userMade":"FALSE","limiter":"FALSE"},
{"word":"accident","votes":5664,"userMade":"FALSE","limiter":"FALSE"},
{"word":"accidents","votes":2991,"userMade":"FALSE","limiter":"FALSE"},
{"word":"accommodate","votes":1807,"userMade":"FALSE","limiter":"FALSE"},
{"word":"accommodation","votes":8059,"userMade":"FALSE","limiter":"FALSE"},
{"word":"accommodations","votes":3885,"userMade":"FALSE","limiter":"FALSE"},
{"word":"accompanied","votes":2532,"userMade":"FALSE","limiter":"FALSE"},
{"word":"accompanying","votes":664,"userMade":"FALSE","limiter":"FALSE"},
{"word":"accomplish","votes":1070,"userMade":"FALSE","limiter":"FALSE"},
{"word":"accomplished","votes":2419,"userMade":"FALSE","limiter":"FALSE"},
{"word":"accordance","votes":6434,"userMade":"FALSE","limiter":"FALSE"},
{"word":"according","votes":8282,"userMade":"FALSE","limiter":"FALSE"},
{"word":"accordingly","votes":3003,"userMade":"FALSE","limiter":"FALSE"},
{"word":"account","votes":8996,"userMade":"FALSE","limiter":"FALSE"},
{"word":"accountability","votes":3029,"userMade":"FALSE","limiter":"FALSE"},
{"word":"accounting","votes":7459,"userMade":"FALSE","limiter":"FALSE"},
{"word":"accounts","votes":7507,"userMade":"FALSE","limiter":"FALSE"},
{"word":"accreditation","votes":1605,"userMade":"FALSE","limiter":"FALSE"},
{"word":"accredited","votes":3027,"userMade":"FALSE","limiter":"FALSE"},
{"word":"accuracy","votes":6779,"userMade":"FALSE","limiter":"FALSE"},
{"word":"accurate","votes":6427,"userMade":"FALSE","limiter":"FALSE"},
{"word":"accurately","votes":1493,"userMade":"FALSE","limiter":"FALSE"},
{"word":"accused","votes":2853,"userMade":"FALSE","limiter":"FALSE"},
{"word":"acdbentity","votes":1389,"userMade":"FALSE","limiter":"FALSE"},

并且输出最终会通过迭代将与每个单词配对的值附加到特定按钮，但也会按页面值排序。

每个页面都是 3d 对象中的一组按钮，如下所示：

文本被附加到每个按钮，而按钮又是一个使用框架嵌入到 html 对象中的 3d 对象。我可以制作附加代码。

Answer 1

您可以使用Object.entries()获取对象的键值对。

var words = [
  {"word":"a","votes":9326,"userMade":"FALSE","limiter":"FALSE"},
  {"word":"aaron","votes":4129,"userMade":"FALSE","limiter":"FALSE"}
];

words.forEach((wordEntry) => {
  var keyValuePairs = Object.entries(wordEntry);
  keyValuePairs.forEach((kv) => {
    console.log(`key: ${kv[0]} value: ${kv[1]}`);
  });
});

Answer 2

我最近的尝试是这样的：

for (let p=1; p<129; p++){
    for (let b=1; b<68; b++){
        let pTpl = (p).toLocaleString(undefined, {minimumIntegerDigits: 3});
        let bDbl = (b).toLocaleString(undefined, {minimumIntegerDigits: 2});
        var `#fCont${pTpl}${bDbl}` = document.createElement('a-text');
        `fCont${pTpl}${bDbl}`.setAttribute('value', 'engWordLib[p,b,0]');
        `fCont${pTpl}${bDbl}`.setAttribute('votes', 'engWordLib[p,b,1]');
        `fCont${pTpl}${bDbl}`.setAttribute('userMade', 'engWordLib[p,b,2]');
        `fCont${pTpl}${bDbl}`.setAttribute('limiter', 'engWordLib[p,b,3]');
        `fCont${pTpl}${bDbl}`.setAttribute('visible', 'false');
        `fBtn${bDbl}`.appendChild(`#fCont${pTpl}${bDbl}`)
    }
}

请注意，我还没有检查过这个错误。我仍然认为这段代码是 WET，我更希望将属性的键名称保留在数据结构中，而不是在将其附加到页面时附加上。我想我可以在数组中添加一个维度……当对象属性值中包含正确的键值对时，看起来有点乱。虽然无法获取数组中对象的迭代...。将继续追求更清洁的方法。

使用 javascript 迭代嵌套在索引中的键值对的最佳方法是什么？

What is the best way to itterate over key value pairs nested in an index using javascript?

javascript

for-loop

data-transform