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 <= 6
  for(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. break
    for (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>
    //循环输出100
    for( 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]
    // 如果在这里不给初始值的话，下面就会出现未知数加数字的组合，结果为NaN
    let sum = 0
    let avgs = 0
    for(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>`)

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

组合设计模式

组合设计模式

package com.jmj.pattern.combination;/*** 菜单组件&#xff0c;属于抽象根节点*/ public abstract class MenuComponent {//菜单组件的名称protected String name;//菜单组件的层级protected int level;//添加子菜单public void add(MenuComponent menuComponent) {throw new…
阅读更多...
08-学成在线项目中统一异常处理的规范

08-学成在线项目中统一异常处理的规范

项目中的异常处理 规范异常类型 在Service类的业务方法中有很多的参数合法性校验,当请求参数不合法的时候会抛出异常,但此时异常信息只会在控制台输出,前端界面并不会提示用户 实际开发中前端和后端需要做一些约定: 一般将错误提示信息统一以json格式返回给前端,以HTTP状态码…
阅读更多...
统计元音字母c语言

统计元音字母c语言

以下是一个简单的C语言程序&#xff0c;用于统计一段文本中的元音字母数量&#xff1a; #include <stdio.h>#include <string.h>int main() { char str[1000]; int vowels 0; printf("请输入一段文本&#xff1a;\n"); fgets(str, siz…
阅读更多...
蓝桥杯day02——Fizz Buzz

蓝桥杯day02——Fizz Buzz

1、题目 给你一个整数 n &#xff0c;找出从 1 到 n 各个整数的 Fizz Buzz 表示&#xff0c;并用字符串数组 answer&#xff08;下标从 1 开始&#xff09;返回结果&#xff0c;其中&#xff1a; answer[i] "FizzBuzz" 如果 i 同时是 3 和 5 的倍数。answer[i] &…
阅读更多...
ESP-Mesh-Lite 用户指南

ESP-Mesh-Lite 用户指南

ESP-MESH-LITE 本指南提供有关 Mesh-Lite 协议的介绍。 概述 ESP-MESH-LITE 是一套建立在 Wi-Fi 协议之上的网络协议。ESP-MESH-LITE 允许分布在大范围区域内&#xff08;室内和室外&#xff09;的大量设备&#xff08;下文称节点&#xff09;在同一个 WLAN&#xff08;无线…
阅读更多...
工业园区重金属废水深度处理工程项目，稳定出水0.1mg/l

工业园区重金属废水深度处理工程项目，稳定出水0.1mg/l

随着环保要求不断提高&#xff0c;工业废水处理已成为众多企业的必修课。然而在工业生产中&#xff0c;如何有效处理含有重金属的废水成为了一个关键的挑战。 重金属废水是指含有汞、铅、铜、镉、锌、镍等有毒有害物质的废水&#xff0c;来源于矿山开采、金属冶炼、电镀、印刷线…
阅读更多...
2024年申报国自然项目基金撰写及技巧

2024年申报国自然项目基金撰写及技巧

随着社会经济发展和科技进步&#xff0c;基金项目对创新性的要求越来越高。申请人需要提出独特且有前瞻性的研究问题&#xff0c;具备突破性的科学思路和方法。因此&#xff0c;基金项目申请往往需要进行跨学科的技术融合。申请人需要与不同领域结合&#xff0c;形成多学科交叉…
阅读更多...
20世纪30年代的大危机

20世纪30年代的大危机

背景 1929年9月&#xff0c;美国财政部部长安德鲁梅隆向公众保证“现在没有担心的理由&#xff0c;这一繁荣的高潮将会继续下去”。 当时流行的一首儿歌&#xff1a;“梅隆拉响汽笛&#xff0c;胡佛敲起钟&#xff0c;华尔街发出信号&#xff0c;美国往地狱里冲&#xff01;”…
阅读更多...
Dropdown下拉菜单（antd-design组件库）简单用法和禁用菜单

Dropdown下拉菜单（antd-design组件库）简单用法和禁用菜单

1.Dropdown下拉菜单 向下弹出的列表。 2.何时使用 当页面上的操作命令过多时&#xff0c;用此组件可以收纳操作元素。点击或移入触点&#xff0c;会出现一个下拉菜单。可在列表中进行选择&#xff0c;并执行相应的命令。 用于收罗一组命令操作。 Select 用于选择&#xff0c;而…
阅读更多...
西南科技大学信号与系统A实验三（线性连续时间系统的分析）

西南科技大学信号与系统A实验三（线性连续时间系统的分析）

一、实验目的 1.掌握用 matlab 分析系统时间响应的方法 2.掌握用 matlab 分析系统频率响应的方法 3.掌握系统零、极点分布与系统稳定性关系 二、实验原理 1. 系统函数 H(s) 系统函数:系统零状态响应的拉氏变换与激励的拉氏变换之比. H(s)=R(s)/E(s) 在 matlab 中可采用…
阅读更多...
geemap学习笔记016：获取图像的基本属性和描述性信息

geemap学习笔记016：获取图像的基本属性和描述性信息

前言 遥感数据中通常包含众多信息&#xff0c;例如图像获取的时间、云覆盖量、以及每个波段的最大值最小值等等。 1 导入库并显示地图 import ee import geemapMap geemap.Map() Map2 添加图像数据 centroid ee.Geometry.Point([-122.4439, 37.7538]) #创建一个点坐标lan…
阅读更多...
java编程:数组代表着苹果期货在 9 天内的价格变化，其中第 n 个元素是苹果在第 n 天的 价格，你可以进行最多三次交易，设计算法，9 天内赚到最多的钱

java编程:数组代表着苹果期货在 9 天内的价格变化，其中第 n 个元素是苹果在第 n 天的 价格，你可以进行最多三次交易，设计算法，9 天内赚到最多的钱

1 题目 编程题&#xff1a;下面的数组代表着苹果期货在 9 天内的价格变化&#xff0c;其中第 n 个元素是苹果在第 n 天的 价格&#xff0c;你可以进行最多三次交易&#xff0c;设计一个算法&#xff0c;9 天内如何赚到最多的钱&#xff1f;价格数组&#xff1a; [8, 9, 2, 5, …
阅读更多...
DS八大排序之直接插入排序和希尔排序

DS八大排序之直接插入排序和希尔排序

前言 我们前面几期介绍了线性和非线性的基本数据结构。例如顺序表、链表、栈和队列、二叉树等~&#xff01;本期和接下来的几期我们来详解介绍各个排序的概念、实现以及性能分析&#xff01; 本期内容 排序的概念以及其运用 常见的排序算法 直接插入排序 希尔排序 一、排序的…
阅读更多...
Flutter开发type ‘Future＜int＞‘ is not a subtype of type ‘int‘ in type cast错误

Flutter开发type ‘Future＜int＞‘ is not a subtype of type ‘int‘ in type cast错误

文章目录 问题描述错误源码 问题分析解决方法修改后的代码 问题描述 今天有个同事调试flutter程序时报错&#xff0c;问我怎么解决&#xff0c;程序运行时报如下错误&#xff1a; type ‘Future’ is not a subtype of type ‘int’ in type cast 错误源码 int order Databas…
阅读更多...
聚观早报 |红魔9 Pro开卖；真我GT5 Pro定档

聚观早报 |红魔9 Pro开卖；真我GT5 Pro定档

【聚观365】11月29日消息 红魔9 Pro开卖 真我GT5 Pro定档 一加12镜头细节公布 Redmi K70 Pro将搭载夜枭算法 苹果Vision Pro头显下月量产 红魔9 Pro开卖 红魔电竞旗舰最新力作——红魔9 Pro系列正式发布。作为一款全能电竞旗舰&#xff0c;该机搭载了第三代骁龙8移动平台…
阅读更多...
【九】linux下部署frp客户端服务端实践

【九】linux下部署frp客户端服务端实践

linux下部署frp客户端服务端实践 简介&#xff1a; 今天有一个这样的需求&#xff0c;部署在公司内部局域网虚拟机上的服务需要在外网能够访问到&#xff0c;这不就是内网穿透的需求吗&#xff0c;之前通过路由器实现过&#xff0c;现在公司这块路由器不具备这个功能了&#x…
阅读更多...
Java后端开发——JDBC（万字详解）

Java后端开发——JDBC（万字详解）

Java后端开发——JDBC&#xff08;万字详解&#xff09; 今日目标 掌握JDBC的的CRUD理解JDBC中各个对象的作用掌握Druid的使用 1&#xff0c;JDBC概述 在开发中我们使用的是java语言&#xff0c;那么势必要通过java语言操作数据库中的数据。这就是接下来要学习的JDBC。 1.1 …
阅读更多...
【PHP】MySQL简介与MySQLi函数（含PHP与MySQL交互）

【PHP】MySQL简介与MySQLi函数（含PHP与MySQL交互）

文章目录 一、MySQL简介二、MySQLi函数1. 开启mysqli扩展&#xff1a;2. PHP MySQLi扩展的常用函数 三、PHP与MySQL交互0. 准备1. 创建连接&#xff08;mysqli_connect() &#xff09;连接mysql语法 2. 选择数据库&#xff08;mysqli_select_db()&#xff09;3. 在php中操作数据…
阅读更多...
【burpsuite安全练兵场-客户端16】测试WebSockets安全漏洞-3个实验（全）

【burpsuite安全练兵场-客户端16】测试WebSockets安全漏洞-3个实验（全）

前言&#xff1a; 介绍&#xff1a; 博主&#xff1a;网络安全领域狂热爱好者&#xff08;承诺在CSDN永久无偿分享文章&#xff09;。 殊荣&#xff1a;CSDN网络安全领域优质创作者&#xff0c;2022年双十一业务安全保卫战-某厂第一名&#xff0c;某厂特邀数字业务安全研究员&…
阅读更多...
微服务--03--OpenFeign 实现远程调用 （负载均衡组件SpringCloudLoadBalancer）

微服务--03--OpenFeign 实现远程调用 （负载均衡组件SpringCloudLoadBalancer）

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 OpenFeign其作用就是基于SpringMVC的常见注解&#xff0c;帮我们优雅的实现http请求的发送。 RestTemplate实现了服务的远程调用 OpenFeign快速入门负载均衡组件Spr…
阅读更多...
最新文章

Copyright @ 2022~2023