构建一个“可查询”的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);