JS基础 day3 | for循环+数组

目录

1 循环-for

1.1 for 循环-基本使用

1.1.1 for循环语法

1.1.2  退出循环

1.2 循环嵌套

1.2.1 for 循环嵌套

2 数组

2.1 数组是什么

2.2 数组的基本使用

2.3   *** 作数组

2.3.0  *** 作数组-修改

 2.3.1 *** 作数组-新增

 2.3.2 *** 作数组-删除

2.4 数组排序

补充 冒泡数组*

3 综合案例

3.1 根据数据生成柱形图

3.2 冒泡排序

每日错题

---

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乘法表

        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个数据放到一个数组里面

利用循环，d出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]))

每日错题: