javascript - 构建 "queryable"javascript/JSON 对象

Question

我想构建一个可通过多个参数查询的对象。我想出的方法是使用数据属性将数据存储在跨度中，并使用 jQuery 进行“搜索”，但我不喜欢它。

为了快速演示，我将“数据”保存如下:

<span data-color="red blue" data-name="bill" data-value="47"></span>
<span data-color="blue green white" data-name="jane" data-value="13"></span>
<span data-color="red" data-name="mary jack" data-value="35"></span>
<span data-color="green" data-name="bill" data-value="43"></span>
<span data-color="white" data-name="steve" data-value="123"></span>

因此，如果我想将所有值与颜色“红色”匹配，我可以这样做:

$("span[data-color~='red']").each(...);

如果我想匹配所有名为“bill”和颜色“green”的内容，我会这样搜索

$("span[data-color~='green'][data-name~='bill']").each(...);    

虽然这感觉很聪明，但也感觉有点 hacky，用 CSS 选择器欺骗 Javascript 进行查询。有没有更好的方法来存储和访问数据？请求可能很多，所以我希望速度快，而不是发出 http 请求来查询数据服务器端。在我的情况下，可能有数百个条目需要搜索(我不喜欢 CSS 选择器路由的另一个原因)。

谢谢!

Answer 1

使用普通的 Javascript 对象数组来代替，然后使用数组方法进行过滤、迭代等。不需要 jQuery。例如:

const arr = [
  { colors: ['red', 'blue'], name: 'bill', value: 47 },
  { colors: ['blue', 'green', 'white'], name: 'jane', value: 13 },
  { colors: ['red'], name: 'mary jack', value: 35 },
  { colors: ['green', 'blue'], name: 'bill', value: 88 },
];
const reds = arr.filter(({ colors }) => colors.includes('red'));
console.log(reds);
const greenBills = arr.filter(({ colors, name }) =>
  colors.includes('green') && name === 'bill'
);
console.log(greenBills);