JS第五天-数组

黄某的前端奇妙冒险
91 阅读1分钟

数组（和循环做搭配）

数组本质

思考：当想要保存一个班级所有人名字时，怎么做？

数组：可以保存多个数据

数组基本使用

1.声明语法

<script>
        // 1.声明数组
        let arr = [`小明`,`小红`,`小黄`];
</script>

细节点：

1.数组中的值，是由0开始的 ，所以小明是0

2.在数组中，数据值的编号 叫索引和下标

3.数组可以储存任意类型的数据

2.取值语法

​ 语法：数组名【编号（索引和下标）】

<script>
        // 1.声明数组
        let arr = [`1`,`2`,`3`];
    	arr[0] //1
    	arr[1] //2
</script>

​ 其他一些术语：

<script>
        // 1.声明数组
        let arr = [`1`,`2`,`3`];
        
        // 2.获取 这个数组中 第 0 个元素 数组是从 0 开始的
        console.log(arr[0])
        
        // 3.数据有几个元素，就是数组长度
        console.log(arr.length) //3
        
        console.log(arr[100]) //这个时候数组 会有不正常的值
        
   </script>

3.遍历数组

​ 本质：用循环的方式把数组中的每一个元素都访问一下。

​ 语法：

<script>
        let arr = [`苹果`,`西瓜`,`葡萄`,`芒果`]
        for (let index = 0; index < arr.length; index++) {
            document.write(arr[index])
        }
    </script>

​ 注意点：

​ 当我们使用 数组做for循环时

​ 1 let index = 0 ; (因为索引下标第一个值就是0 想要提取就要0)

​ 2 判断好循环的条件（ index < arr.length ）

1648608260264.png

求数组和案例

1648609409281.png

​ 代码：

<script>
        // 求数组的和
        // 声明一个数组
        let arr = [2,6,1,7,4],
        // 求和有一个值
        sum = 0
        // 遍历数组
        for (let index = 0; index < arr.length; index++) {
            // 求和之前是sum = sum + i 此处也是类似 要求的和是数组
            sum = sum + arr[index]
        }
        document.write(`和为${sum}<br>`)
        document.write(`平均值为${sum/arr.length}`)
    </script>

最大值数组案例

1648609525883.png

​ 代码：

<script>
        let arr = [2,6,1,77,52,25,7],
        // 假设一初始个最大值，数组第0个元素
        max = arr[0]

        // 用最值来遍历数组 做比较
        for (let index = 0; index < arr.length; index++) {

            // 如果数组中的值 大于 我设置的初始值，就替换最大值。一直循环到数组结束
            if(arr[index]>max){
                max = arr[index]
            }
        }
        document.write(`最大值为${max}`)
    </script>

​ 主要思路：

​ 1.设置一个初始的最大值

​ 2.用这个初始最大值去和数组所有元素比较 （遍历数组去比较）

操作数组

​ 本质：操作数组 是 增 删 改 查 四大语法组成

1648613600766.png

数组增加

​ 语法：数组.push()/unshift()

​ 本质：将一个或者多个元素添加到数组最后/开头，并返回数组新的长度

1648622344884.png

​ 代码：

<script>
    let arr = [1,2,3]
    arr.push(4)
    console.log(arr) //[1,2,3]
    ===============================
    arr.unshift(0)
    console.log(arr) // [0,1,2,3]
</script>

<script>
        // 用户输入 然后添加到数组 最后打印
        let user = []
        // 因为一开始数组没没有值，要给一个循环条件 也就是要几次
        for (let index = 0; index < 4; index++) {
            // 设置一个变量装姓名
            let UserName = prompt(`请输入您的姓名`)
            // 吧装姓名的变量PUSH到数组中
            user.push(UserName)        
        }
        console.log(user)
</script>

案例一：

1648613863380.png

​ 代码：

<script>
        // 需求，将旧数组中大于等于十的数，添加到新数组中
        let num1 = [2,0,6,1,77,0,52,0,25,7]
        // 声明一个新数组
        let num2 = []

        for (let index = 0; index < num1.length; index++) {
            // 如果num1 中数组有大于等于十的时候，添加到新数组
            if (num1[index]>=10){
                num2.push(num1[index])
            }
        }
        document.write(num2)
</script>

​ 总结：在真实开发中，PUSH用的多，un做了解

数据删除

​ 语法：数据.pop() / shift()

​ 本质：从数据中删除最后/第一个元素，并返回该元素值（取鸡蛋，篮子鸡蛋减少，也获取到了一个鸡蛋）

1648623945431.png

​ 代码：

<script>
    let arr = [`西瓜`,`香蕉`,`麻瓜`]
    arr.pop()//删除最后一个元素 麻瓜没有了 
    ===================================
    arr.shift()//删除第一个元素，西瓜没有了
</script>

指定删除：

​ 语法：splice（想要删除的元素下标，删除几个，在该下标位置增加元素）

​ 代码：

