JS基础三

最新推荐文章于 2024-05-21 19:09:41 发布

1_菜鸟初学者

最新推荐文章于 2024-05-21 19:09:41 发布

阅读量20

点赞数

分类专栏：前端文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_48328683/article/details/135065434

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、循环-for

1.1for循环基本使用

1.for循环语法

作用：重复执行代码
好处：把声明起始值、循环条件、变化值写到一起，让人一目了然，它是最常使用的循环形式

<script>
    let arr = ['刘德华', '黎明', '张国荣', '成龙']
    for (let i = 1; i < arr.length; i++) {
      document.write(arr[i])
    }
  </script>

2.退出循环

continue 退出本次循环，一般用于排除或者跳过某一个选项的时候，可以用continue
break 退出整个for循环，一般用于结果已经得到了

for循环和while循环有什么区别？

如果明确了循环次数，使用for
不明确次数，使用while

1.2循环嵌套

1.for循环嵌套
在这里插入图片描述

一个循环里面再套一个循环，一般用在for循环里
案例：一天记五个，三天记多少

<script>
    for (let i = 1; i <= 3; i++) {
      document.write(`第${i}天<br>`)
      for (let j = 1; j <= 5; j++) {
        document.write(`记住了第${j}个单词<br>`)
      }
    }
  </script>

注：外层循环一次，内层循环所有次

案例：

打印倒三角

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

九九乘法表
①：把※换成1 * 1=2

<style>
    span {
      display: inline-block;
      width: 135px;
      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;
    }
  </style>
</head>

<body>

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

二、数组

2.1数组是什么

数组：(Array)是一种可以按顺序保存数据的数据类型
场景：多个数据可以用数组保存起来，然后放到一个变量中，管理非常方便

2.2数组的基本使用

1.声明语法
在这里插入图片描述
例如：

let arr = ['小包', 1, true]

数组是按顺序保存的，所以每个数据都有自己的编号，从0开始
在数组中，数据的编号也叫索引或者下标
数组可以存储任意类型的数据

2.取值语法
在这里插入图片描述
例如：

let arr = ['小包', 1, true]
    alert(arr[2])

通过下标来获取数据
取出来是什么类型，就根据这种类型特点来访问

3.术语

元素：数组中保存的每个数据都叫数组元素
下标：数组中数据的编号
长度：数组中数据的个数，通过数组的length属性获得

4.遍历数组
用循环把数组中每个元素都访问到

<script>
    let arr = ['小包', 1, true]
    for (let i = 0; i < arr.length; i++) {
      document.write(arr[i])
    }
  </script>

求数组和、平均值

<script>
    let arr = [2, 6, 1, 7, 9]
    let sum = 0
    let avg = 0
    for (let i = 0; i < arr.length; i++) {
      sum += arr[i]
    }
    avg = sum / arr.length
    alert(`和为${sum},平均值为${avg}`)
  </script>

求最大值和最小值

①：声明一个保存最大元素的变量
②：默认最大值可以取数组中的第一个元素
③：遍历数组，把里面的每个元素和max比较
④：如果这个元素大于max，就把这个元素保存到max，继续下一轮比较
⑤：最后输出max

<script>
    let arr = [2, 6, 1, 7, 9]
    let min = arr[0]
    let max = arr[0]
    for (let i = 1; i < arr.length; i++) {
      if (max < arr[i]) {
        max = arr[i]
      }
      if (min >= arr[i]) {
        min = arr[i]
      }
    }
    alert(`最大值为${max},最小值为${min}`)
  </script>

2.3操作数组

- 数组的本质是数据集合，操作数组无非是增删改查语法：

修改
再次赋值（不用声明）

 let arr = [2, 1, 45, 23, 12]
    alert(arr[1])
    arr[1] = 3
    alert(arr[1])

新增

数组.push()方法将一个或者多个元素添加到数组的末尾，并返回该数组的新长度（重点）
语法：

例如:
arr.unshift()方法将一个或者多个元素添加到数组的开头，并返回该数组的新长度
语法：
例如

数组筛选
需求：将数组中大于10的元素选出来，放入新数组

分析：
①：声明一个新的数组用于存放新数据newArr
②：遍历原来的旧数组，找出大于等于10的元素
③：依次追加给新数组newArr

<script>
    let arr = [2, 1, 45, 23, 12]
    let newArr = []
    for (let i = 0; i < arr.length; i++) {
      if (arr[i] > 10) {
        newArr.push(arr[i])
      }
    }
    alert(newArr)
  </script>

删除

数组.pop()方法从数组中删除最后一个元素，并返回该元素的值
语法
例如：
arr.shift()删除第一个元素
数组.splice()方法删除指定元素
语法：
deleteCount:
表示要移除的数组元素的个数
可选的。如果省略则默认从指定的起始位置删除到最后

文档查看

2.4数组案例

需求：用户输入四个季度的数据，可以生成柱状图

分析：
①：需要输入4次，可以把4个数据放到一个数组里
②：遍历数组，根据数据生成4个柱形图，渲染打印到页面中

柱状图就是div盒子，设置宽度固定，高度是用户输入的数据
div里面包含显示的数字和第n季度

<style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      display: flex;
      width: 700px;
      height: 300px;
      border-left: 1px solid pink;
      border-bottom: 1px solid pink;
      margin: 50px auto;
      justify-content: space-around;
      align-items: flex-end;
      text-align: center;
    }

    .box>div {
      display: flex;
      width: 50px;
      background-color: pink;
      flex-direction: column;
      justify-content: space-between;
    }

    .box div span {

      margin-top: -20px;
    }

    .box div h4 {
      margin-bottom: -35px;
      width: 70px;
      margin-left: -10px;
    }
  </style>
</head>

<body>
  <script>
    let arr = []
    for (let i = 1; i <= 4; i++) {
      arr.push(prompt(`请输入第${i}个数字`))
    }
    // 盒子开头
    document.write(`<div class="box">`)

    for (let i = 0; i < 4; i++) {
      document.write(`
        <div style="height: ${arr[i]}px;"
          <span>123<span>
            <h4>第${i + 1}季度</h4>
        </div>
        `)
    }
    //盒子结尾
    document.wtite(`</div>`)
  </script>
</body>