使用JavaScript在数组中找到最大数字的三种方法

在本文中,我将解释如何解决Free Code Camp的“在数组中返回最大数”挑战。这涉及从每个子数组返回具有最大数目的数组。

我将介绍三种方法:

  1. 带FOR循环
  2. 使用reduce()方法
  3. 使用Math.max()

算法挑战

  • 从每个提供的子数组中返回一个包含最大数目的数组。为简单起见,提供的数组将仅包含4个子数组。
  • 你可以使用简单的for循环遍历数组,并使用数组语法arr
    [i]访问每个成员。
function largestOfFour(arr) {
     
  return arr;
}
largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]]);

提供测试用例

largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]]) should return an array.

largestOfFour([[13, 27, 18, 26], [4, 5, 1, 3], [32, 35, 37, 39], [1000, 1001, 857, 1]]) should return [27,5,39,1001].

largestOfFour([[4, 9, 1, 3], [13, 35, 18, 26], [32, 35, 97, 39], [1000000, 1001, 857, 1]]) should return [9, 35, 97, 1000000].

方法1:使用For循环返回数组中的最大数字

这是我的解决方案,带有嵌入的注释可以帮助您理解它

function largestOfFour(arr) {
     
   // Step 1. Create an array that will host the result of the 4 sub-arrays
   var largestNumber = [0,0,0,0];
 
   // Step 2. Create the first FOR loop that will iterate through the arrays
   for(var arrayIndex = 0; arrayIndex < arr.length; arrayIndex++) {
     
   /* The starting point, index 0, corresponds to the first array */
 
    // Step 3. Create the second FOR loop that will iterate through the sub-arrays
    for(var subArrayIndex = 0; subArrayIndex < arr[arrayIndex].length; subArrayIndex++) {
     
    /* The starting point, index 0, corresponds to the first sub-array */
       
       if(arr[arrayIndex][subArrayIndex] > largestNumber[arrayIndex]) {
     
          
          largestNumber[arrayIndex] = arr[arrayIndex][subArrayIndex];
          
       /* FOR loop cycles
          arrayIndex => i
          subArrayIndex => j
          
       Iteration in the first array
          For each iteration: arr[i][j]           largestNumber[i]          if arr[i][j] > largestNumber[i]?     then largestNumber[i] = arr[i][j]
          First iteration:    arr[0][0] => 4      largestNumber[0] => 0     4 > 0? => TRUE                       then largestNumber[0] = 4
          Second iteration:   arr[0][1] => 5      largestNumber[0] => 4     5 > 4? => TRUE                       then largestNumber[0] = 5
          Third iteration:    arr[0][2] => 1      largestNumber[0] => 5     1 > 5? => FALSE                      then largestNumber[0] = 5
          Fourth iteration:   arr[0][3] => 3      largestNumber[0] => 5     3 > 5? => FALSE                      then largestNumber[0] = 5
          Fifth iteration:    arr[0][4] => FALSE  largestNumber[0] => 5                                          largestNumber = [5,0,0,0]
       Exit the first array and continue on the second one
       Iteration in the second array
          For each iteration: arr[i][j]            largestNumber[i]           if arr[i][j] > largestNumber[i]?     then largestNumber[i] = arr[i][j]
          First iteration:    arr[1][0] => 13      largestNumber[1] => 0      13 > 0? => TRUE                      then largestNumber[1] = 13
          Second iteration:   arr[1][1] => 27      largestNumber[1] => 13     27 > 13? => TRUE                     then largestNumber[1] = 27
          Third iteration:    arr[1][2] => 18      largestNumber[1] => 27     18 > 27? => FALSE                    then largestNumber[1] = 27
          Fourth iteration:   arr[1][3] => 26      largestNumber[1] => 27     26 > 27? => FALSE                    then largestNumber[1] = 27
          Fifth iteration:    arr[1][4] => FALSE   largestNumber[1] => 27                                          largestNumber = [5,27,0,0]
       Exit the first array and continue on the third one
       Iteration in the third array
          For each iteration: arr[i][j]            largestNumber[i]           if arr[i][j] > largestNumber[i]?     then largestNumber[i] = arr[i][j]
          First iteration:    arr[2][0] => 32      largestNumber[2] => 0      32 > 0? => TRUE                      then largestNumber[2] = 32
          Second iteration:   arr[2][1] => 35      largestNumber[2] => 32     35 > 32? => TRUE                     then largestNumber[2] = 35
          Third iteration:    arr[2][2] => 37      largestNumber[2] => 35     37 > 35? => TRUE                     then largestNumber[2] = 37
          Fourth iteration:   arr[2][3] => 39      largestNumber[2] => 37     39 > 37? => TRUE                     then largestNumber[2] = 39
          Fifth iteration:    arr[2][4] => FALSE   largestNumber[2] => 39                                          largestNumber = [5,27,39,0]
       Exit the first array and continue on the fourth one
       Iteration in the fourth array
          For each iteration: arr[i][j]            largestNumber[i]           if arr[i][j] > largestNumber[i]?     then largestNumber[i] = arr[i][j]
          First iteration:    arr[3][0] => 1000    largestNumber[3] => 0      1000 > 0? => TRUE                    then largestNumber[3] = 1000
          Second iteration:   arr[3][1] => 1001    largestNumber[3] => 1000   1001 > 1000? => TRUE                 then largestNumber[3] = 1001
          Third iteration:    arr[3][2] => 857     largestNumber[3] => 1001   857 > 1001? => FALSE                 then largestNumber[3] = 1001
          Fourth iteration:   arr[3][3] => 1       largestNumber[3] => 1001   1 > 1001? => FALSE                   then largestNumber[3] = 1001
          Fifth iteration:    arr[3][4] => FALSE   largestNumber[3] => 1001                                        largestNumber = [5,27,39,1001]
       Exit the FOR loop */
        }
    }
 }
 // Step 4. Return the largest numbers of each sub-arrays
 return largestNumber; // largestNumber = [5,27,39,1001];
}

largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]]);

这里没有我的注释:

function largestOfFour(arr) {
     
   var largestNumber = [0,0,0,0];
   for(var arrayIndex = 0; arrayIndex < arr.length; arrayIndex++) {
     
    for(var subArrayIndex = 0; subArrayIndex < arr[arrayIndex].length; subArrayIndex++) {
     
       if(arr[arrayIndex][subArrayIndex] > largestNumber[arrayIndex]) {
              
          largestNumber[arrayIndex] = arr[arrayIndex][subArrayIndex];
        }
    }
 }
 return largestNumber;
}
largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]]);

方法2:使用内置函数(map()和reduce())返回数组中的最大数字

对于此解决方案,你将使用两种方法:Array.prototype.map()方法和Array.prototype.reduce()方法。

  • map()的方法创建调用此阵列中的每个元件上的提供功能的结果的新的数组。使用map会依次为数组中的每个元素调用一次提供的回调函数,并根据结果构造一个新的数组。
  • reduce()的方法应用一个函数对蓄能器和阵列的每个值,以将其降低到一个值。

在ternary operator是唯一的JavaScript操作员三个操作数。该运算符用作if语句的快捷方式。

(currentLargestNumber > previousLargestNumber) ? currentLargestNumber : previousLargestNumber;

这也可以理解为:

if (currentLargestNumber > previousLargestNumber == true) {
     
    return currentLargestNumber;
} else {
     
    return previousLargestNumber;
}

这是我的解决方案,带有嵌入式注释:

function largestOfFour(mainArray) {
     
  // Step 1. Map over the main arrays
  return mainArray.map(function (subArray){
      // Step 3. Return the largest numbers of each sub-arrays => returns [5,27,39,1001]

    // Step 2. Grab the largest numbers for each sub-arrays with reduce() method
    return subArray.reduce(function (previousLargestNumber, currentLargestNumber) {
     

      return (currentLargestNumber > previousLargestNumber) ? currentLargestNumber : previousLargestNumber;

      /* Map process and Reduce method cycles
      currentLargestNumber => cLN
      previousLargestNumber => pLN
      Iteration in the first array
          For each iteration:     cLN         pLN       if (cLN > pLN) ?        then cLN        else pLN
          First iteration:         4           0        4 > 0? => TRUE              4             /
          Second iteration:        5           4        5 > 4? => TRUE              5             /
          Third iteration:         1           5        1 > 5? => FALSE             /             5
          Fourth iteration:        3           5        3 > 5? => FALSE             /             5
          Fifth iteration:         /           5                                               returns 5
       Exit the first array and continue on the second one
      Iteration in the second array
        For each iteration:     cLN         pLN       if (cLN > pLN) ?        then cLN        else pLN
        First iteration:        13           0        13 > 0? => TRUE            13              /
        Second iteration:       27          13        27 > 13? => TRUE           27              /
        Third iteration:        18          27        18 > 27? => FALSE           /             27
        Fourth iteration:       26          27        26 > 27? => FALSE           /             27
        Fifth iteration:         /          27                                                returns 27
      Exit the first array and continue on the third one
      Iteration in the third array
        For each iteration:     cLN         pLN       if (cLN > pLN) ?        then cLN        else pLN
        First iteration:        32           0        32 > 0? => TRUE            32              /
        Second iteration:       35          32        35 > 32? => TRUE           35              /
        Third iteration:        37          35        37 > 35? => TRUE           37              /
        Fourth iteration:       39          37        39 > 37? => TRUE           39              /
        Fifth iteration:         /          39                                                returns 39
      Exit the first array and continue on the fourth one
      Iteration in the fourth array
        For each iteration:     cLN         pLN       if (cLN > pLN) ?        then cLN        else pLN
        First iteration:        1000         0        1000 > 0? => TRUE         1000             /
        Second iteration:       1001       1000       1001 > 1000? => TRUE      1001             /
        Third iteration:        857        1001       857 > 1001 => FALSE        /             1001
        Fourth iteration:        1         1001       1 > 1001? => FALSE         /             1001
        Fifth iteration:         /         1001                                              returns 1001
      Exit the first array and continue on the fourth one */
    }, 0); // 0 serves as the context for the first pLN in each sub array
  });
}

largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]]);

这里没有注释:

function largestOfFour(mainArray) {
     
  return mainArray.map(function (subArray){
     
    return subArray.reduce(function (previousLargestNumber, currentLargestNumber) {
     
      return (currentLargestNumber > previousLargestNumber) ? currentLargestNumber : previousLargestNumber;
    }, 0);
  });
}
largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]]);

方法3:使用内置函数(map()和apply())返回数组中的最大数字

对于此解决方案,您将使用两种方法:Array.prototype.map()方法和Function.prototype.apply()方法。

  • apply()的方法调用与给定该值和参数作为数组提供(或阵列状物体)的功能。

你可以使用apply()方法将参数数组传递给函数,该函数将执行数组中的项。

这种函数称为可变函数,它们可以接受任意数量的参数,而不是固定的参数。

该Math.max()函数返回最大的零个或多个数字,我们可以通过任意数量的参数。

console.log(Math.max(4,5,1,3)); // logs 5

但是你不能将数字数组传递给像这样的方法:

var num = [4,5,1,3];
console.log(Math.max(num)); // logs NaN

这是apply()方法证明有用的地方:

var num = [4,5,1,3];
console.log(Math.max.apply(null, num)); // logs 5

请注意,apply()的第一个参数设置了’ this '的值,该方法未使用此参数,因此您传递了null。

现在您有了一种返回数组中最大数字的方法,您可以使用map()方法遍历每个子数组并返回所有最大数字。

这是我的解决方案,带有嵌入式注释:

function largestOfFour(mainArray) {
     
  // Step 1. Map over the main arrays
  return mainArray.map(function(subArray) {
      // Step 3. Return the largest numbers of each sub-arrays => returns [5,27,39,1001]
    
    // Step 2. Return the largest numbers for each sub-arrays with Math.max() method
    return Math.max.apply(null, subArray);
  });
}

largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]]);

并且没有注释:

function largestOfFour(mainArray) {
     
  return mainArray.map(function(subArray) {
     
    return Math.max.apply(null, subArray);
  });
}
largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]]);

关注:Hunter网络安全 获取更多资讯
网站:bbs.kylzrv.com
CTF团队:Hunter网络安全
文章:Sonya Moisset
排版:Hunter-匿名者

你可能感兴趣的:(技术,javascript,算法,安全,经验分享,算法挑战)