JavaScript基础—for语句、循环嵌套、、数组、操作数组、综合案例—根据数据生成柱形图、冒泡排序

版本说明

当前版本号[20231129]。

版本修改说明
20231126初版
20231129完善部分内容

目录

文章目录

  • 版本说明
  • 目录
  • JavaScript 基础第三天笔记
    • for 语句
      • for语句的基本使用
      • 循环嵌套
        • 倒三角
        • 九九乘法表
    • 数组
      • 数组是什么？
      • 数组的基本使用
        • 定义数组和数组单元
        • 访问数组和数组索引
        • 数据单元值类型
        • 数组长度属性
      • 操作数组
      • 综合案例—根据数据生成柱形图
    • 冒泡排序

JavaScript 基础第三天笔记

if 多分支语句和 switch的区别：

  1. 共同点

    • 都能实现多分支选择， 多选1
    • 大部分情况下可以互换

  2. 区别：

    • switch…case语句通常处理case为比较确定值的情况，而if…else…语句更加灵活，通常用于范围判断(大于，等于某个范围)。
    • switch 语句进行判断后直接执行到程序的语句，效率更高，而if…else语句有几种判断条件，就得判断多少次
    • switch 一定要注意 必须是 === 全等，一定注意 数据类型，同时注意break否则会有穿透效果
    • 结论：
      • 当分支比较少时，if…else语句执行效率高。
      • 当分支比较多时，switch语句执行效率高，而且结构更清晰。

for 语句

掌握 for 循环语句，让程序具备重复执行能力

for 是 JavaScript 提供的另一种循环控制的话句，它和 while 只是语法上存在差异。

for语句的基本使用

  1. 实现循环的 3 要素（要记住是 let ！）
<script>// 1. 语法格式// for(起始值; 终止条件; 变化量) {//   // 要重复执行的代码// }// 2. 示例：在网页中输入标题标签// 起始值为 1// 变化量 i++// 终止条件 i <= 6for(let i = 1; i <= 6; i++) {document.write(`<h${i}>循环控制，即重复执行<h${i}>`)}
</script>

  1. 变化量和死循环，for 循环和 while 一样，如果不合理设置增量和终止条件，便会产生死循环。

  2. 跳出和终止循环

<script>// 1. continue for (let i = 1; i <= 5; i++) {if (i === 3) {continue  // 结束本次循环，继续下一次循环}console.log(i)}// 2. breakfor (let i = 1; i <= 5; i++) {if (i === 3) {break  // 退出结束整个循环}console.log(i)}
</script>

结论：

  • JavaScript 提供了多种语句来实现循环控制，但无论使用哪种语句都离不开循环的3个特征，即起始值、变化量、终止条件，做为初学者应着重体会这3个特征，不必过多纠结三种语句的区别。
  • 起始值、变化量、终止条件，由开发者根据逻辑需要进行设计，规避死循环的发生。
  • 当如果明确了循环的次数的时候推荐使用for循环,当不明确循环的次数的时候推荐使用while循环

注意：for 的语法结构更简洁，故 for 循环的使用频次会更多。

循环训练：

第一题：

image-20231125210328825

script代码：

<script>//循环输出100for( let i = 1; i <= 100; i++){document.write(i + '<br>');}//求1-100偶数和let s = 0;for( let j = 1; j <= 100; j++){if(j % 2 === 0){s += j;}}document.write('1-100所有偶数和：'+s);//换行document.write('<br>');//画五个小星星for( let t = 1 ; t <= 5 ; t++){document.write('*');}</script>

输出结果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
1-100所有偶数和：2550
*****

第二题：

image-20231125211438304

script代码：

<script>let str = ['马超','赵云','张飞','关羽','黄忠']for(let i = 0; i < str.length ; i++){document.write(str[i])}</script>

image-20231126140441077

循环嵌套

利用循环的知识来对比一个简单的天文知识，我们知道地球在自转的同时也在围绕太阳公转，如果把自转和公转都看成是循环的话，就相当于是循环中又嵌套了另一个循环。

universe

实际上 JavaScript 中任何一种循环语句都支持循环的嵌套，如下代码所示：

64791826139

// 1. 外面的循环 记录第n天 
for (let i = 1; i < 4; i++) {document.write(`第${i}天 <br>`)// 2. 里层的循环记录 几个单词for (let j = 1; j < 6; j++) {document.write(`记住第${j}个单词<br>`)}
}

记住，外层循环循环一次，里层循环循环全部

练习

image-20231126142628735

script代码：

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

输出结果如下：

image-20231126142638725

进阶版：

image-20231126142832374

script代码：

