05-数组

数组

1.初识数组

  1. 数组是什么?

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

  2. 数组的作用?

    可以将多个数据储存到数组中

  3. 如何筛选出数组内的其他元素?

    使用下标,数组内的元素依次从0开始计算下标,选中相应的下标就会输出相应的元素

2.数组的基本使用

1.数组的声明及了解

  1. 声明语法

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ApHaf7LO-1648710320835)(05-数组.assets/1648608362168.png)]

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9VC20IYc-1648710320836)(05-数组.assets/1648608416906.png)]

  2. 解释说明

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

    取值语法:

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-orl1XXcR-1648710320836)(05-数组.assets/1648608489064.png)]

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WjyS7g5y-1648710320836)(05-数组.assets/1648608501327.png)]

    代码块

        <script>
            // 命名数组
            let fruit = ['苹果', '香蕉', '菠萝', '橘子', '草莓']
            //如何获取数组中的元素呢,用下标的 方式获取
            document.write(fruit[0])
     </script>
    
  4. 检测数组长度:数组中数据的个数,通过数组的length属性获得

    语法:数组名.length

    代码块:

        <script>
            // 命名数组
            let fruit = ['苹果', '香蕉', '菠萝', '橘子', '草莓']
            //如何获取数组中的元素呢,用下标的 方式获取
            document.write(fruit[0])
            //获取数组的长度 数组名.length
            console.log(fruit.length);
            //当输出的数组下标超过数组的长度是,会显示未定义undefined
            console.log(fruit[7]);
        </script>
    

    注意:如果在使用数组下标的方式输出数组元素时,当下标超过数组长度,会输出undefined

2.数组的使用

1.遍历数组

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

  1. 语法:

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hz9z2xYH-1648710320837)(05-数组.assets/1648610810926.png)]

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uUIK626p-1648710320837)(05-数组.assets/1648610824850.png)]

  2. 代码块

        <script>
            // 遍历循环
            let str = ['关羽', '张飞', '马超', '赵云', '黄忠', '刘备', '姜维', '诸葛亮']
            for (let index = 0; index < str.length; index++) {
                document.write(str[index]);
                document.write(`<br/>`)
            }
        </script>
    
2.求数组和及平均数
  1. 分析:

    • 声明一个求和变量 sum。
    • 遍历这个数组,把里面每个数组元素加到 sum 里面。
    • 用求和变量 sum 除以数组的长度就可以得到数组的平均值。
  2. 代码块:

        <script>
            //求和
            let sum = 0
            let num = [1, 23, 4, 5, 6, 7, 3,]
            for (let index = 0; index < num.length; index++) {
    
                sum += num[index];
            }
          </script>
    
        <script>
        //求数组平均数
            let sum = 0
            let num = [1, 23, 4, 5, 6, 7, 3,]
            for (let index = 0; index < num.length; index++) {
    
                sum += num[index];
            }
            console.log(sum);
            sum = (sum / num.length)
            console.log(sum);
        </script>
    
3.筛选数组的最值
  1. 分析:

    • 声明一个保存最大元素的变量 max。
    • 默认最大值可以取数组中的第一个元素。
    • 遍历这个数组,把里面每个数组元素和 max 相比较。
    • 如果这个数组元素大于max 就把这个数组元素存到 max 里面,否则继续下一轮比较。
    • 最后输出这个 max
  2. 代码块

        <script>
            let num = [12, 23, 45, 9, 24, 6, 7, 4, 56, 99, 0]
            /* 求数组的最大值思路
            1,首先要声明一个变量max,表示最大值
            2.将这个变量与数组中的其他元素进行比较
            */
            let max = num[0]
            for (let index = 0; index < num.length; index++) {
                if (num[index] > max) {
                    max = num[index]
                }
            }
            console.log(max);
    
            // 扩展:求数组的最小值
            let min = num[0]
            for (let i = 0; i < num.length; i++) {
                if (num[i] < min) {
                    min = num[i]
                }
            }
            console.log(min);
        </script>
    

3.操作数组

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

  1. 查询数组数据:数组[下标],或者我们称为访问数组数据
  2. 重新赋值:数组[下标] = 新值
  3. 数组添加新的数据:以下的两种方式返回的是数组长度(会动态检测更新数组的长度)
    • arr.push(新增的内容)
    • arr.unshift(新增的内容)
  4. 删除数组中数据:
    • arr.pop()
    • arr.shift()
    • arr.splice(操作的下标,删除的个数)

