javascript - 结合 $ 和 _ 以按数据值提取？

Question

我有一个带有数据属性的 jquery 元素列表。

现在我想获得这些数据属性的列表。

由于 data 属性是某种对象属性，我认为这可能与下划线一起使用 pluck方法。

这可能吗？

看这个简短的例子:

var divs = $("div");

// now do something

// expected result: [1, 2, 3]

<script src="https://cdnjs.com/libraries/underscore.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div data-foo="1">a</div>
<div data-foo="2">b</div>
<div data-foo="3">c</div>
<div>x</div>

解决方案

基于@romeo-sierra，这是我写下来的方式(因为我已经有了 jquery 对象)。下划线是多余的

var foos = $("div").map(function() {
  return $(this).data("foo");
}).toArray();

console.log(foos);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div data-foo="1">a</div>
<div data-foo="2">b</div>
<div data-foo="3">c</div>
<div>x</div>

Answer 1

Vanilla JS 可以很好地完成这个，不需要 jQuery 或任何其他库:

const foos = [...document.querySelectorAll('[data-foo]')]
  .map(elm => elm.dataset.foo);
console.log(foos);

<div data-foo="1">a</div>
<div data-foo="2">b</div>
<div data-foo="3">c</div>
<div>x</div>

ES5 版本:

var foos = Array.prototype.map.call(document.querySelectorAll('[data-foo]'), function(elm) {
  return elm.dataset.foo;
});
console.log(foos);

<div data-foo="1">a</div>
<div data-foo="2">b</div>
<div data-foo="3">c</div>
<div>x</div>