<script>let a = prompt('请输入行数：')let b = prompt('请输入列数：')for(let i = 1;i <= a ; i++){for(let j = 1; j <= b ; j++){document.write('*')}document.write('<br>')}

输出结果如下：

image-20231126142935961

倒三角

方法：

  1. 利用双重for循环来做
  2. 外层循环控制打印行，内层循环控制每行打印几个（列）
  3. 内层循环的个数跟第几行是一一对应的
 // 外层打印几行
for (let i = 1; i <= 5; i++) {// 里层打印几个星星for (let j = 1; j <= i; j++) {document.write('★')}document.write('<br>')
}

64791867895

九九乘法表

样式css

span {display: inline-block;width: 100px;padding: 5px 10px;border: 1px solid pink;margin: 2px;border-radius: 5px;box-shadow: 2px 2px 2px rgba(255, 192, 203, .4);background-color: rgba(255, 192, 203, .1);text-align: center;color: hotpink;
}

javascript

 // 外层打印几行
for (let i = 1; i <= 9; i++) {// 里层打印几个星星for (let j = 1; j <= i; j++) {// 只需要吧 ★ 换成  1 x 1 = 1   document.write(`<div> ${j} x ${i} = ${j * i} </div>`)}document.write('<br>')
}

64791873467

数组

知道什么是数组及其应用的场景，掌握数组声明及访问的语法。

数组是什么？

数组：(Array)是一种可以按顺序保存数据的数据类型

**使用场景：**如果有多个数据可以用数组保存起来，然后放到一个变量中，管理非常方便

数组的基本使用

综合练习第一题：

image-20231126145453611

思路

image-20231126145947306

 <script>let nums = [2,6,1,7,4]// 如果在这里不给初始值的话，下面就会出现未知数加数字的组合，结果为NaNlet sum = 0let avgs = 0for(let i = 0; i < nums.length; i++){sum += nums[i]avgs = sum / nums.length}document.write('总和是：'+sum)document.write('<BR>')document.write('平均数是：'+avgs)</script>

输出结果：

image-20231126150503451

题目二：

求下面数组的最大和最小值。

image-20231126150611333

分析：

image-20231126151213492

script代码：

<script>let nums = [2,6,1,77,52,25,7]let max = nums[0]let min = nums[0]for(let i = 1 ; i < nums.length ;i++){if(max < nums[i]){max = nums[i]}if(min > nums[i]){min = nums[i]}}document.write('最大值为：'+max)document.write('<br>')document.write('最小值为：'+min)</script>

输出结果：

image-20231126151856956

定义数组和数组单元
<script>// 1. 语法，使用 [] 来定义一个空数组// 定义一个空数组，然后赋值给变量 classes// let classes = [];// 2. 定义非空数组let classes = ['小明', '小刚', '小红', '小丽', '小米']
</script>

通过 [] 定义数组，数据中可以存放真正的数据，如小明、小刚、小红等这些都是数组中的数据，我们这些数据称为数组单元，数组单元之间使用英文逗号分隔。

访问数组和数组索引

使用数组存放数据并不是最终目的，关键是能够随时的访问到数组中的数据（单元）。其实 JavaScript 为数组中的每一个数据单元都编了号，通过数据单元在数组中的编号便可以轻松访问到数组中的数据单元了。

我们将数据单元在数组中的编号称为索引值，也有人称其为下标。

索引值实际是按着数据单元在数组中的位置依次排列的，注意是从 0 开始的，如下图所示：

array

观察上图可以数据单元【小明】对应的索引值为【0】，数据单元【小红】对应的索引值为【2】

<script>let classes = ['小明', '小刚', '小红', '小丽', '小米']// 1. 访问数组，语法格式为：变量名[索引值]document.write(classes[0]) // 结果为：小明document.write(classes[1]) // 结果为：小刚document.write(classes[4]) // 结果为：小米// 2. 通过索引值还可以为数组单重新赋值document.write(classes[3]) // 结果为：小丽// 重新为索引值为 3 的单元赋值classes[3] = '小小丽'document.wirte(classes[3]); // 结果为： 小小丽
</script>
数据单元值类型

数组做为数据的集合，它的单元值可以是任意数据类型

<script>// 6. 数组单值类型可以是任意数据类型// a) 数组单元值的类型为字符类型let list = ['HTML', 'CSS', 'JavaScript']// b) 数组单元值的类型为数值类型let scores = [78, 84, 70, 62, 75]// c) 混合多种类型let mixin = [true, 1, false, 'hello']
</script>
数组长度属性

重申一次，数组在 JavaScript 中并不是新的数据类型，它属于对象类型。

<script>// 定义一个数组let arr = ['html', 'css', 'javascript']// 数组对应着一个 length 属性，它的含义是获取数组的长度console.log(arr.length) // 3
</script>

