JavaScript入门day3 for循环、数组、操作数组

‍小林同学学JAVA

已于 2024-11-12 12:24:28 修改

阅读量971

点赞数 13

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

于 2024-07-27 17:29:53 首次发布

本文链接：https://blog.csdn.net/2301_77358195/article/details/140727397

版权

前端专栏收录该内容

36 篇文章 0 订阅

订阅专栏

1.For循环

1.1 for 循环-基本使用

1. for循环语法

作用： 重复执行代码

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

2. 退出循环

continue 退出本次循环，一般用于排除或者跳过某一个选项的时候, 可以使用continue

break 退出整个for循环，一般用于结果已经得到, 后续的循环不需要的时候可以使用

1.2 for 循环嵌套

for 循环嵌套

Ø 一个循环里再套一个循环，一般用在for循环里

1.3 练习

1.打印5行5列的星星

需求：页面中打印出5行5列的星星

分析：

①：利用双重for循环来做

②：外层循环控制打印行，内层循环控制每行打印几个（列）

升级版本：

用户输入行数和列数，打印对应的星星！

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

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

<body>
    <script>
        let row = +prompt('请输入行数:')
        let clu = +prompt('请输入列数:')
        for (let num = 1; num <= row; num++) {
            for (let num1 = 1; num1 <= clu; num1++) {
                document.write('★')
            }
            document.write('<br>')
        }
    </script>
</body>

</html>

2.打印倒三角形星星

需求：如图所示

分析：

①：利用双重for循环来做

②：外层循环控制打印行，内层循环控制每行打印几个（列）

③：内层循环的个数跟第几行是一一对应的

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

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

<body>
    <script>
        let row = +prompt('请输入行数:')  
        let clu = 1
        for (let num = 1; num <= row; num++) {
            for (let num1 = 1; num1 <= clu; num1++) {
                document.write('★')
            }
            clu++
            document.write('<br>')
        }
    </script>
</body>

</html>

3.九九乘法表

需求：如图所示

分析：

①：只需要把刚才倒三角形星星做改动

②：★换成 1x1=2 格式

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        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;
        }
    </style>
</head>

<body>
    <script>
        let clu = 1
        for (let num = 1; num <= 9; num++) {
            for (let num1 = 1; num1 <= clu; num1++) {
                let tatal = num1 * num
                document.write(`<span>${num1} × ${num} = ${tatal}</span>`)
                document.write('&nbsp')
                document.write('&nbsp')
                document.write('&nbsp')
            }
            clu++
            document.write('<br>')
        }
    </script>
</body>

</html>

2.数组

2.1 数组是什么

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

为什么要数组？

思考：如果我想保存一个班里所有同学的姓名怎么办？
场景：如果有多个数据可以用数组保存起来，然后放到一个变量中，管理非常方便

数组的特点：

可存储不同类型的数据：
- 数组可以存储不同类型的数据，包括数字、字符串、对象、函数等。
动态大小：
- 数组的长度是动态的，可以添加或删除元素动态改变数组大小。
可变性：
- 数组是可变的，可以直接修改数组中的元素。
丰富的内置方法：
- JavaScript 提供了丰富的内置方法来操作数组，如 push()、pop()、shift()、unshift()、splice()、slice()、map()、filter()、reduce() 等。

2.2 数组的基本使用

1. 声明语法

2.3 遍历数组(重点)

2.4 操作数组

数组本质是数据集合, 操作数据无非就是增删改查语法：

2.4.1 新增

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

语法：

2.arr.unshift(新增的内容) 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度

语法：

2.4.2 删除

使用场景：

1. 随机抽奖，中奖的用户就需要从数组里面删除，不允许重复抽奖

2. 点击删除按钮，相关的数据会从商品数据中删除

1.数组. pop() 方法从数组中删除最后一个元素，并返回该元素的值

语法：

2.数组. shift() 方法从数组中删除第一个元素，并返回该元素的值

语法：

3.数组. splice() 方法删除指定元素

语法：

解释：

Ø start 起始位置:

Ø 指定修改的开始位置（从0计数）

Ø deleteCount:

Ø 表示要移除的数组元素的个数

Ø 可选的。如果省略则默认从指定的起始位置删除到最后

2.5 练习

1.数组求和

需求：求数组[2,6,1,7,4]里面所有元素的和以及平均值

分析：

①：声明一个求和变量sum。

②：遍历这个数组，把里面每个数组元素加到sum里面。

③：用求和变量sum除以数组的长度就可以得到数组的平均值。

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

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

<body>
    <script>
        let sum = 0
        let avg = 0
        let arr = [2, 6, 1, 7, 4]
        for (let num = 0; num < arr.length; num++){
            sum += arr[num]
        }
        document.write(`数组元素和:${sum}`)
        document.write('<br>')
        avg = sum / arr.length
        document.write(`数组元素平均值:${avg}`)
    </script>
</body>

</html>

2.数组筛选

求：将数组[2,0,6,1,77,0,52,0,25,7]中大于等于10的元素选出来，放入新数组

分析：

①：声明一个新的数组用于存放新数据newArr

②：遍历原来的旧数组，找出大于等于 10 的元素

③：依次追加给新数组 newArr

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

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

<body>
    <script>
        // 求：将数组[2,0,6,1,77,0,52,0,25,7]中大于等于10的元素选出来，放入新数组
        let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
        let arr1 = []
        for (let num = 0; num < arr.length; num++) {
            if(arr[num] >= 10){
                // arr1.push(arr[num])
                arr1.unshift(arr[num])
            }
        }

        for (let num = 0; num < arr1.length; num++) {
            document.write(arr1[num])
            document.write('<br>')
        }
    </script>
</body>

</html>

3.综合案例

1.根据数据生成柱形图

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

分析：

①：需要输入4次，所以可以把4个数据放到一个数组里面

利用循环，弹出4次框，同时存到数组里面

②：遍历改数组，根据数据生成4个柱形图，渲染打印到页面中

柱形图就是div盒子，设置宽度固定，高度是用户输入的数据

div里面包含显示的数字和第n季度

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <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>
    <!-- <div class="box">
        <div style="height: 123px;">
            <span>123</span>
            <h4>第1季度</h4>
        </div>
        <div style="height: 156px;">
            <span>156</span>
            <h4>第2季度</h4>
        </div>
        <div style="height: 120px;">
            <span>120</span>
            <h4>第3季度</h4>
        </div>
        <div style="height: 210px;">
            <span>210</span>
            <h4>第4季度</h4>
        </div>

    </div> -->
    <script>
        let arr1 = []
        for (let i = 0; i < 4; i++) {
            arr1.push(prompt(`请输入第${i + 1}季度的数据`))
        }

        document.write('<div class="box">')

        for (let j = 0; j < arr1.length; j++) {
            document.write(`
        <div style="height: ${arr1[j]}px;">
            <span>${arr1[j]}</span>
            <h4>第${j + 1}季度</h4>
        </div>
        `)
        }
        document.write('</div>')

    </script>
</body>

</html>

2.冒泡排序

分析:

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

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

<body>
    <script>
        let arr = [65, 32, 78, 66, 22, 29]
        for (let i = 0; i < arr.length - 1; i++) {
            for (let j = 0; j < arr.length - i - 1; j++) {
                if (arr[j] > arr[j + 1]) {
                    //开始交换,第一个数大于第二个数
                    let temp = arr[j]
                    arr[j] = arr[j+1]
                    arr[j+1] = temp
                }
            }
        }
        console.log(arr)
    </script>
</body>

</html>