JS从零开始（12）

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第12天，点击查看活动详情

for循环例题

下面是一个for循环的例题🎈

一、打印5个图标案例

        var str = '';
        for (var i = 0; i <= 5; i++) {
            str = str +'👩‍🦰';
        }
        console.log(str);

如下所见👇

这个比较简单，我们不做分析，下面来看几个双重for循环的案例

二、打印5行5列图标

        var str = '';
        for (var i = 1; i <= 5; i++) {
            for (var j = 1; j <= 5; j++) {
                str = str + '🎈';
            }
            str = str + '\n';
        }
        console.log(str);

分析：我们可以看到外层i和内层j均是小于等于5，在外层，i是用来控制行数，内层j是用来控制列数。当i等于1的时候，内层j开始循环遍历1~5，而str也由空逐渐增加到5个🎈，内层（列数）第一遍遍历完后得到一行🎈，然后再再这行末尾另起一行，由此开始遍历外层第二遍（i=2），再进入内层j遍历，以此类推，最终打印5行5列的🎈

三、打印倒三角形

        var str1 = '';
        for (var i = 1; i <= 10; i++) {
            for (var j = i; j <= 10; j++) {
                str1 += '🎈';
            }
            str1 += '\n';
        }
        console.log(str1);

分析：这个跟上面的区别就在于核心算法var j = i，为什么这样说呢？我们看上面的图中的三角形，行数和列数刚好顺序相反，所以算法var j = i的意义就在于让每行打印的🎈都逐渐减少（10~1），这样倒三角形就打印出来了

ps：大家可以思考一下正三角形是怎样打印的，跟倒三角形很类似。

四、打印九九乘法表

        var str = '';
        for (var i = 1; i <= 9; i++) {
            for (var j = 1; j <= i; j++) {
                str += j + 'x' + i +'=' + i * j + '\t';
            }
            str += '\n';
        }
        console.log(str);

分析：这个题目可以说也是正三角形，那么他的核心算法是什么呢？毫无疑问是j <= i和str += j + 'x' + i +'=' + i * j + '\t'。j <= i是打印正三角形的核心算法，而str += j + 'x' + i +'=' + i * j + '\t'是打印乘法表的核心算法。这个算法很简单，无非就是字符串拼接和转义字符的使用，大家自行体会👀。