使用JavaScript在数组中找到最大数字的三种方法
在本文中，我将解释如何解决Free Code Camp的“在数组中返回最大数”挑战。这涉及从每个子数组返回具有最大数目的数组。
我将介绍三种方法：
- 带FOR循环
- 使用reduce（）方法
- 使用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-匿名者