JavaScript算法练习:取二维数组中最大值的几种方法

作者：大漠 日期：2016-04-17 点击：1626
JavaScript
数组
Array
JavaScript算法练习

在JavaScript中可以通过内置的Math.max()的最大值，但是要从多重数组中取出最大值，还是有一定的难度。

问题描述

假设你有一个数组，而且这个数组中包含了数字的子数组，而我们要做的是从数组中的每个子数组中返回其最大的那个最大数。

基本解决方案

function largestOfFour(arr) {
    var results = []; // 创建一个results变量来存储

    // 创建一个外层循环，遍历外层数组
    for (var n = 0; n < arr.length; n++) {
        var largestNumber = 0; // 创建第二个变量，存储最大的数

        // 创建另一个循环，遍历子数组
        for (var sb = 0; sb < arr[n].length; sb++) {
            //检查子数组的元素是否大于当前存储的最大值
            if (arr[n][sb] > largestNumber) {
                // 如果为真，将这个值赋予给变量largestNumber
                largestNumber = arr[n][sb];
            }
        }

        // 内部循环后，将每个子数组中的值保存到数组results中
        results[n] = largestNumber;
    }

    // 返回数组
    return results;
}

largestOfFour([[1,34],[456,2,3,44,234],[4567,1,4,5,6],[34,78,23,1]]); //[34, 456, 4567, 78]

上面的方法是一个普通的解决方案，通过两个for循环对数组及其子数组做遍历：

  • 创建一个results变量用来存储每个子数组中遍历出来的最大值
  • 创建外循环for遍历外层数组
  • 创建第二个变量largestNumber用来存放最大值。这个变量值必须放在内部for循环的外面，因为这样他才不会被重新分配
  • 创建第二个for循环，来遍历子数组中的每个元素
  • 通过一个if语句来判断当前子数组的元素是否大于当前存储的最大值largestNumber。如果是(true)，将这个最大值存储给largestNumber。
  • 内部循环结束后，将每个子数组中的最大值存储到最初声明的变量results中
  • 最后返回results数组

取出所有子数组中的每个最大值之后，得到一个新数组results,这个时候只需要通：

Array.prototype.max = function () {
    return Math.max.apply({},this);
}

largestOfFour(arr).max();

就可以得到其中的最大值。

largestOfFour([[1,34],[456,2,3,44,234],[4567,1,4,5,6],[34,78,23,1]]).max(); // 4567

扩展阅读

中级解决方案

function largestOfFour (arr) {
    // 通过map()方法，并通过回调函数，将子数组中最大值组合在一起，得到一新数组
    return arr.map(function (group) {
        // 通过reduce方法，把每个子数组中最大值返回到group数组中
        return group.reduce(function (prev, current) {
            // 如果current 大于prev，返回current，否则返回prev
            return (current > prev) ? current : prev;
        });
    });
}

largestOfFour([[1,34],[456,2,3,44,234],[4567,1,4,5,6],[34,78,23,1]]); // [34, 456, 4567, 78]

在外层数组中使用Array.prototype.map()方法遍历数组。使用map()方法遍历数组，会调用一个回调函数，在这个回调函数中，使用reduce()方法对每个子数组group进行合并，将值返回到一个新数组中。而在使用reduce()方法时，同样会调用一个回调函数，这个回调函数只做了一件事情，就是子数组中的元素做为比较，如果current大于prev，将会返回current，否则返回prev，最终得到每个子数组中最大值。

和前面一样，通过Math.max.apply()最终得到最大值。

扩展阅读

最佳解决方案

function largestOfFour (arr) {
    return arr.map(Function.apply.bind(Math.max, null));
}

largestOfFour([[1,34],[456,2,3,44,234],[4567,1,4,5,6],[34,78,23,1]]); //[34, 456, 4567, 78]

