Вкладання для циклів у JavaScript

Якщо у вас виникли проблеми з розумінням завдання вкладання для циклів freeCodeCamp, не хвилюйтеся. Ми отримали вашу спину.

У цій задачі ви повинні завершити multiplyAll()функцію, а в якості аргументу бере багатовимірний масив. Пам'ятайте , що багатовимірний масив, іноді званий 2D - масив, це просто масив масивів, наприклад, [[1,2], [3,4], [5,6]].

У редакторі праворуч multiplyAll()визначається наступним чином:

function multiplyAll(arr) { var product = 1; // Only change code below this line // Only change code above this line return product; } multiplyAll([[1,2],[3,4],[5,6,7]]); 

Вам потрібно заповнити функцію, щоб вона помножила productзмінну на кожне число в підмасивах параметра arr, який є багатовимірним масивом.

Існує безліч різних способів вирішити цю проблему, але ми зупинимося на найпростішому методі з використанням forциклів.

Налаштуйте свої forпетлі

Оскільки arrце багатовимірний масив, вам знадобляться два forцикли: один, щоб прокрутити кожен із масивів підмасивів, а інший - для циклу між елементами в кожному підмасиві.

Прокрутіть внутрішні масиви

Для цього створіть forцикл, як це було в попередніх випробуваннях:

function multiplyAll(arr) { let product = 1; // Only change code below this line for (let i = 0; i < arr.length; i++) { } // Only change code above this line return product; } multiplyAll([[1,2],[3,4],[5,6,7]]); 

Зверніть увагу, що ми використовуємо letзамість varfor для циклу і для оголошення product. У цьому виклику ви не помітите різниці між ними, але загалом корисно використовувати ES6 constта letбудь-коли. Детальніше про те, чому, ви можете прочитати в цій статті.

Тепер увійдіть кожен з підмасивів у консоль:

function multiplyAll(arr) { let product = 1; // Only change code below this line for (let i = 0; i < arr.length; i++) { console.log(arr[i]); } // Only change code above this line return product; } multiplyAll([[1,2],[3,4],[5,6,7]]); 

Тому що ви телефонуєте multiplyAll()з [[1,2],[3,4],[5,6,7]]в нижній частині , ви повинні побачити наступне:

[ 1, 2 ] [ 3, 4 ] [ 5, 6, 7 ]

Прокрутіть елементи в кожному підмасиві

Тепер вам потрібно прокрутити кожне число в підмасивах, які ви щойно увійшли на консоль.

Видаліть console.log(arr[i]);і створіть ще один forцикл у тому, який ви щойно написали:

function multiplyAll(arr) { let product = 1; // Only change code below this line for (let i = 0; i < arr.length; i++) { for (let j = 0; j < arr[i].length; j++) { } } // Only change code above this line return product; } multiplyAll([[1,2],[3,4],[5,6,7]]); 

Пам'ятайте , що для внутрішнього циклу, нам потрібно перевірити .lengthз arr[i]так arr[i]є однією з подрешеток , які ми розглянули раніше.

Тепер увійдіть arr[i][j]до консолі, щоб побачити кожен з окремих елементів:

function multiplyAll(arr) { let product = 1; // Only change code below this line for (let i = 0; i < arr.length; i++) { for (let j = 0; j < arr[i].length; j++) { console.log(arr[i][j]); } } // Only change code above this line return product; } multiplyAll([[1,2],[3,4],[5,6,7]]); 
1 2 3 4 5 6 7

Нарешті, помножте productна кожен елемент у кожному з підмасивів:

function multiplyAll(arr) { let product = 1; // Only change code below this line for (let i = 0; i < arr.length; i++) { for (let j = 0; j < arr[i].length; j++) { product *= arr[i][j]; } } // Only change code above this line return product; } multiplyAll([[1,2],[3,4],[5,6,7]]);

Якщо ви увійдете productв консоль, ви побачите правильну відповідь для кожного тесту:

function multiplyAll(arr) { let product = 1; // Only change code below this line for (let i = 0; i < arr.length; i++) { for (let j = 0; j < arr[i].length; j++) { product *= arr[i][j]; } } // Only change code above this line console.log(product); return product; } multiplyAll([[1,2],[3,4],[5,6,7]]);
6 // [[1], [2], [3]] 5040 // [[1, 2], [3, 4], [5, 6, 7]] 54 // [[5, 1], [0.2, 4, 0.5], [3, 9]]

Пильний погляд

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

У таких випадках може бути корисним записати щось детальніше на консоль. Поверніться до свого коду і увійдіть `Sub-array ${i}: ${arr[i]}`до консолі безпосередньо перед внутрішнім forциклом:

function multiplyAll(arr) { let product = 1; // Only change code below this line for (let i = 0; i < arr.length; i++) { console.log(`Sub-array ${i}: ${arr[i]}`); for (let j = 0; j < arr[i].length; j++) { product *= arr[i][j]; } } // Only change code above this line return product; } multiplyAll([[1,2],[3,4],[5,6,7]]);

У зовнішньому forциклі кожна ітерація проходить через підмасиви в arr. Ви повинні побачити це в консолі:

Sub-array 0: 1,2 Sub-array 1: 3,4 Sub-array 2: 5,6,7

Зверніть увагу, що ми використовуємо літерали шаблонів вище. `Sub-array ${i}: ${arr[i]}`це те саме 'Sub-array ' + i + ': ' + arr[i], що просто набагато легше писати.

Тепер у внутрішньому forциклі увійдіть `Element ${j}: ${arr[i][j]}`до консолі:

function multiplyAll(arr) { let product = 1; // Only change code below this line for (let i = 0; i < arr.length; i++) { console.log(`Sub-array ${i}: ${arr[i]}`); for (let j = 0; j < arr[i].length; j++) { console.log(`Element ${j}: ${arr[i][j]}`); product *= arr[i][j]; } } // Only change code above this line return product; } multiplyAll([[1,2],[3,4],[5,6,7]]);

Внутрішній forцикл проходить через кожен елемент у кожному підмасиві ( arr[i]), тому ви повинні побачити це в консолі:

Sub-array 0: 1,2 Element 0: 1 Element 1: 2 Sub-array 1: 3,4 Element 0: 3 Element 1: 4 Sub-array 2: 5,6,7 Element 0: 5 Element 1: 6 Element 2: 7

Перша ітерація iзахоплює перший допоміжний масив, [1, 2]. Тоді перша ітерація з jпроходить через кожен елемент у цьому підмасиві:

// i is 0 arr[0] // [1, 2]; // j is 0 arr[0][0] // 1 // j is 1 arr[0][1] // 2 ----- // i is 1 arr[1] // [3, 4] // j is 0 arr[1][0] // 3 // j is 1 arr[1][1] // 4 ...

Цей приклад досить простий, але arr[i][j]все одно може бути важким для розуміння без реєстрації декількох речей на консолі.

Одним із швидких покращень, які ми можемо зробити, є оголошення subArrayзмінної у зовнішньому forциклі та встановлення її рівною arr[i]:

function multiplyAll(arr) { let product = 1; // Only change code below this line for (let i = 0; i < arr.length; i++) { const subArray = arr[i]; for (let j = 0; j < arr[i].length; j++) { product *= arr[i][j]; } } // Only change code above this line return product; } multiplyAll([[1,2],[3,4],[5,6,7]]); 

Потім просто зробіть кілька налаштувань коду, щоб використовувати нову subArrayзмінну замість arr[i]:

function multiplyAll(arr) { let product = 1; // Only change code below this line for (let i = 0; i < arr.length; i++) { const subArray = arr[i]; for (let j = 0; j < subArray.length; j++) { product *= subArray[j]; } } // Only change code above this line return product; } multiplyAll([[1,2],[3,4],[5,6,7]]); 

Це має бути все, що вам потрібно знати про багатовимірні масиви та вкладені forцикли. А тепер виходьте туди і повторюйте з найкращими з них!