如何将类数组DOM对象转换为包含元素ID的数组？

我在控制台中得到如下类数组对象：

object { 0: div#ch2.group-item, 1: div#ch4.group-item, length: 2 }

我希望将其转换为包含元素ID的数组 [ch2,ch4]，编写了如下jQuery代码，请问如何正确实现该转换？

var ids=$.each(children, function() { return $(this).attr('id'); });
console.log(ids);

问题原因 #

$.each() 仅负责遍历集合，不会返回处理后的新数组，执行后它会直接返回你传入的原类数组对象，所以当前代码打印的还是原始对象，不是目标ID数组。

正确实现方式 #

用 $.map() 方法即可，它的核心作用就是将一个集合转换为另一个新集合，会直接返回处理后的数组：

var ids = $.map(children, function(el) {
  return el.id; // 直接用原生DOM的id属性，比转jQuery对象更高效
});
console.log(ids); // 输出 ["ch2", "ch4"]

也可以先把类数组转为jQuery对象，再用jQuery的 .map() 方法，最后通过 .get() 转为原生数组：

var ids = $(children).map(function() {
  return this.id;
}).get();
console.log(ids);

小技巧 #

直接访问原生DOM元素的 id 属性，比 $(this).attr('id') 性能更优，因为不需要额外创建jQuery实例，减少了不必要的性能开销。

内容的提问来源于stack exchange，提问作者sami eisa