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

【问题标题】：What is the best way to itterate over key value pairs nested in an index using javascript?使用javascript迭代嵌套在索引中的键值对的最佳方法是什么？
【发布时间】：2020-09-29 12:21:17
【问题描述】：

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

{"word":"a","votes":9326,"userMade":"FALSE","limiter":"FALSE"}, 但组织成标记的子集，最好是一个字符串或必要时可能是一个索引。

该数据集是一个按使用次数投票的表格，其中最常用的英语单词被解析成页面。由于我的用例的限制，我会将它们作为文本附加到其他 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 对象中的一组按钮，如下所示：

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

【问题讨论】：

那么，这是数组中的一项吗？您至少可以显示一些示例输入以及示例输入的预期输出吗
这不是一个 JSON“键值对”，它是一个带有属性的 JSON 对象，例如x.word = "a"等
请向我们展示一个示例“页面”，并了解完成此过程后的外观。
是的，这个对象的属性是一个键值对结构。关键是，如果需要，我可以更改我的数据结构，我只需要键值对的功能。

标签： javascript for-loop data-transform

【解决方案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]}`);
  });
});

【讨论】：

我不知道我的页面结构将如何使用它。我应该将单词更改为页码并遍历 200 个页面变量吗？我可以将页码设置为集合中的值，并检查它是否每次都更改？那效率高吗？我错过了什么吗？
@TenZen 我不确定你的页面结构是什么意思。您使用某种分页系统吗？
我正在尝试将单词值附加到处理打印此单词的 3d 对象的 html 元素中。用户可以通过控制器输入看到不同的页面（如示例图像所示）。所以你看，当我使用我的迭代来选择适当的按钮时，我还需要一个页面引用。我最初打算将它作为父结构，其中键值集在嵌套的位置进行解析，但如果需要的话，我不反对将页码设为自己的键值对。
@TenZen 抱歉，我仍然不清楚您的意思。您能否提供一个代码示例来重现您的问题，包括所需的结果？
我们可以使用您的代码作为我的问题的示例，或者我放在上面的数据结构，现在只假设一个 for/in 或 for/of 和一个简单的 console.log。它只迭代一页。我可以用页码替换你的 var 单词，但我需要大约 200 个，然后遍历它们。这是我必须做的吗？

【解决方案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 的，我希望属性的键名保留在数据结构中，而不是在附加到页面时添加。我想我可以为数组添加一个维度……当对象属性值中包含键值对时，这似乎有点混乱。虽然无法降低数组中对象的迭代.... 将继续采用更清洁的方法。

【讨论】：