JS学习归纳3

最新推荐文章于 2024-06-12 22:18:06 发布
最新推荐文章于 2024-06-12 22:18:06 发布
阅读量1.3k 收藏 9
点赞数 24
文章标签： 学习 javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SPIRITE_SYF/article/details/137723943
版权

        上篇文章我们总结了有关运算符、逻辑符号、for 、switch的学习。本篇文章主要是对编程中另一常见的结构---循环加以学习。

        这里的学习和其他的编程语言一样，主要是分为for 循环和while循环，同时学会使用continue和break。如果有其他代码学习经验，这里的内容可以快速浏览。

一、For 循环

1.1 for循环的结构

        基本的使用方法和结构写在了下方：

for (初始化变量; 条件表达式; 操作表达式) {
              循环体；
         }

// 举例

for (var i = 1; i <= 100; i++) {
            console.log('你好JS');
        }

        对上面的例子加以解释：

        1. 首先定义计数器变量  var i = 1 .只执行一次

        2.  i <= 100 来是判断结束的条件， 如果满足条件就执行循环体 ，否则退出循环

        3. 最后去执行 i++   一轮循环结束

        4. 接着去执行 i <= 100 如此循环。

        针对上面的例子，我们可以增加一些与用户的互动：

    <script>

        //可以让用户控制输出的次数
        var num = prompt('请您输入次数');
        for (var i = 1; i <= num; i++) {
            console.log('你好JS');

        }
    </script>

   

1.2 for循环可以和分支结构嵌套使用

        比如，如下代码：

    <script>
        for (var i = 1; i <= 99; i++) {
            if (i == 1) {
                console.log('他出生了');
            } else if (i == 99) {
                console.log('他死了');
            } else {
                console.log('这个人今年' + i + '岁了');

            }
        }
    </script>

        在循环时，当i == 1 显示出生了，i == 99 显示死了，其余循环阶段显示每一年的岁数。这就是for循环和分支结构的嵌套。

1.3 for循环进行数据处理

        for循环也同样可以辅助我们解决有一定规律的数学问题。

        1.3.1 求1-100之间所有数的平均值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        //1 求1-100的和的平均数
        var sum1 = 0;
        for (var i = 1; i <= 100; i++) {
            sum1 += i;
        }
        alert('1-100的和的平均数为：' + (sum1 / 100))
    </script>
</head>

<body>

</body>

</html>

        1.3.2 求1-100之间所有偶数和奇数的和

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>

        //2  求1-100所有奇数偶数的和
        var odd_sum = 0;
        var even_sum = 0;
        for (var i = 1; i <= 100; i++) {
            if (i % 2 == 0) {
                odd_sum += i;
            }
            else {
                even_sum += i;
            }
        }
        alert('1-100的奇数和为：' + even_sum)
        alert('1-100的偶数和为：' + odd_sum)
    </script>
</head>

<body>

</body>

</html>

        1.3.3 求1-100之间所有能被3整除的数字的和

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>

        //3 1-100 被3 整除的数字的和
        var sum2 = 0;
        for (var index = 0; index <= 100; index++) {
            if (index % 3 == 0) {
                sum2 += index;

            }
        }
        alert('1-100 被3 整除的数字的和为：' + sum2)
    </script>
</head>

<body>

</body>

</html>

1.4 使用for循环计算班级所有人的成绩案例

        人数自定义，成绩自定义，并计算总成绩和平均分。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        var num = prompt("班级中一共多少人？");
        var sum = 0;
        var average = 0;
        var score;
        for (var i = 1; i <= num; i++) {
            score = prompt('第' + i + '个人的成绩是：');

            sum += parseFloat(score);
        }
        average = sum / num;

        alert('班级总的成绩是' + sum);
        alert('班级平均分是：' + average);
    </script>
</head>

<body>

</body>

</html>

 1.5 双重for循环

        双重for循环的结构如下：外层循环循环一次， 里面的循环执行全部 。


    <script>
        // 双重for循环 语法结构
         for (外层的初始化变量; 外层的条件表达式; 外层的操作表达式) {
             for (里层的初始化变量; 里层的条件表达式; 里层的操作表达式) {
                 // 执行语句;
             }
         }

        // 外层循环循环一次， 里面的循环执行全部
    </script>

         做一个可以打印任意行，任意列的五角星矩阵的例子；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        var col = prompt("想要多少列");
        var row = prompt("想要多少行");
        var str = '';
        for (let i = 1; i <= row; i++) {

            for (let j = 1; j <= col; j++) {
                str = str + '★';
            }
            str = str + '\n';
        }
        console.log(str);
    </script>
