如何在数组原型映射中获取当前索引？

Question

我正在使用Array.prototype.map.call将一组节点列表对象存储在数组中：

function getListings() {
    return Array.prototype.map.call(document.querySelectorAll('li.g'), function(e) {
         return {
             rectangle: e.getBoundingClientRect();
         }
    }
}

然而，我也想存储这些元素在DOM中出现的顺序，但我不知道如何做到。

我知道我正在将它们存储在一个数组中，而顺序将是数组的索引。例如：

var listings = getListings();
console.log(listings[0]); // rank #1
console.log(listings[1]); // rank #2
// etc...

但我正在将JSON对象插入数据库，最简单的存储“rank”信息的方法是在对象中创建一个“rank”属性，但我不知道如何获取当前数组的“index”。

类似这样：

function getListings() {
    return Array.prototype.map.call(document.querySelectorAll('li.g'), function(e) {
         return {
             rectangle: e.getBoundingClientRect(),
             rank: magicFunctionThatReturnsCurrentIndex() // <-- magic happens
         }
    }
}

任何帮助指引我朝着正确的方向前进都将不胜感激！谢谢。

- ILikeTacos

---

我认为 document.querySelectorAll('li.g') 应该按照它们在 DOM 中出现的顺序正确返回元素。 - VisioN

有的，但是有没有任何方法可以得到数值？我有当前顺序中的元素，但我想在我的JSON对象中拥有一个带有它的数值属性。 - ILikeTacos

Answer 1

MDN文档中写道:

回调函数被传递三个参数：元素的值，元素的索引和被遍历的数组对象。

因此，

function getListings() {
    return Array.prototype.map.call(document.querySelectorAll('li.g'), function(e, rank) { // magic 
         return {
             rectangle: e.getBoundingClientRect(),
             rank: rank // <-- magic happens
         }
    }
}

- Tibos

---

我一遍又一遍地阅读了那个页面，但出于某种原因，我从未注意到索引也被传递了。谢谢！ - ILikeTacos