控制语句 - for 循环 - 嵌套 for 循环的使用场景

前端 - Javascript 《控制语句 - for 循环 - 嵌套 for 循环的使用场景》

在前端开发中，JavaScript 是一门至关重要的编程语言，而控制语句中的 for 循环更是我们经常使用的工具。今天，我们就来深入探讨一下 for 循环中的嵌套 for 循环及其使用场景。

什么是嵌套 for 循环

简单来说，嵌套 for 循环就是在一个 for 循环的内部再放置另一个 for 循环。外层的循环每执行一次，内层的循环就会完整地执行一遍。下面是一个基本的嵌套 for 循环示例：

for (let i = 1; i <= 3; i++) {
    for (let j = 1; j <= 2; j++) {
        console.log(`外层循环变量 i 的值为 ${i}，内层循环变量 j 的值为 ${j}`);
    }
}

在这个例子中，外层循环会执行 3 次，每次外层循环执行时，内层循环都会执行 2 次，所以最终控制台会输出 6 条信息。

嵌套 for 循环的使用场景

1. 二维数组的遍历

在处理二维数组时，嵌套 for 循环非常有用。二维数组可以看作是一个表格，有行和列。我们可以使用外层循环遍历行，内层循环遍历列。

const matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];
for (let i = 0; i < matrix.length; i++) {
    for (let j = 0; j < matrix[i].length; j++) {
        console.log(`矩阵中第 ${i + 1} 行第 ${j + 1} 列的元素是 ${matrix[i][j]}`);
    }
}

通过这种方式，我们可以依次访问二维数组中的每个元素。

2. 打印图案

嵌套 for 循环还可以用来打印各种有趣的图案，比如直角三角形。

const rows = 5;
for (let i = 1; i <= rows; i++) {
    let line = '';
    for (let j = 1; j <= i; j++) {
        line += '*';
    }
    console.log(line);
}

在这个例子中，外层循环控制行数，内层循环控制每行打印的星号数量。随着外层循环的进行，内层循环打印的星号数量逐渐增加，最终形成一个直角三角形。

3. 生成排列组合

当我们需要生成一些排列组合时，嵌套 for 循环也能派上用场。比如，我们有两个数组，需要将它们的元素进行两两组合。

const arr1 = ['a', 'b', 'c'];
const arr2 = [1, 2, 3];
for (let i = 0; i < arr1.length; i++) {
    for (let j = 0; j < arr2.length; j++) {
        console.log(`${arr1[i]}${arr2[j]}`);
    }
}

这样就可以得到所有可能的组合。

总结

嵌套 for 循环在前端开发中有着广泛的应用场景，只要我们理解了它的原理，就能灵活运用它来解决各种问题。希望通过今天的介绍，大家对嵌套 for 循环有了更深入的了解。