这个方案，使用Function.bind方法创建一个特殊的回调函数，就类似于Math.max方法一样，但其有一个Function.prototype.apply功能，将数组作为它的参数。

  • 先对主数组中的每个元素做遍历，也就是数组内部的每个子数组
  • 使用map()方法需要一个回调函数，用来找出内部每个数组中的最大值。需要创建一个函数，让Math.max能接受输入的数组工作。换句话说，这是非常简单而且这样工作也非常的好，如Math.max([9,43,20,6]);将会返回最大值43
  • Function.prototype.apply方法工作可以接受数组做为参数，但函数通过调用上下文，这事情就有点复杂。例如Math.max.apply(null,[9,43,20,6])将调用一个Max.max方法，但这样的方法找起来不容易。

这里给Function.prototype.apply方法传递了一个null参数，告诉Math.max不需要任何上下文。

  • 因为arr.map()需要一个回调函数，而不只是一个表达式，我们在Function.bind方法中提供了一个函数
  • 因为Function.prototype.apply是一个静态方法，类似一个函数对象，我们可以称之为Function.prototype.apply上绑定了一个Function.prototype.bind。例如: Function.apply.bind
  • 现在可以通过Function.prototype.apply.bind回调函数指定其上下文，比如在这个示例中的Math.max方法
  • 由于是嵌入到Function.prototype.apply方法，需要一个上下文作为第一个参数，而且这个上下文还是一个虚假的。
  • 所以我们将null作为第二个参数传递给Function.prototype.apply.bind，并且绑定一个上下文，这个上下文就是Math.max方法
  • 由于Math.max是独立于任何上下文的，所以它会忽略Function.prototype.apply方法调用的虚假上下文
  • 我们使用Function.prototype.apply.bind(Math.max,null)让一个新函数接受arr.map值，比如数组中的子数组

扩展阅读

多维数组中取最大值

上文使用不同的方法实现了从二维数组中取出子数组中最大值，并且将这些最大值重新组成一个新数组，如果延伸一下，取出里面的最大值时，还需要使用Array.prototype.max函数，函数中通过Math.max.apply({},this)取得最大值。不过如果不是二维数组，那上述方法将无法取出数组中最大的值。

而在多维数组中取最大值，可以通过join()和split()方法组合在一起：

function largestOfFour (arr) {
    var newArray = arr.join(",").split(",");
    return Math.max.apply({},newArray);
}

largestOfFour([12,23]); // =>23
largestOfFour([12,23,[1234,324],[345,566]]); // =>1234
largestOfFour([12,23,[1234,324,[23121,90890]],[345,566,[345,78,90]]]); // =>90890
largestOfFour([12,23,[1234,324,[23121,90890]],[345,566,[345,78,90,[90909090,988]]]]); // =>90909090

同样可以使用类似的方法取出多维数组中的最小值：

function smallerOfFour (arr) {
    var newArray = arr.join(",").split(",");
    return Math.min.apply({},newArray);
}

smallerOfFour([12,23]); // =>12
smallerOfFour([112,23,[1234,324],[345,566]]); // =>23
smallerOfFour([212,123,[1234,324,[23121,90890]],[345,566,[345,78,90]]]); // =>78
smallerOfFour([102,230,[1234,324,[23121,90890]],[345,566,[345,78,90,[90909090,988]]]]); // =>78

总结

在《JavaScript学习笔记：取数组中最大值和最小值》一文中介绍了使用Math.max.apply({},arr)来取数组中最大的数字。这篇文章中从不同的角度的介绍了如何在二维数组中取出最大的数，但很多时候，数组还有多维数组，文章最后介绍了如何实现多维数组中取出最大值。如果您有更多的方案，欢迎在评论中与我们一起分享。

初学者学习笔记，如有不对，还希望高手指点。如有造成误解，还希望多多谅解。

大漠

常用昵称“大漠”，W3CPlus创始人，目前就职于手淘。中国Drupal社区核心成员之一。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3：核心技术与案例实战》。

如需转载，烦请注明出处：http://www.w3cplus.com/javascript/algorithm-return-largest-numbers-in-arrays.html

返回顶部