</head>

<body>

</body>

</html>

  1.5 经典案例--9*9乘法表

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        var str = '';
        for (let i = 1; i <= 9; i++) {
            for (let j = 1; j <= i; j++) {
                str += j + '×' + i + '=' + i * j + ' ';
            }
            str = str + '\n';
        }
        console.log(str);
    </script>
</head>

<body>

</body>

</html>

二、While 循环

2.1 while 的基本结构

    <script>
        // while 循环语法结构  
         while (条件表达式) {
              循环体
              叠加器的变化
         }
        // 执行思路  当条件表达式结果为true 则执行循环体 否则 退出循环

    </script>

         直接对条件进行判断，如果条件成立进行，则进入循环体执行内部代码。

2.2 while 的使用例子

        求1-100所有偶数的和：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    var sum = 0;
    var i = 1;
    while (i <= 100) {
      if (i % 2 == 0) {
        sum += i
      }
      i++;
    }
    alert('偶数的和为：' + sum);
  </script>
</head>

<body>

</body>

</html>

2.3 do while循环结构

        do while的使用结构如下：

    <script>
        // do while 循环结构
        do {
             循环体
             迭代器变化
        } while (条件表达式)
        
        // do while 循环体至少执行一次！！！
    </script>

        do while循环 和 while循环的区别：do while先执行一次以后再判断，所以至少会执行一次。而while先判断再执行。

2.4 do while循环案例

        用do while 改写1-100的偶数的和的案例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    var sum = 0;
    var i = 1;
    do {
      if (i % 2 == 0) {
        sum += i;
      }
      i++;
    } while (i <= 100);
    alert('偶数的和为：' + sum);
  </script>
</head>

<body>

</body>

</html>

三、continue 和 break

3.1 continue 关键字

        continue ：退出本次（当前次的循环） ，继续执行剩余次数循环。

        可以使用continue改写1-100的偶数的和的案例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    var sum = 0;

    for (var i = 1; i <= 100; i++) {
      if (i % 2 != 0) {
        continue；
      }
      sum += i;
    }
    alert('偶数的和为：' + sum);
  </script>
</head>

<body>

</body>

</html>

3.2 break 关键字

        break ：退出整个循环，不再执行。

        这个案例：设计者只允许输出3遍，请求多余3次就不执行。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    var num = prompt('你想要输出多少遍内容？');

    for (var i = 1; i <= num; i++) {
      if (i == 4) {
        console.log('不好意思，设计者只让输出3次~');
        break;
      }
      console.log('这是第' + i + '次输出');
    }

  </script>
</head>

<body>

</body>

</html>

