MDN文档说：

使用三个参数调用回调：元素的值
元素的索引和正在遍历的数组对象。

所以

  function getListings（）{
返回Array.pro totype.map.call（document.querySelectorAll（'li.g'），function（e，rank）{// magic 
 return {
 rectangle：e.getBoundingClientRect（），
 rank ：排名//<  - 魔术发生
} 
} 
} 
 

I'm using Array.prototype.map.call to store in an array a bunch of node list objects:

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

However, I also want to store the order in which this elements appear in the DOM, and I don't know how to do that.

I know that I'm storing this in an array, and the order would be the index of the array. For example:

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

but I'm inserting the json object in a database, and the easiest way to store the "rank" information is by creating a property "rank" in my object, but I don't know how to get the "index" of the current array.

Something like:

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

Any help pointing me to the right direction will be greatly appreciated! Thanks

The MDN documentation says:

callback is invoked with three arguments: the value of the element, the index of the element, and the Array object being traversed.

So

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