<script>
    let arr = [`西瓜`,`香蕉`,`麻瓜`]
    //删除1的下标元素，删除两个
    arr.splice(1,2)//arr=[`西瓜`]
</script>

<script>
    let arr = [`西瓜`,`香蕉`,`麻瓜`]
    //在1下标前面，不删除元素,增加红薯
    arr.splice(1,0,`红薯`)//arr=[`西瓜`]
</script>

总结代码图：

1648625343025.png

小拓展：为什么要数据删除增加？

1648623672623.png

因为有时候代码是动态的，并不能手动删除增加，就可以用操作数组

综合案例-柱状图

1648627423878.png

思路：(先用文字描绘出需求 一步一步来)

1. 打开页面 弹出四个弹窗
2. 用户会输入 数字
3. 最后出现一个 样式 （柱状图）

1648632192494.png

解题操作：

1.首先写HTML布局，写出静态页面

<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;

        /* 设置侧轴的对齐方式 下对齐 */
        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%;
      }
      li:nth-child(1){
        height: 100px;
      }
      li:nth-child(2){
        height: 200px;
      }
      li:nth-child(3){
        height: 300px;
      }
      li:nth-child(4){
        height: 400px;
      }
    </style>
  </head>
  <body>
    <ul>
      <li><span>1</span><div>第1季度</div></li>
      <li><span>2</span><div>第2季度</div></li>
      <li><span>3</span><div>第3季度</div></li>
      <li><span>4</span><div>第4季度</div></li>
    </ul>
</style>
</head>
<body>

2.把BODY里的HTML结构结合到JS中

<script>
    // 由用户决定输几行？
    // let num = +prompt(`输入要几行`) 把条件固定值换成变量
    let liHtml = `<ul>`
      for (let index = 0; index < 4; index++) {
        liHtml += `<li><span>${index+1}</span><div>第${index+1}季度</div></li>`       
      }
        liHtml += `</ul>`

        document.write(liHtml)
</script>

​ 实现原理：

1648630194909.png

​ 1.运用了叠加的知识，熟悉+=理解概念

​ 2.这个结构就是

1648630302615.png ​

3.动态获取用户输入的高度（最后把高度给到每一个LI当中）

​ 1.首先添加一个（声明）数组用于装高度(先随便定义4个高度写进去)

​ 2.再把数组用css行内写法 写进js的li标签中

​ 3.删除css中的li高度

<script>
    let liHtml = `<ul>`
	//这里声明了一个数组装高度
    let LiHeight = [100,50,30,200]
      for (let index = 0; index < 4; index++) {
          //用行内css 把高度值写进去
        liHtml += `<li style="height:${LiHeight[index]}px"><span>${LiHeight[index]}</span><div>第${index+1}季度</div></li>`       
      }
        liHtml += `</ul>`

        document.write(liHtml)
  </script>

4.最后把高度动态生成

​ 通过循环 遍历 获取四次 用户的输入

<script>
      let LiHeight = []
      	for (let index1 = 0; index1 < 4; index1++) {
        // LiHeight[index1] = +prompt(`请输入第${index1+1}个季度的值`)第一种方式
        let height = +prompt(`请输入第${index1+1}个季度的值`)
        // 把height的值添加到数组中
        LiHeight.push(height)
    	}
</script>

总结：

​ 1.不要问自己为什么想不到

​ 2.要关注的是能不能根据老师的步骤去理解每一段代码功能概念

​ 3.顺着老师思路去敲代码

​ 4.能不能完全不看老师代码，自己敲出来

​ 5.多次重复敲，理解就能更上一层楼

​ 6.最后就能形成自己的思路

​ 不骄不躁，一步一脚印，不要急于求成，稳住心态！

数组的补充知识

​ 1.获取数组最后元素：arr[arr.length-1]

​ 2.修改和添加元素

​ 3.保留元素

​ 4.数组可以存放任何元素，一个数组内元素类型要统一

​ 5.属性结合等于号，方法结合括号

<script>
        // 获取数组最后的值 当数组很多
        let arr =[`西瓜`,`黄瓜`,`苦瓜`,`麻瓜`,`傻瓜`]
        // 常用数组写法
        console.log(arr[arr.length - 1])  


        // 新增或者修改数组元素
        let arr1 = [`西瓜`,`黄瓜`,`苦瓜`,`麻瓜`,`傻瓜`]
        // 1.修改
        arr[1] = `黄某是傻瓜`
        // document.write(arr)
        // 2.添加 本来没有下标5 不过这里添加了一个下标5的元素 不过不赋值 则显示undefined
        // 写一百都可以 意思在这个位置放这个元素，不过中间有N个元素是空白的 因为中间的元素没有定义 此时长度是 100+1
        arr[5] = `添加的下标元素`
        document.write(arr)
    
    	// 保留三个元素
        let arr3 = [11,22,33,44,55]
            arr3.length = 3
            console.log(arr3)
</script>
avatar
文章
阅读
粉丝