标签 前端,js 下的文章

js循环嵌套输出99乘法表

如果使用js的循环嵌套输出99乘法表的原理,其实也就是正三角的输出原理

把内循环的条件表达式,改为外循环初始化表达式的变量即可

上完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style>
        span {
            display: inline-block;
            width: 72px;
            border: 1px solid gray;
            margin: 5px;
            padding: 5px;
            font-weight: 700;
        }
    </style>
</head>
<body>
<script>
    for (let i = 1; i <= 9; i++) {
        for (let j = 1; j <= i; j++) {
            document.write("<span>" + i + "*" + j + "=" + i * j + " " + "</span>")
        }
        document.write("<br>")
    }

    /* 
     外循环控制行数,内循环控制列数
     循环九行出来,用行数乘列数进行输出99乘法表
     */
</script>

</body>
</html>

 

输出结果:

1*1=1
2*1=2 2*2=4
3*1=3 3*2=6 3*3=9
4*1=4 4*2=8 4*3=12 4*4=16
5*1=5 5*2=10 5*3=15 5*4=20 5*5=25
6*1=6 6*2=12 6*3=18 6*4=24 6*5=30 6*6=36
7*1=7 7*2=14 7*3=21 7*4=28 7*5=35 7*6=42 7*7=49
8*1=8 8*2=16 8*3=24 8*4=32 8*5=40 8*6=48 8*7=56 8*8=64
9*1=9 9*2=18 9*3=27 9*4=36 9*5=45 9*6=54 9*7=63 9*8=72 9*9=81

js使用for循环嵌套输出正三角

需求:输出到三角形到界面

*
**
***
****
*****

想要输出正三角, 首先得了解一个规律, 循环嵌套规律

循环嵌套 => 外循环控制行数 ,内循环控制列数(横行竖列)


先输出一个矩形试试

<script>
    for (let i = 0; i < 5; i++) {
        for (let j = 0; j < 5; j++) {
            document.write("*");
        }
        document.write("<br/>")
    }
</script>
*****
*****
*****
*****
*****

得到这个效果之后 ,观察一下规律

正三角的规律

第二行的列数比第一行的列数多

第三行的列数比第二行的列数多

第四行的列数比第三行的列数多

第五行的列数比第四行的列数多


得到规律之后,也知道了, 循环嵌套是 外循环控制行数,内循环控制列数 

所以现在我们只需要进行列数的控制即可,控制什么呢?控制每次每循环一次,列数就比上次循环的多一列

<script>
    //输出五行
    for (let i = 0; i < 5; i++) {
        //每次循环的时候输出一列,
        //因为循环是从0开始的,所以要进行+1
        for (let j = 0; j < i + 1; j++) {
            document.write("*");
        }
        document.write("<br/>")
    }
</script>
*
**
***
****
*****

现在成功输出了正三角了,而输出正三角形的方法则是改变内循环的循环次数,在第一次循环的时候,改变循环的时候的列数即可,

 

而下面的第二种方式输出的效果也是一样的, 只要弄懂了规律,那么输出的方式多种多样

<script>
    //输出五行
    for (let i = 1; i <= 5; i++) {
        //每次循环的时候输出一列,
        //因为循环是从0开始的,所以要进行+1
        for (let j = 0; j < i; j++) {
            document.write("*");
        }
        document.write("<br/>")
    }
</script>
*
**
***
****
*****

第三种方式

<script>
    for (let i = 0; i < 5; i++) {
        for (let j = 0; j <= i; j++) {
            document.write("*");
        }
        document.write("<br/>")
    }
</script>
*
**
***
****
*****

第三种方式规律, 把内循环的条件表达式,改为外循环初始化表达式的变量即可

js使用for循环嵌套输出倒三角

需求:输出到三角形到界面

*****
****
***
**
*

想要输出倒三角, 首先得了解一个规律, 循环嵌套规律

循环嵌套 => 外循环控制行数 ,内循环控制列数(横行竖列)


先输出一个矩形试试

<script>
    for (let i = 0; i < 5; i++) {
        for (let j = 0; j < 5; j++) {
            document.write("*");
        }
        document.write("<br/>")
    }
</script>
*****
*****
*****
*****
*****

得到这个效果之后 ,观察一下规律

倒三角的规律

第二行的列数比第一行的列数少

第三行的列数比第二行的列数少

第四行的列数比第三行的列数少

第五行的列数比第四行的列数少


得到规律之后,也知道了, 循环嵌套是 外循环控制行数,内循环控制列数 

所以现在我们只需要进行列数的控制即可,控制什么呢?控制每次每循环一次,列数就比上次一次的少一列


