如何在JS ES6中从多个元素的数据属性创建数组

Question

我正试图用合适的JS ES6从多个元素的数据属性创建一个数组。

让我们使用以下HTML：

<div class="item" data-geo="['Bondi Beach', -33.890542, 151.274856, 4]">
<div class="item" data-geo="['Coogee Beach', -33.923036, 151.259052, 5]">
<div class="item" data-geo="['Cronulla Beach', -34.028249, 151.157507, 3]">
<div class="item" data-geo="['Manly Beach', -33.80010128657071, 151.28747820854187, 2]">
<div class="item" data-geo="['Maroubra Beach', -33.950198, 151.259302, 1]">

我想从每个元素中获取数据属性('data-geo'，JSON格式(，并将其转换为JS中的数组，如下所示：

var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1],
];

到目前为止，在jQuery中发现了很多例子，但在JS ES6中没有。

Answer 1

使用数据集

var locations = []
document.querySelectorAll('[data-geo]').forEach(el =>
locations.push(JSON.parse(el.dataset.geo.replace(/'/g, '"')))
)
console.log(locations)

<div class="item" data-geo="['Bondi Beach', -33.890542, 151.274856, 4]">
<div class="item" data-geo="['Coogee Beach', -33.923036, 151.259052, 5]">
<div class="item" data-geo="['Cronulla Beach', -34.028249, 151.157507, 3]">
<div class="item" data-geo="['Manly Beach', -33.80010128657071, 151.28747820854187, 2]">
<div class="item" data-geo="['Maroubra Beach', -33.950198, 151.259302, 1]">