案例一：

image-20231126164102259

script代码：

<script>let nums = [2,0,6,1,77,0,52,0,25,7]let numpro = []for(let i = 0; i < nums.length; i++){if(nums[i] > 10){numpro.push(nums[i])}}document.write(numpro)</script>

输出结果：

image-20231126164759647

案例二：

image-20231126164835501

script代码：

<script>let nums = [2,0,6,1,77,0,52,0,25,7]let newArr = []for(let i = 0; i < nums.length; i++){if(nums[i] !== 0){newArr.push(nums[i])}}document.write(newArr)</script>

输出结果：

image-20231126164933151

操作数组

image-20231126163545097

数组做为对象数据类型，不但有 length 属性可以使用，还提供了许多方法：

  1. push 动态向数组的尾部添加一个单元
  2. unshit 动态向数组头部添加一个单元
  3. pop 删除最后一个单元
  4. shift 删除第一个单元
  5. splice 动态删除任意单元

使用以上4个方法时，都是直接在原数组上进行操作，即成功调任何一个方法，原数组都跟着发生相应的改变。并且在添加或删除单元时 length 并不会发生错乱。

script代码：

<script>// 定义一个数组let nums = [2,6,1,77,52,25,7]// 1. push 动态向数组的尾部添加一个单元
nums.push(9)
document.write(nums)document.write('<br>')// 2. unshit 动态向数组头部添加一个单元
nums.unshift('开头加')
document.write(nums)document.write('<br>')// 4. pop 删除最后一个单元
nums.pop()
document.write(nums)document.write('<br>')// 5. shift 删除第一个单元
nums.shift()
document.write(nums)document.write('<br>')// 6. splice 动态删除任意单元
nums.splice(2,5) // 从索引值为2的位置开始删除1个单元
document.write(nums)

输出结果：

image-20231126170038323

综合案例—根据数据生成柱形图

image-20231126170143505

image-20231126170404729

1、引入基础代码

2、在script中，通过循环，建立新的数组来接收我们所输入的数据。

<script>let arr = []for(let i = 1; i <= 4; i++){let num = prompt(`请输入第${i}季度的数据：`)arr.push(num)}document.write(arr)</script>

image-20231126171509525

3、将之前的html代码转化为script的形式，放在script里面，以循环的形式输出每一季度的数值。

// 盒子中间 利用循环的形式，跟数组有关系document.write(`<div class="box">`)for(let i = 0; i < arr.length;i++){document.write(`<div style="height: ${arr[i]}px;"><span>${arr[i]}</span><h4>第${i+1}季度</h4></div>`)}// 盒子结尾    document.write(`</div>`)

image-20231126172734623

冒泡排序

  1. 冒泡排序是一种简单的排序算法。
  2. 它重复地走访过要排序的数列，一次比较两个元素，如果他们的顺序错误就把他们交换过来。走访数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。
  3. 这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。
  4. 比如数组[2,3,1,4,5]经过排序成为了[1,2,3,4,5]或者[5,4,3,2,1]

image-20231126173157915

3、将之前的html代码转化为script的形式，放在script里面，以循环的形式输出每一季度的数值。

// 盒子中间 利用循环的形式，跟数组有关系document.write(`<div class="box">`)for(let i = 0; i < arr.length;i++){document.write(`<div style="height: ${arr[i]}px;"><span>${arr[i]}</span><h4>第${i+1}季度</h4></div>`)}// 盒子结尾    document.write(`</div>`)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/229532.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

使用vue-admin-template时，需要注意的问题，包括一定要去除mock.js注释

使用vue-admin-template时，需要注意的问题，包括一定要去除mock.js注释

在使用vue-admin-template等前端框架时&#xff0c;如果你没有打算用他们的mock数据&#xff0c;在生产环境下一定要注释mock引用的代码&#xff0c;虽然它没有被调用&#xff0c;但是如果你不注释&#xff0c;就会被打包进去。 找到main.js&#xff0c;看如下代码&#xff1a…
阅读更多...
Python内置类属性`__name__`属性的使用教程

Python内置类属性`__name__`属性的使用教程

更多Python学习内容&#xff1a;ipengtao.com Python中的__name__是一种内置的特殊属性&#xff0c;通常用于判断模块是作为主程序运行还是作为模块被导入。本文将深入讲解__name__属性的用法&#xff0c;通过丰富的示例代码展示其在不同情景下的应用。 模块作为主程序运行 当一…
阅读更多...
vscode 里怎么自动提示 webpack 配置项？

vscode 里怎么自动提示 webpack 配置项？