1.数组增加新的数据

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

  2. 语法:

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-edVX3zRv-1648710320837)(05-数组.assets/1648612932326.png)]

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oQWa0qsC-1648710320838)(05-数组.assets/1648612947082.png)]

  3. 代码块

        <script>
            // 使用push的方式增加数组元素:数组名.(新元素)
            let num = [1, 2, 4, 5, 7, 5]
            num.push('阿良')
            console.log(num);
        </script>
    
  4. 案例

    练习1:保存用户输入的四名同学的姓名

        <script>
            // 练习:让用户输入的方式增加新数组
            // 输入四个同学的姓名
            let userName = []
            for (let i = 1; i <= 4; i++) {
                let Name = prompt('请输入同学的姓名:')
                userName.push(Name)
            }
            console.log(userName);
          </script>
    

    练习2:通过筛选的方式,将数组中大于等于10的元素添加到新数组中

        <script>
            // 筛选数组元素,将数组中大于10的元素添加到第二个数组中
            let num1 = [1, 4, 42, 78, 9, 46, 32, 12]
            // 建立一个新的空数组
            let num2 = []
            for (let index = 0; index < num1.length; index++) {
                // 判断当num1数组中的元素大于等于10的时候,进行下一轮循环判断
                if (num1[index] >= 10) {
                    // num1数组中的元素>=10,将这些元素添加到新数组中
                    num2.push(num1[index])
                }
            }
            console.log(num2);
        </script>
    
2.添加元素到开头
  1. arr.unshift(新增的内容) 方法将一个或多个元素添加到数组的开头,并返回该数组的新长度

  2. 语法:

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DgVOEy7L-1648710320838)(05-数组.assets/1648614473445.png)]

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BFHG67aD-1648710320838)(05-数组.assets/1648614499366.png)]

  3. 代码展示

        <script>
            // 使用unshift的方式将元素添加到数组的开头
            let num = [1, 2, 3, 4, 5, 6]
            num.unshift('阿良')
            console.log(num);//将元素添加到数组的开头
        </script>
    
  4. 案例

    需求:将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中的 0 去掉后,形成一个不包含 0 的新数组

    分析:

    • 声明一个新的数组用于存放新数据newArr
    • 遍历原来的旧数组, 找出不等于0的元素
    • 依次追加给新数组 newArr
        <script>
            let num = [0, 1, 2, 3, 4, 5, 6, 7,]
            // 去除掉数组中的0
            let num1 = []
            for (let i = 0; i < num.length; i++) {
                if (num[i] !== 0) {
                    num1.push(num[i])
                }
            }
            console.log(num1);
        </script>
    
3.任意位置插入新元素
  1. 借用splice的特性插入新元素

    注意:splice更多是用来删除指定位置的元素

  2. 语法:

    数组名.splice(想要插入元素的下标,删除数为0,新元素)

  3. 代码展示

        <script>
            let num = ['苹果', '香蕉', '西瓜', '榴莲', '芒果']
            // 在香蕉的后面插入'草莓'
            num.splice(2, 0, '草莓')
            console.log(num);//     ['苹果', '香蕉', '草莓', '西瓜', '榴莲', '芒果']
            // 数组i名.splice(插入新元素的位置,删除0个元素,新元素)
        </script>
    

2.数组删除元素

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

  2. 语法

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Od47c9fz-1648710320838)(05-数组.assets/1648623798935.png)]

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fib1BhLI-1648710320838)(05-数组.assets/1648623765547.png)]

  3. 代码块

        <script>
            // 从数组尾部删除数组元素
            let num = [0, 1, 2, 3, 4, 5, 6, 7, 8]
            num.pop()
            console.log(num); //输出为:[0, 1, 2, 3, 4, 5, 6, 7]
        </script>
    
2.删除第一个元素
  1. 数组. shift() 方法从数组中删除第一个元素,并返回该元素的值

  2. 语法:

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eKVKctL9-1648710320839)(05-数组.assets/1648623838987.png)]

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MVxI9Ed4-1648710320839)(05-数组.assets/1648623853702.png)]

  3. 代码块

        <script>
            // 从数组尾部删除数组元素
            let num = [0, 1, 2, 3, 4, 5, 6, 7, 8]
            num.pop()
            console.log(num); //输出为:[0, 1, 2, 3, 4, 5, 6, 7]
            num.shift()
            // 从数组头部删除数组元素
            console.log(num); //输出为:[1, 2, 3, 4, 5, 6, 7]
        </script>
    
3.删除指定元素
  1. 数组. splice() 方法 删除指定元素

  2. 语法:变量名.splice(删除元素的下标,删除的个数)

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kgWWXaSm-1648710320839)(05-数组.assets/1648624398158.png)]

  3. 解析:

    1. start 起始位置: 指定修改的开始位置(从0计数)
    2. deleteCount:
      • 表示要移除的数组元素的个数
      • 可选的。 如果省略则默认从指定的起始位置删除到最后
  4. 删除元素的使用场景:

    1. 随机抽奖,中奖的用户就需要从数组里面删除,不允许重复抽奖
    2. 点击删除按钮,相关的数据会从商品数据中删除,后期课程我们会用到删除操作,特别是splice
  5. 代码

        <script>
            // 使用splice 删除指定位置的数组元素
            let num = ['苹果', '香蕉', '西瓜', '榴莲', '芒果']
            // 删除西瓜
            num.splice(2, 1)//变量名.splice(下标,删除的数量)
            console.log(num);
        </script>
    

4.拓展

1.获取数组的最后一个元素

语法:数组名.length-1

输出时的语法:console.log(数组名[数组名.length-1])

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KYbyXDwq-1648710320839)(05-数组.assets/1648634953048.png)]

2.新增或者修改数组元素

本质:以下标为依据,如果该下标没有赋值,则可以输入新的值进行添加新元素;如果该下标已有元素,可以通过重新赋值的方式修改元素。

修改元素

语法:数组名[下标]=新赋值

本质就是先用下标定位元素,再通过重新赋值的方式修改元素

新增元素

本质:当下标超过数组的长度时,给该下标赋值即可添加新元素。

方法

1.改变数组的长度,胡自动添加空的元素,为未定义

2.使用索引号的方式,追加数组元素

代码块

    <script>
        /*  新增数组元素的方式有两种
         1.改变数组的长度,胡自动添加空的元素,为未定义
          */
        let num = ['程序员', '你好', '快乐', '向北']
        num.length = 5
        console.log(num);
        console.log(num[4]);//新增的元素为undefined

        // 2.使用索引号的方式,追加数组元素
        let num1 = ['程序员', '你好', '快乐', '向北']
        num1[4] = '休息'
        console.log(num1);// ['程序员', '你好', '快乐', '向北', '休息'],添加成功

    </script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sIqCU5pC-1648710320840)(05-数组.assets/1648635242193.png)]

3.将数组清空或者保留数组的指定长度

清空数组

数组名[]

代码展示

    <script>
        let num = [1, 2, 3, 4, 5, 6, 7, 8, 9]
        // 清空数组
        num = []
        console.log(num); //输出为 []
    </script>
保留数组指定长度

数组名.length = 长度

代码展示

    <script>
        let num = [1, 2, 3, 4, 5, 6, 7, 8, 9]
        // 要保留前面五位数,其他的数值清空
        num.length = 5;
        console.log(num); //输出为 [1, 2, 3, 4, 5]
    </script>

5.综合训练

制作柱状图

需求:打开页面让用户选择要制作几个柱子,输入之后弹出对应数量的对话框输入柱子的高度,输入完之后页面会显示出对应高度的柱子·。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zh5XNhsd-1648710320840)(05-数组.assets/1648642520121.png)]

思路分析:

  1. 首先先写好样式
  2. 在js中生成ul跟多个li标签(li需要使用for循环的方式)
  3. 自己先创建一个数组,将数组中的值带入到li当中
  4. 再将数组中的值清空,循环4次来获取用户的输入,使用push的方式将用户输入的高度添加到数组中

代码展示

<!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-sizing: border-box;
        }

        ul {
            list-style: none;
            width: 1000px;
            height: 600px;
            margin: 100px auto;
            display: flex;
            justify-content: space-around;
            /* background-color: aqua; */
            border: 1px solid black;
            border-top: none;
            border-right: none;

            /* 设置侧轴的对齐方式 下对齐 */
            align-items: flex-end;
        }

        li {
            width: 100px;
            background-color: pink;
            position: relative;
        }

        span {
            position: absolute;
            top: -30px;
            left: 50%;
            transform: translateX(-50%);
        }

        div {
            position: absolute;
            width: 100%;
            text-align: center;
            /* 相对于父元素的高 */
            top: 100%;
            /* background-color: red; */
        }

        /* li:nth-child(1) {
            height: 400px;
        }

        li:nth-child(2) {
            height: 500px;
        }

        li:nth-child(3) {
            height: 300px;
        }

        li:nth-child(4) {
            height: 400px;
        } */
    </style>
</head>

<body>

    <script>
        /* 
        1.首先将样式写好
        2.将ul跟li标签生成,li要循环
        3. 创建数组,在收集用户输入的数组高度引入
        
        */
        let liHtml = `<ul>`
        let height = []
        let num = prompt(`请输入您要创建的数量:`)
        for (let i = 0; i < num; i++) {
            let h = prompt(`请输入第${i + 1}个柱子的高度`)
            height.push(h)
        }

        for (let index = 0; index < num; index++) {
            liHtml += `<li style="height:${height[index]}px"><span>${index + 1}</span><div>第${index + 1}个季度</div></li>`;
        }

        liHtml += `</ul>`
        document.write(liHtml)
    </script>
</body>

</html>
  •   1.首先将样式写好
      2.将ul跟li标签生成,li要循环
      3. 创建数组,在收集用户输入的数组高度引入
      
      */
      let liHtml = `<ul>`
      let height = []
      let num = prompt(`请输入您要创建的数量:`)
      for (let i = 0; i < num; i++) {
          let h = prompt(`请输入第${i + 1}个柱子的高度`)
          height.push(h)
      }
    
      for (let index = 0; index < num; index++) {
          liHtml += `<li style="height:${height[index]}px"><span>${index + 1}</span><div>第${index + 1}个季度</div></li>`;
      }
    
      liHtml += `</ul>`
      document.write(liHtml)
    
```
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值