JS基础 day3 | for循环+数组

csyldjy

已于 2022-05-30 11:12:42 修改

阅读量5.3k

点赞数

分类专栏：前端 JS基础文章标签： p2p linq 网络协议

于 2022-05-27 18:25:17 首次发布

本文链接：https://blog.csdn.net/csyldjy/article/details/124971411

版权

前端同时被 2 个专栏收录

31 篇文章 1 订阅

订阅专栏

JS基础

6 篇文章 0 订阅

订阅专栏

1 循环-for

1.1 for 循环-基本使用

1.1.1 for循环语法

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

1.1.2 退出循环

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

注-while语句与for语句(二者无本质区别)

1 相同点

while(true) 来构造“无限”循环，需要使用break退出循环。
for(;;) 也可以来构造“无限”循环，同样需要使用break退出循环。

2 区别

当如果明确了循环的次数的时候推荐使用for循环
当不明确循环的次数的时候推荐使用while循环

3 联系

①for 循环变体→while(写法)

let i=1
for (;i<5;){
    循环体
    i++
}

②for 循环变体→while(条件)

for (;true;){
    条件+循环体
}

1.2 循环嵌套

1.2.1 for 循环嵌套

循环嵌套: 即一个循环里再套一个循环，一般用在for循环里

练习1

练习2 ❤

练习3 倒三角❤

练习4 99乘法表

    <script>
        for (let r = 1; r <= 9; r++) {
            for (let c = 1; c <= r; c++) {
                let n = c * r
                document.write(`
                <span >
                ${r}*${c}=${n}
               </span>
            `)
            }
            document.write(`<br>`)
        }
    </script>

        body {
            /* 去间隙步骤1 */
            font-size: 0;
        }

        span {
            display: inline-block;
            padding: 3px 4px;
            /* 使边框合并 */
            margin: 0 -1px -1px 0;
            width: 75px;
            text-align: left;
            /* 去间隙步骤2 */
            font-size: 20px;
            border: 1px solid black;
        }

2 数组

2.1 数组是什么

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

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

注: 数组中可以有多种数据类型

2.2 数组的基本使用

1. 声明语法

例:

数组是按顺序保存，所以每个数据都有自己的编号
计算机中的编号从0开始，所以小明的编号为0，小刚编号为1，以此类推
在数组中，数据的编号也叫索引或下标
数组可以存储任意类型的数据

2. 取值语法

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

3. 一些术语

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

4. 遍历数组(重点)

遍历数组:用循环把数组中每个元素都访问到,一般会用for循环遍历

2.3 操作数组

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

2.3.0 操作数组-修改

数组[下标] 修改的是数组元素,而非数组半身

2.3.1 操作数组-新增

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

例如:

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

例如:

2.3.2 操作数组-删除

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

例如:

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

例如:

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

解释：

start 起始位置: 指定修改的开始位置（从0计数）
deleteCount: 表示要移除的数组元素的个数 (可选的。如果省略则默认从指定的起始位置删除到最后)

◇需求使用场景：

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

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

后期课程我们会用到删除操作，特别是 splice

2.4 数组排序

数组. sort() 方法可以排序

        // 原数组
        let arr = [4, 2, 5, 1, 3]

        // 1.升序排列写法
        arr.sort(
            function (a, b) {
                return a - b
            })
        console.log(arr) // [1, 2, 3, 4, 5]

        // 2 降序排列法
        arr.sort(
            function (a, b) {
                return b - a
            })
        console.log(arr)

补充冒泡数组*

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

分析：

        // 1 准备数组
        let arr = [2, 6, 7, 1, 4]

        // 2 排序
        // 外循环提供比较轮数
        for (i = 0; i < arr.length - 1; i++) {
            // 内循环进行两两比较
            for (k = 0; k < arr.length - i - 1; k++) {

                // 如果发现前大后小则两两交换
                if (arr[k] > arr[k + 1]) {
                    // 准备临时变量
                    let temp = arr[k]
                    arr[k] = arr[k + 1]
                    arr[k + 1] = temp
                }
            }
        }

        // 3 输出结果
        alert(arr)

3 综合案例

3.1 根据数据生成柱形图

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

分析：

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

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

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

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

步骤:

1 准备标签+样式(!!!)

2 准备数据(声明)

3 展示数据

3.2 冒泡排序

冒泡排序是一种简单的排序算法。

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

        function getOrder(arr) {
            // 外循环 4轮
            // 涉及数组,建议i从0开始
            for (i = 0; i < arr.length - 1; i++) {

                // 内循环
                for (k = 0; k < arr.length - 1 - i; k++) {
                    if (arr[k] > arr[k + 1]) {
                        let temp = arr[k]
                        arr[k] = arr[k + 1]
                        arr[k + 1] = temp
                    }
                }
            }
            return `数组正序为${arr}`
        }

        alert(getOrder([652, 25, 46, 4, 7]))