查找属性中具有最高值的数组中的对象索引

Question

I've got an array with objects:

var articles = [];
var article = {};

Simple loop that iterates x times {
        article.text = "foobar";
        article.color = "red";
        article.number = 5;
        articles.push(article);
}

I have no idea how many objects there will be in my array but they will all have different values for their properties, I just gave some examples here.

Question

I need to find a way to go through all these objects and retrieve the index of the object that has the highest value in article.number. How can I achieve this? I may only use javascript, jQuery, etc.. no other languages.

I'm guessing this will involve using both $.grep and Math.max but I'm stuck, I've never worked with $.grep before.

In short:

var highestNumber = index of object where article.number is highest

Answer 1

There are many ways to do this, Math.max() , $.grep and $.map being a few, but an easy and readable method that should be understandable is to just iterate the object, and check if the value is higher than a variable, if it is, set the variable to the higher number :

var highest = 0;

$.each(articles, function(key, article) {

    if (article.number > highest) highest = article.number;

});

// highest now contains the highest number

Answer 2

Underscore.js is a wonderful library that provides functional operations for collections. A solution in underscore:

var maxObj = _.max(array, function (obj) {
  return obj.number;
});
var maxIndex = array.indexOf(maxObj);

While this example is fairly simple, the operations scale nicely. Say you wanted to sum the number property for each object in the array that had text equal to Foo and color equal to red :

var customSum = _.chain(array)
  .where({ 
    text: "Foo", color: "red"
  })
  .map(function(obj) {
    return obj.number; 
  })
  .reduce(function(memo, num) {
    return memo + num;
  }, 0)
  .value();  

If you're at all concerned with performance, an external library is certainly the way to go. There are a huge amount of optimizations that external libraries can provide that would be difficult to match in your own code. That said, when dealing with a small number of items (less than several thousand) there won't be an appreciable performance difference between any of the answers posted here. Don't sweat the benchmarking and use the answer that's the most understandable to you.

JSFiddle

Answer 3

How about:

articleWithMaxNumber = articles.slice(0).sort(
     function(x, y) { return y.number - x.number })[0]

and if you need an index:

index = articles.indexOf(articleWithMaxNumber)

And for those thinking sorting might be an overkill to get the max value:

articleWithMaxNumber = articles.reduce(function(max, x) {
    return x.number > max.number ? x : max;
})

And here's a generic approach how to find a maximum of function applications using map-reduce:

function maxBy(array, fn) {
    return array.map(function(x) {
        return [x, fn(x)]
    }).reduce(function(max, x) {
        return x[1] > max[1] ? x : max;
    })[0]
}

articleWithMaxNumber = maxBy(articles, function(x) { return x.number })

Some people raised concerns about the sort method being "slow", compared to the iterative one. Here's a fiddle that uses both methods to process an array with 50000 items . The sort method is "slower" by about 50 milliseconds on my machine. Depends on the application, but in most cases this is not something worth talking about.

 var articles = []; var len = 50000; while (len--) { var article = {}; article.text = "foobar"; article.color = "red"; article.number = Math.random(); articles.push(article); } d = performance.now(); max1 = articles.slice(0).sort( function(x, y) { return y.number - x.number })[0] time1 = performance.now() - d d = performance.now(); max2 = articles.reduce(function(max, x) { return x.number > max.number ? x : max; }) time2 = performance.now() - d document.body.innerHTML = [time1, time2].join("<br>") 

Answer 4

Here is one possible solution

Javascript

var articles = [],
    howMany = 5,
    i = 0,
    article,
    highest;

while (i < howMany) {
    article = {};
    article.text = "foobar";
    article.color = "red";
    article.number = i;
    articles.push(article);
    i += 1;
}

console.log(articles);

hownMany = articles.length;
i = 0;
while (i < howMany) {
    if (typeof highest !== "number" || articles[i].number > highest) {
        highest = i;
    }

    i += 1;
}

console.log(articles[highest]);

On jsfiddle

Here is the performance test for the current given methods, feel free to add answers.

Answer 5

items => 
    items
        .reduce(
            ( highest, item, index ) => 
                item > highest.item 
                    ? { item, index }
                    : highest
        ,   { item: Number.NEGATIVE_INFINITY }
        )
        .index

Answer 6

I won't use anything like Math or jQuery, just sort the resulting array and popping off the last element:

var sortArticles = function (a, b)
{
    return ( a.number - b.number ); // should have some type checks ? inverse order: swap a/b
}

articles.sort(sortArticles);


highestArticle = articles.pop(); // or articles[array.length-1]; 
// take care if srticles.length = null !

As long as you don't have gazillions of articles in your memory, that's the fastest way.

Answer 7

array[array.map((o)=>o.number).indexOf(Math.max(...array.map((o)=>o.number)))]

意味着获得具有索引​​（i）的元素，其中（i）是最高数字的索引。