四 JavaScript基础之ECMAScript 数组数组声明数组取值元素长度遍历数组操作数组查改增

数组

数组是按顺序保存数据的数据类型单个变量保存数组中的多个数据

声明数组

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

 let arr = new Array(1,2,3,4)

取值

索引或下标号从0开始数组名[0]

  let arr = [2,6,1,7,4]
  console.log(arr[0]) //2

元素

数组中保存的每个数据叫数组元素

长度

arr.length

遍历数组

for(i=0;i<arr.length;i++){console.log(arr[i])}

操作数组

增删改查

查

arr[下标]

改

arr[下标]=新值

增

arr.push()新增末尾 arr.unshift()新增开头

       //筛选数组大于等于10的元素放入新数组中
       let newArr = []
       let arr = [2,0,6,1,77,0,52,0,25,7]
       for(i=0;i<arr.length;i++){
        if(arr[i]>=10){
           newArr.push(arr[i])
        }
       }
       console.log(newArr);

删

arr.pop()删除末尾 arr.shift()删除开头 arr.splice(1,1)从索引号1开始删除一个元素(应用场景:随机抽奖,指定商品)

冒泡排序

一次比较两个元素大小升序或降序如321 123

       //冒泡排序算法 
       let arr = [5,4,3,2,1]
       for(i=0;i<arr.length;i++){
        for(j=0;j<arr.length;j++){
            if(arr[j]>arr[j+1]){
           // 交换两个变量 声明临时变量
              let temp = arr[j]
              arr[j] = arr[j+1]
              arr[j+1] = temp
        }
       }
      }
       console.log(arr);

数组排序

arr.sort()升序 arr.sort(function(a,b){ return b-a })降序

       let arr = [5,3,2,4,1]
       arr.sort(function(a,b){
        return b-a
       })
       console.log(arr);

数组综合案例渲染柱形图

截屏2023-04-24 14.57.57.png

<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>综合渲染柱形图案例</title>
    <style>
      *{
        margin: 0;
        padding: 0;
      }
      .box{
        display: flex;
        margin: 50px auto;
        width: 700px;
        height: 300px;
        border-left: 1px solid #000;
        border-bottom: 1px solid #000;
        justify-content: space-around;
        align-items: flex-end;
        text-align: center;
      }
     .box>div{
        display: flex;
        width: 50px;
        background-color: pink;
        flex-direction: column;
        justify-content: space-between;
     }
     .box div span{
        margin-top: -20px;
     }
     .box div h4{
        margin-bottom: -35px;
        width: 70px;
        margin-left: -10px;
     }
    </style>
</head>
<body>
    <!-- <div class="box">
        <div style="height: 180px;">
            <span>180</span>
            <h4>第1季度</h4>
        </div>
        <div style="height: 210px;">
            <span>210</span>
            <h4>第2季度</h4>
        </div>
        <div style="height: 120px;">
            <span>123</span>
            <h4>第3季度</h4>
        </div>
        <div style="height: 280px;">
            <span>840</span>
            <h4>第4季度</h4>
        </div>
    </div> -->
    <script>
        let arr = []
        for(i=1;i<=4;i++){
           let num = +prompt(`请输入第${i}季度的数据:`)
           arr.push(num)
        }
        document.write(` <div class="box">`)
        for(i=0;i<arr.length;i++){
        document.write(`
        <div style="height: ${arr[i]}px;">
            <span>${arr[i]}</span>
            <h4>第${i+1}季度</h4>
        </div>
        `)}
        document.write(` </div>`)
    </script>
</body>
</html>