Javascript 获取唯一的数据属性值并从中创建键值数组？

我在页面上有许多数据属性，这些属性将具有不同的值，但这些值会重复，例如：

<div data-user-val="[Adult-Young-25]"></div>
<div data-user-val="[Adult-Young-25]"></div>
<div data-user-val="[Adult-Young-25]"></div>
<div data-user-val="[Adult-Mid-35]"></div>
<div data-user-val="[Adult-Mid-35]"></div>
<div data-user-val="[Adult-Old-75]"></div>

我正在努力学习1。获取每个重复数据值的一个实例，然后选择2。“拆分”要映射为键值对的值。

var obj={}；
$（'div'）。每个（函数（）{
var data_attrivute_value=$（this）.data（'user-val'）；
data_attrivute_value=data_attrivute_value.substring（1，data_attrivute_value.lastIndexOf（“]）；
变量分解字符串=数据属性值。拆分（'-'）；
obj[exploded_string[0]+''+exploded_string[1]]=exploded_string[2]；
});
控制台日志（obj）


var obj={}；
$（'div'）。每个（函数（）{
var data_attrivute_value=$（this）.data（'user-val'）；
data_attrivute_value=data_attrivute_value.substring（1，data_attrivute_value.lastIndexOf（“]）；
变量分解字符串=数据属性值。拆分（'-'）；
obj[exploded_string[0]+''+exploded_string[1]]=exploded_string[2]；
});
控制台日志（obj）

用于获取具有
数据用户val
属性的所有元素，并扩展到数组中。使用迭代数组，并获取属性的值。用于获取值的非数字（键）和数字（值）部分。将键和值指定给对象


const result=[…document.querySelectorAll（'[data user val]'）]
.减少（（r，el）=>{
常量[，k，v]=el.getAttribute（'data-user-val'）.match（/（[^\d\[]+）（\d+/）；
r[k.替换（/-/g'，）.trim（）]=v；
返回r；
}, {});
console.log（结果）；

用于获取具有
数据用户val
属性的所有元素，并扩展到数组。使用迭代数组，并获取属性值。用于获取值的非数字（键）和数字（值）部分。将键和值分配给对象


const result=[…document.querySelectorAll（'[data user val]'）]
.减少（（r，el）=>{
常量[，k，v]=el.getAttribute（'data-user-val'）.match（/（[^\d\[]+）（\d+/）；
r[k.替换（/-/g'，）.trim（）]=v；
返回r；
}, {});
console.log（结果）；
这里有一个简单的解决方案，没有任何奇特的库或函数：

var divs = document.getElementsByTagName('div');
var myAttr = 'data-user-val';
var dict = {};

for(i = 0; i < divs.length; i++) {
  var val = divs[i].getAttribute(myAttr);
  if (val) {
    var trimmed = val.substr(1, val.length - 2)
    var splitted = trimmed.split('-');
    var key = splitted[0] + ' ' + splitted[1];
    if (!dict.hasOwnProperty(key)) {
      dict[key] = splitted[2];
    }
  }
}

var divs=document.getElementsByTagName（'div'）；
var myAttr='数据用户val'；
var dict={}；
对于（i=0；i
这里有一个简单的解决方案，没有任何奇特的库或函数：

var divs = document.getElementsByTagName('div');
var myAttr = 'data-user-val';
var dict = {};

for(i = 0; i < divs.length; i++) {
  var val = divs[i].getAttribute(myAttr);
  if (val) {
    var trimmed = val.substr(1, val.length - 2)
    var splitted = trimmed.split('-');
    var key = splitted[0] + ' ' + splitted[1];
    if (!dict.hasOwnProperty(key)) {
      dict[key] = splitted[2];
    }
  }
}

var divs=document.getElementsByTagName（'div'）；
var myAttr='数据用户val'；
var dict={}；
对于（i=0；i
发布一些您尝试过但可能不起作用的代码。如果所有属性都有相同数量的分隔符（此处-），则该代码会起作用。但我建议使用实际属性名（data成人young，data成人mid）作为属性名，并使用实际值（25、35、75）取而代之的是。这会使它更容易。@Lain数据属性的结构不幸超出了我的控制范围，因此我需要使用[maint-Young-25]例如。是否有[maint-Young-26]？@Lain绝对有可能。这就是为什么我需要确保只获取每个唯一值一次。发布一些您尝试过的代码，如果所有属性都有相同数量的分隔符（此处-），则可能不起作用。但我建议使用实际的属性名（data成人young，data成人mid）将属性名改为实际值（25，35，75）。这样会更容易。@Lain数据属性的结构不幸超出了我的控制范围，因此我需要使用[Maintain-Young-25]例如。是否有[Maintain-Young-26]？@Lain绝对有可能。这就是为什么我需要确保只获取每个唯一值一次。如果整个文档中的一个div没有名为“data user val”的属性，则代码将失败。是的，现在已修复为什么不只选择正确的div？循环1000个div要比仅~10:-）花费更多的时间，因为
getElementsByTagName
比
querySelectorAll
更可靠，因为它在每次检查值时都会更新。因此，如果从后端进行更新，您将获得更多的
div
，那么我的代码将正确更新
dict
。这里有一个示例：如果整个文档中的一个div没有名为“data user val”的属性。为真，现已修复为什么不只选择正确的div？循环1000个div所需的时间远远超过~10:-），因为
getElementsByTagName
比
querySelectorAll
更可靠，因为它在每次检查值时都会更新。因此，如果从后端和您将获得更多的
div
s，然后我的代码将正确更新
dict
。下面是一个示例：