Javascript-day03-循环-for,数组

1. 循环-for

1.1 for循环语法
也是重复执行代码
好处：把声明起始值、循环条件、变化值写到一起，让人一目了然

for循环和while循环有什么区别呢?
当如果明确了循环的次数的时候推荐使用for循环
当不明确循环的次数的时候推荐使用while循环

1.2 循环退出
目标：能说出continue和break的区别

循环结束：
continue：结束本次循环，继续下次循环
break：跳出所在的循环

1.3 for 循环嵌套
目标：掌握for循环重复执行某些代码

for 循环嵌套

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

咱们一起做个小练习!!

三角形

   <script>
        // 顺三角
        // for (let i = 0; i < 5 ; i++) { // 0 1 2 3 4 

        //     for (let j = 0; j <= i ; j++) {  // 0 1 2 3 4 
                            // j 等于 小于等于 i 
                            //  这样我 0 行的时候; 一个花
                            //        一行的时候;两个花
        //     document.write('💮')
        //     }
            
        //     document.write('<br>')
        // }


        // 倒三角
        // 顺序倒转  5 -1 ; 5 - 2 ; 以此类推
        for (let i = 0; i < 5 ; i++) { // 0 1 2 3 4 

            for (let j = 0; j < 5 - i ; j++) {  // 0 1 2 3 4 
            document.write('💮')
            }
            
            document.write('<br>')
        }
    </script>

九九乘法表

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

2. 数组

2.1 数组的基本使用
目标：能够声明数组并且能够获取里面的数据

声明语法

例

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

取值语法

例

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

目标：掌握数组，把一堆数据有序管理起来

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

目标：能够遍历输出数组里面的元素

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

例

filter方法: 
      // 无bug 
      // 方法简单

分析:

案例01:

 <script>
        let arr = [10, 20, 30, 50];
        let sum = 0, avg = 0;
        for (let i = 0; i < arr.length; i++){
            sum += arr[i]
        }
        avg = (sum / arr.length).toFixed(2)
        console.log(`和为: ${sum}, 平均值: ${avg}`);
    </script>

案例02:

    <script>

        let arr = [100,60,105,10,15]
        let max = arr[0]
        let min = arr[0]
        for (let i = 0; i < arr.length; i++){
            if (max < arr[i]) {
                max = arr[i]
            }
            if (min > arr[i]) {
                min = arr[i]
            }
        }
        console.log(`最大值是: ${max}, 最小值是: ${min}`);
    </script>

2.2 操作数组

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

数组添加新的数据
arr.push(新增的内容)
arr.unshift(新增的内容)
删除数组中数据
arr.pop()
arr.shift()
arr.splice(操作的下标,删除的个数)
重新赋值
数组[下标] = 新值
查询数组数据
数组[下标]
或者我们称为访问数组数据

目标：掌握利用push / unshift向数组添加元素(数据)

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

例如：

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

例如：

数组增加新的数据小结

想要数组末尾增加数据元素利用那个方法？
可以添加一个或者多个数组元素
返回的是数组长度
想要数组开头增加数据元素利用那个方法？
arr.unshift()
可以添加一个或者多个数组元素
返回的是数组长度
重点记住那个？
arr.push()

目标：能够利用splice删除数组元素(数据)

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

数组. splice() 方法 添加指定元素

        <script>
        
        // 如何在任意位置,添加一个元素
        // splice : 第三个参数,就是要添加的元素
        // splice : (起始位, 要删除的数量, 要新增的元素)
        let ycl = arr.splice(0, 1, "阳赐林")
        // 打印数组
        console.log('arr: ', arr);
        // 打印返回值
        console.log('ycl: ', ycl);
        
        </script>

数组删除元素小结

想要数组末尾删除1个数据元素利用那个方法？带参数吗？
arr.pop()
不带参数
返回值是删除的元素
想要数组开头删除1个数据元素利用那个方法？带参数吗？
arr.shift()
不带参数
返回值是删除的元素
想要指定删除数组元素用那个？开发常用吗？有那些使用场景？
arr.splice(起始位置, 删除的个数)
开发很常用，比如随机抽奖，比如删除指定商品等等