<script>
    for (let i = 0; i < 5; i++) {
        //控制列数的内循环
        for (let j = i; j < 5; j++) {
            document.write("*");
        }
        document.write("<br/>")
    }
</script>
*****
****
***
**
*

现在成功输出了倒三角了,而我们从一个矩形输出转换为倒三角,只改了代码的一个字符, 也就是把内循环的初始值改变成了外循环的初始化值

外循环每循环一次,i都要加1 ,所以 i = 0,1,2,3,4; 而我们内循环正好是需要减少循环输出的列数,所以 i = 0的时候,则输出5个,i =1,的时候输出4个,以此类推,那么就得到了一个倒三角

 

而下面的第二种方式输出的效果也是一样的, 只要弄懂了规律,那么输出的方式多种多样

<script>
    for (let i = 0; i < 5; i++) {
        //控制列数的内循环
        for (let j = 0; j < 5 - i; j++) {
            document.write("*");
        }
        document.write("<br/>")
    }
</script>
*****
****
***
**
*

js自增自减运算符

什么自增自减运算符?

自增运算符: ++

自减运算符: – –


自增自减运算符的作用

自增运算符:可以快速的对一个变量中保存的数据进行 + 1

自减运算符:可以快速的对一个变量中保存的数据进行 – 1

自增运算符和自减运算符的底层原理:变量A = 变量A   +/ – 1


–基础用法


<script>
	//自增运算符
	let num = 5;
	num++;
	console.log(num) //6
	console.log("-------");
	//自减运算符
	let num1 = 5;
	num1--;
	console.log(num1); //4
</script>

自增和自减运算符,不仅仅是可以写在变量的后面, 还可以写在变量的前面

<script>
	//运算符写在前面
	//自增运算符
	let num = 5;
	++num;
	console.log(num);	//6
	//自减运算符
	let num1 = 5;
	--num1;
	console.log(num1);	//4
</script>

既然自增运算符和自减运算符都可以写在变量的前面和后面,但是他们的区别又是什么呢?

区别:

写在变量的后面,表示变量先参与其他的运算,然后再进行自增或者自减

写在变量的前面,表示变量先自增或者自减,然后再参与其他的运算


<script>
	let num = 1;
	let res = num++ + 1;
	console.log(res);		//2
</script>

上面的答案是等于2的原因则是

写在变量的后面,表示变量先参与其他的运算,然后再进行自增或者自减

let res = num++ + 1;   这句话是可以拆分成以下两句话

let res = num + 1  ;    num ++;

num会参与运算,也就是先+1, 然后自已再进行++操作, 所以结果等于2


<script>
       let num = 1;
       let res = ++num + 1;
       console.log(res); //3
</script>

上面的答案是等于3的原因则是

写在变量的前面,表示变量先自增或者自减,然后再参与其他的运算

let res = –num + 1;   这句话是可以拆分成以下两句话

let res = num ++;     num + 1  ;

num会先自已自增,也就是自增后num已经等于2了, 再和运算+1, 那么结果就是3


自增自减运算符的注意点:

自增自减运算符只能是出现在变量的前面或者后面,而不能出现在常量或者表阿达的前边或者后面.(常量不能被改变)

错误写法
<script>
	666++;
	++666;
		
	(1+1)++;
	++(1+1);
</script>

在开发中 ,最后不要把自增或者自减运算符写在表达式中,而是分开写

<script>
	let a,b;
	a = 10;
	b = 5;
	let res = a++ + ++b;
	//上面的这句话可以拆分成下面两句话,但是上面的这句话阅读极差.所以不推荐
	//a + b++ ;  10 + 6
	//a ++ 	    11
	console.log(res);
</script>

推荐以下写法

<script>
	let a,b;
	a = 10;
	b = 5;
	b++;
	let res = a + b;
	a++;
	console.log(res);
</script>

两种写法的不同,一种写在表达式中,一种写在表达式外边, 而代码的可阅读性则会是天差地别。


重点难点:

自增和自减运算符中的 写在前面和写在后面的区别 ,这个是重点,特别是写在前面,这个是一个重点,重点掌握以下即可。

扫码使用手机查看

站点统计

  • 文章总数:66 篇
  • 页面总数:8 个
  • 评论总数:4353 条
  • 分类总数:4 个
  • 标签总数:19 个
  • 运行天数:137 天

你凭什么不努力,但又什么都想要~


「温馨提醒您」: 代码千万行,注释第一行。命名不规范,同事泪千行。

阅读统计

  • 9564总阅览数:
  • 15今天阅读数量:
  • 13今天访问者数:

近期文章

文章归档

分类目录

标签云

© 2020 - Sitemap - Privacy Policy