在JavaScript中嵌套循环

If you're having trouble understanding freeCodeCamp's Nesting For Loops challenge, don't worry. We got your back.

如果您在理解freeCodeCamp的Nesting For Loops挑战时遇到麻烦，请不要担心。 我们得到了你的支持。

In this problem you have to complete the

multiplyAll()

function, and takes a multi-dimensional array as an argument. Remember that a multi-dimensional array, sometimes called a 2D array, is just an array of arrays, for example,

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

.

在此问题中，您必须完成

multiplyAll()

函数，并使用多维数组作为参数。 请记住，有时称为2D数组的多维数组只是数组的数组，例如

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

。

In the editor on the right,

multiplyAll()

is defined as follows:

在右侧的编辑器中，

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]]);

You need to complete the function so it multiplies the

product

variable by each number in the sub-arrays of the parameter

arr

, which is a multi-dimensional array.

您需要完成该功能，以便将

product

变量乘以参数

arr

的子数组中的每个数字(多维数组)。

There are a lot of different ways to solve this problem, but we'll focus on the simplest method using

for

loops.

解决此问题的方法有很多，但我们将重点介绍使用

for

循环的最简单方法。

设置您的

for

循环 (Set up your

for

loops)

Because

arr

is a multi-dimensional array, you'll need two

for

loops: one to loop through each of the sub-arrays arrays, and another to loop through the elements in each sub-array.

由于

arr

是多维数组，因此需要两个

for

循环：一个循环遍历每个子数组阵列，另一个循环遍历每个子数组中的元素。

遍历内部数组 (Loop through the inner arrays)

To do this, set up a

for

loop like you've done in previous challenges:

为此，请像之前的挑战一样设置一个

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]]);

Note that we're using

let

instead of

var

for the loop and to declare

product

. In this challenge you won't notice a difference between the two, but generally it's good practice to use ES6's

const

and

let

whenever you can. You can read more about why in this article.

请注意，我们在循环中使用

let

而不是

var

并声明

product

。 在这个挑战中，您不会注意到两者之间的区别，但是通常，最好使用ES6的

const

并

let

在任何时候都可以使用。 您可以在本文中阅读有关原因的更多信息。

Now log each of the sub-arrays to the console:

现在，将每个子数组记录到控制台：

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]]);

Because you're calling

multiplyAll()

with

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

at the bottom, you should see the following:

因为您要在底部使用

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

调用

multiplyAll()

，所以应该看到以下内容：

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

遍历每个子数组中的元素 (Loop through the elements in each sub-array)

Now you need to loop through each number in the sub-arrays you just logged to the console.

现在，您需要遍历刚登录到控制台的子数组中的每个数字。

Remove

console.log(arr[i]);

and create another

for

loop inside of the one you just wrote:

删除

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]]);

Remember that, for the inner loop, we need to check the

.length

of

arr[i]

since

arr[i]

is one of the sub-arrays we looked at earlier.

请记住，对于内部循环，我们需要检查

arr[i]

的

.length

，因为

arr[i]

是我们前面介绍的子数组之一。

Now log

arr[i][j]

to the console to see each of the individual elements:

现在，将

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

Finally, multiply

product

by every element in each of the sub-arrays:

最后，将

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]]);

If you log

product

to the console, you'll see the correct answer for each test case:

如果将

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]]

仔细看看 (A closer look)

If you're still not sure why the code above works, don't worry – you're not alone. Working with nested loops is complicated, and even experienced developers can get confused.

如果您仍然不确定上面的代码为何起作用，请不要担心-您并不孤单。 使用嵌套循环很复杂，甚至有经验的开发人员也会感到困惑。

In cases like this, it can be helpful to log something more detailed to the console. Go back to your code and log

`Sub-array ${i}: ${arr[i]}`

to the console just before the inner

for

loop:

在这种情况下，将更详细的内容记录到控制台会很有帮助。 返回您的代码，并在内部

for

循环之前将

`Sub-array ${i}: ${arr[i]}`

登录到控制台：

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]]);

In the outer

for

loop, each iteration goes through the sub-arrays in

arr

. You should see this in the console:

在外部

for

循环中，每次迭代都通过

arr

的子数组。 您应该在控制台中看到以下内容：

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

Note that we're using template literals above.

`Sub-array ${i}: ${arr[i]}`

is the same as

'Sub-array ' + i + ': ' + arr[i]

, just much easier to write.

请注意，我们使用的是上面的模板文字 。

`Sub-array ${i}: ${arr[i]}`

与

'Sub-array ' + i + ': ' + arr[i]

，只是写起来容易得多。

Now in the inner

for

loop, log

`Element ${j}: ${arr[i][j]}`

to the console:

现在，在内部

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]]);

The inner

for

loop goes through each element in each sub-array (

arr[i]

), so you should see this in the console:

内部的

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

The first iteration of

i

grabs the first sub-array,

[1, 2]

. Then the first iteration of

j

goes through each element in that sub-array:

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

...

This example is pretty simple, but

arr[i][j]

can still be difficult to understand without logging multiple things to the console.

这个例子非常简单，但是如果没有在控制台上记录多个内容，

arr[i][j]

仍然很难理解。

One quick improvement we can make is declaring a

subArray

variable in the outer

for

loop and setting it equal to

arr[i]

:

我们可以做的一个快速改进是在外部

for

循环中声明一个

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 < arr[i].length; j++) {
product *= arr[i][j];
}
}
// Only change code above this line
return product;
}

multiplyAll([[1,2],[3,4],[5,6,7]]);

Then just make a few tweaks to the code to use the new

subArray

variable instead of

arr[i]

:

然后只需对代码进行一些调整即可使用新的

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]]);

That should be everything you need to know about multi-dimensional arrays and nested

for

loops. Now get out there and iterate with the best of 'em!

这应该是你需要知道的关于多维数组和嵌套一切

for

循环。 现在到那里去，并尽其所能进行迭代！

翻译自: https://www.freecodecamp.org/news/nesting-for-loops-in-javascript/