Три способи знайти найбільше число в масиві за допомогою JavaScript

У цій статті я збираюся пояснити, як вирішити проблему Free Return Camp “Повернути найбільші цифри в масиви . Це передбачає повернення масиву з найбільшими числами з кожного з підмасивів.

Є три підходи, які я розгляну:

  1. з циклом FOR
  2. за допомогою методу зменшення ()
  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  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  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 () та зменшення ()

Для цього рішення ви будете використовувати два методи: метод Array.prototype.map () та метод Array.prototype.reduce ().

  • Метод map () створює новий масив з результатами виклику наданої функції для кожного елемента цього масиву. Використання map викликає надану функцію зворотного виклику один раз для кожного елемента масиву, по порядку, і створює новий масив з результатів.
  • Метод reduce () застосовує функцію до накопичувача та кожного значення масиву, щоб зменшити його до одного значення.

Трійчастий оператор є єдиним 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: повернення найбільших чисел у масиві із вбудованими функціями - за допомогою карти () та застосування ()

Для цього рішення ви будете використовувати два методи: метод 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

Зверніть увагу, що перший аргумент, який застосовується (), встановлює значення ' 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]]);

Сподіваюсь, вам це було корисно. Це частина моєї серії “Як вирішити алгоритми FCC” про виклики, пов’язані з алгоритмом табору вільного коду, де я пропоную кілька рішень і покроково пояснюю, що відбувається під капотом.

Три способи повторити рядок у JavaScript

У цій статті я розтлумачу, як вирішити завдання freeCodeCamp "Повторити рядок, повторити рядок". Це передбачає ...

Два способи підтвердити закінчення рядка в JavaScript

У цій статті я поясню, як вирішити проблему freeCodeCamp "Підтвердити закінчення".

Три способи змінити рядок у JavaScript

Ця стаття заснована на сценарії базового алгоритму табору Free Code Camp «Зворот рядка»

Три способи розкласти число на множники в JavaScript

Ця стаття заснована на сценарії базового алгоритму табору Free Code Camp “Розділення числа на факториали”

Два способи перевірити паліндроми в JavaScript

Ця стаття заснована на сценарії базового алгоритму табору Free Code Camp «Перевірка паліндромів».

Три способи знайти найдовше слово в рядку в JavaScript

Ця стаття заснована на сценарії базового алгоритму табору Free Code Camp «Знайди найдовше слово в рядку».

Три способи озаглавити речення у JavaScript

Ця стаття заснована на сценарії базового алгоритму табору Free Code Camp “Заголовок - вирок”.

Якщо у вас є власне рішення чи будь-які пропозиції, поділіться ними нижче в коментарях.

Або ви можете стежити за мною на Medium , Twitter, Github та LinkedIn , відразу після того, як ви натиснете зелене серце внизу ;-)

# Будьте цікаві, # KeepOnHacking & # MakeItHappen!

Додаткові ресурси

  • для - MDN
  • array.length - MDN
  • map () метод - MDN
  • метод зменшення () - MDN
  • Тернарний оператор - MDN
  • метод apply () - MDN
  • Math.max () - MDN
  • це - MDN