webpack 的配置项非常多&#xff0c;容易忘记&#xff0c;能自动提示很有用&#xff0c;就是在配置文件里面添加下面代码 // 下面这行用于 vscode 中智能化自动提示 webpack 配置项 /** type {import(webpack).Configuration} */
阅读更多...
AI旅游：旅游行业的人工智能成熟艺术适应从实践到表现报告

AI旅游：旅游行业的人工智能成熟艺术适应从实践到表现报告

今天分享的是AI系列深度研究报告&#xff1a;《AI旅游&#xff1a;旅游行业的人工智能成熟艺术适应从实践到表现报告》。 &#xff08;报告出品方&#xff1a;accenture&#xff09; 报告共计&#xff1a;25页 旅行还没有充分利用AI所能做的一 而旅游业比两年前强多了。公司…
阅读更多...
SRGAN 使用指南：将低分辨率图像转换为高分辨率图像

SRGAN 使用指南：将低分辨率图像转换为高分辨率图像

SRGAN、ESRGAN、Real-ESRGAN 使用指南 SRGAN网络结构优化目标 ESRGANReal-ESRGAN SRGAN 超分辨率&#xff1a;从低分辨率(LR)图像来估计其对应高分辨率(HR)图像的任务&#xff0c;被称作超分辨率(SR)。 SRGAN 图像超分辨率的深度学习模型&#xff0c;通过生成对抗网络&#x…
阅读更多...
如何在Python中操作Redis数据库

如何在Python中操作Redis数据库

目录 一、安装redis-py库 二、连接Redis数据库 三、执行操作 1、设置和获取键值对 2、删除键值对 3、获取列表数据 四、处理数据 1、使用哈希表&#xff08;Hash&#xff09;处理关联数据 2、使用列表&#xff08;List&#xff09;处理有序数据 3、使用集合&#xff…
阅读更多...
MIT线性代数笔记-第17讲-正交矩阵，Schmidt正交化

MIT线性代数笔记-第17讲-正交矩阵，Schmidt正交化

目录 17.正交矩阵&#xff0c; S c h m i d t Schmidt Schmidt正交化打赏 17.正交矩阵&#xff0c; S c h m i d t Schmidt Schmidt正交化 “标准”经常表示单位长度 标准正交基&#xff1a;由两两正交的单位向量组成的基 将标准正交基中的元素记作 q ⃗ 1 , q ⃗ 2 , ⋯ , q …
阅读更多...
【Redis6快速深入学习04】Redis字符串(String)的使用和原理

【Redis6快速深入学习04】Redis字符串(String)的使用和原理

Redis字符串(String) 4.1 Redis 中 String 的简介 String 是Redis五种最基本的类型之一&#xff0c;在使用时可以理解成与Memcached一模一样的类型&#xff0c;一个key对应一个value。 String 类型是二进制安全的。意味着 Redis 的 string 可以包含任何数据。比如 jpg 图片或…
阅读更多...
C++ 红黑树的封装

C++ 红黑树的封装

一.map/set的封装 在实现了红黑树的部分功能后&#xff0c;我们可以便可以将红黑树作为底层结构来封装map 和 set &#xff0c;但是问题也随之而来。我们都知道map是k-v的数据模型&#xff0c;而set是k的数据模型&#xff0c;我们难道要去使用两棵红黑树来封装吗&#xff1f;显…
阅读更多...
Vue基本使用(一)

Vue基本使用(一)

&#x1f4d1;前言 本文主要是【Vue】——Vue基本使用的文章&#xff0c;如果有什么需要改进的地方还请大佬指出⛺️ &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是听风与他&#x1f947; ☁️博客首页&#xff1a;CSDN主页听风与他 &#x1f304;每日一句&#x…
阅读更多...
基于单片机红外测温（mlx90614)-原理图-PCB设计+源程序

基于单片机红外测温（mlx90614)-原理图-PCB设计+源程序

一、系统方案 1、本设计采用52单片机作为主控器。 2、mlx90614采集温度&#xff0c;液晶显示温度值。 3、按键设置温度上下限。 4、实际测量温度小于下限或者大于上限&#xff0c;蜂鸣器报警&#xff0c;大于上限&#xff0c;风扇启动&#xff0c;低于下限&#xff0c;风扇停止…
阅读更多...
函数式接口

函数式接口

作者简介&#xff1a;大家好&#xff0c;我是smart哥&#xff0c;前中兴通讯、美团架构师&#xff0c;现某互联网公司CTO 联系qq&#xff1a;184480602&#xff0c;加我进群&#xff0c;大家一起学习&#xff0c;一起进步&#xff0c;一起对抗互联网寒冬 咱们今天讨论下函数式接…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023