提取唯一data属性值并生成键值数组的实现方法

嘿，这事儿不难，用JavaScript就能轻松搞定！我给你两种常见的实现方式，按需选择就行：

1. 获取原始格式的唯一属性值数组 #

如果你只需要保留带[]的原始属性值，并且去重后生成数组，代码如下：

// 第一步：获取所有带有data-user-val属性的DOM元素
const targetElements = document.querySelectorAll('[data-user-val]');

// 第二步：提取所有属性值并去重
const uniqueRawValues = [...new Set(
  Array.from(targetElements).map(element => element.dataset.userVal)
)];

// 输出结果：["[Adult-Young-25]", "[Adult-Mid-35]", "[Adult-Old-75]"]
console.log(uniqueRawValues);

代码解释： #

• document.querySelectorAll('[data-user-val]')：精准选中所有包含目标data属性的元素
• Array.from(targetElements)：把类数组的NodeList转成真正的数组，方便后续操作
• map(...)：遍历数组，提取每个元素的data-user-val值
• new Set(...)：利用Set自动去重的特性，过滤掉重复值
• [...new Set(...)]：把Set转回数组格式，方便后续使用

2. 生成结构化的键值对象数组 #

如果你需要把属性值里的Adult-Young-25这类内容拆分成更易使用的键值对（比如分组、年龄区间、具体年龄），可以用下面的代码：

// 第一步：获取目标元素并提取原始属性值
const targetElements = document.querySelectorAll('[data-user-val]');
const rawValues = Array.from(targetElements).map(element => 
  element.dataset.userVal.replace(/\[|\]/g, '') // 去掉包裹的[]符号
);

// 第二步：去重并转成键值对象数组
const keyValueArray = [...new Set(rawValues)].map(value => {
  // 拆分字符串为三个部分
  const [group, ageRange, age] = value.split('-');
  // 返回结构化的键值对象
  return {
    group: group,
    ageRange: ageRange,
    age: parseInt(age, 10) // 把年龄转成数字类型
  };
});

// 输出结果：
// [
//   { group: "Adult", ageRange: "Young", age: 25 },
//   { group: "Adult", ageRange: "Mid", age: 35 },
//   { group: "Adult", ageRange: "Old", age: 75 }
// ]
console.log(keyValueArray);

代码解释： #

• replace(/\[|\]/g, '')：正则表达式去掉属性值前后的[]，方便后续拆分
• split('-')：把字符串按-拆分成数组，再用解构赋值分配给对应的变量
• parseInt(age, 10)：把字符串类型的年龄转成数字，避免后续计算出错

可选：jQuery版本实现 #

如果你项目里还在用jQuery，也可以这么写：

// 提取原始值并去重
const rawValues = $('[data-user-val]').map(function() {
  return $(this).data('userVal');
}).get();
const uniqueValues = [...new Set(rawValues)];

// 转成结构化键值数组的话，和之前的逻辑一致
const keyValueArray = [...new Set(rawValues.map(val => val.replace(/\[|\]/g, '')))]
  .map(val => {
    const [group, ageRange, age] = val.split('-');
    return { group, ageRange, age: parseInt(age, 10) };
  });

内容的提问来源于stack exchange，提问作者Rebecca O'Riordan