SPIRIT_SYF
关注
  • 24
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
学习归纳9：JavaScript
qq_52941423的博客
07-18 301
其中应该用id获取和querySelector较为规范。onchange用户改变域的内容。onload页面或图像完成加载。ondblclick鼠标双击。onfocus元素获得焦点。onsubmit表单提交。onblur元素失去焦点。onclick鼠标单击。
JS学习归纳7
SPIRITE_SYF的博客
04-20 1053
上一节的末尾我们学习了对象的概念，准确来说属于自定义对象。
vue3日常知识点学习归纳
m0_59505309的博客
12-07 605
vue3日常知识点学习归纳
JS学习归纳6
SPIRITE_SYF的博客
04-19 1087
什么是作用域？一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字 的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。一般分为两类：全局作用域、局部作用域。为什么学习预解析？因为JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在运行 JavaScript 代码的时候分为两 步：预解析和代码执行。
JS学习归纳1
SPIRITE_SYF的博客
04-13 910
在学习了HTML和CSS以后我们就可以去构建一个网页的框架，但是这个框架太过生硬，我们希望可以对这个框架做一个优化，这个时候就需要我们去学习JS。JS语言同其他的编程语言基本一致，所以如果有其它语言的学习基础，这部分内容理解起来应该比较流畅。在此之前我们先学习一些输入输出的基本使用，为了方便我们学习过程中的测试。1、alert（变量）弹出警示框，显示变量的内容2、console.log(变量);在监控台显示内容，给程序员看3、prompt('提示语')；用户输入。
JS学习归纳2
SPIRITE_SYF的博客
04-14 1003
如果需要反复给数字变量添加或减去1，可以使用递增（++）和递减（ -- ）运算符来完成。递增和递减既可以放在变量前面，也可以放在变量后面。放在变量前面时，我 们可以称为前置递增（递减）运算符，放在变量后面时，我们可以称为后置递增（递减）运算符。
JS学习归纳5
SPIRITE_SYF的博客
04-18 1144
因为有名字，所以也被称为命名函数。调用函数的代码既可以放到声明函数的前面，也可以放在声明函数的后面。// 声明定义方式// 调用fn();
JS学习归纳4
SPIRITE_SYF的博客
04-17 763
数组可以把一组相关的数据一起存放，方便程序员的访问与获取。数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组可以将一种或者一组数据存储在单个变量名下的存储方式方式。// 普通变量 只能存一个值// 数组一次可以存储多个值。
JS学习归纳8
SPIRITE_SYF的博客
04-21 599
1、栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；2、堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由圾回收机制回收。
JavaScript学习笔记归纳.pdf
10-30
JavaScript学习笔记归纳.pdf
跟着9张思维导图学习JavaScript
02-26
学习的道路就是要不断的总结归纳，好记性不如烂笔头，so，下面将po出我收集的9张JavaScript相关的思维导图（非原创）。思维导图小tips：思维导图又叫心智图，是表达发射性思维的有效的图形思维工具，它简单却又极其...
D3js可视化实战手册学习指南
05-25
因此,以追溯数据可视化历史、分析其技术含量为背景,着重介绍D3这一可视化平台,归纳出D3绘制五种图表的强大功能,用具体的条形图绘制案例说明D3的语法要求与使用方法,并通过交叉筛选器展示D3的广泛实用性.由此认为,D3...
javascript学习总结
08-04
javascript的函数总结，需要注意的部分归纳，有助于开发。
扩展学习|风险管理的文献综述汇总（持续更新向）
weixin_63253486的博客
06-10 795
本片博客主要介绍风险管理领域本人所看到的一些有意思的文章，并就风险管理领域的相关内容进行一个分享。
[ue5]建模场景学习笔记（5）——必修内容可交互的地形，交互沙（3）
qq_40128113的博客
06-09 340
5.第一想法直接clear掉，但直接clear会把想要保留的痕迹一并去除，跑起来就没有痕迹！所以不行，要做一个转载，先把痕迹保留在一个载体上，清楚原来痕迹，用sandsave表示，再把这个载体的痕迹保存回原来rt，这样之前的痕迹被清空了，只留下了保存在载体上的部分，正好符合我们想要的部分。我们现在已经能够让这片地形出现在任意地方，只要角色走在这片地形上，就能够产生痕迹，但这片区域总是需要人工指定，又无法把这片区域无限扩大（显存爆炸），因此尝试使角色无论走到哪里都能产生痕迹。否则绘制不到画板上。
Qt---pro文件的学习
weixin_51883798的博客
06-11 482
【代码】Qt---pro文件的学习。
【电子信息工程专业课】学习记录
最新发布
共同进步！
06-12 305
- # **数字信号处理** * ## 离散时间信号与系统 + ### 周期延拓 一个连续时间信号经过理想采样后，其频谱将沿着频率轴以采样频率Ωs = 2π / T 为间隔而重复。 + ### 混频 各周期的延拓分量产生频谱交替的现象 + ### 奈奎斯特采样定理 fs > 2fh
怎么学习汇川Codesys PLC教程？
NAV3055的博客
06-12 315
各位好，我在B站和抖音上都有发布视频的，搜索我的名称“阿凡工控分享”即可。在CSDN上发表文章也是想把我的一点见解和经验分享出来，进一步的方便大家进行学习。
JavaScript学习手册三：JS运算符
03-25
关于JavaScript学习手册三中的JS运算符，它们包括算术运算符、赋值运算符、比较运算符、逻辑运算符、位运算符、三目运算符等。这些运算符是JavaScript中非常重要的基础知识，可以帮助开发者编写更高效、更灵活的代码...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值