JavaScript数组

最新推荐文章于 2024-07-28 20:27:10 发布

初学小徐

最新推荐文章于 2024-07-28 20:27:10 发布

阅读量59

点赞数

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/weixin_48735790/article/details/133269992

版权

介绍

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

使用用法

1.声明语法
第一种：字面量声明数组

let 数组名=[数据1，数据2，数据3，...数组n]

第二种：构造函数声明

let arr=new Array[1,2,3,4]

数组是按照顺序保存，所以每个数据都有自己的编号。在数组中，数据的编号也叫索引或下标

2.取值语法

数组名[下标]

3.术语

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

4.遍历数组
目标：使用遍历输出数组里面的元素

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

for(let i = 0;i<数组名.length;i++){
	数组名[i]
}
//例子
let num=[10,20,30,40]
for(let i = 0;i<num.length;i++){
	document.write(num[i])
}

5.案例
求数组中的最大或最小值
代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <script>
      let num = [2, 6, 1, 77, 52, 25, 7];
      let max = num[0];
      let min = num[0];
      // 遍历数组方法1
      for (let i = 1; i < num.length; i++) {
         // max存的是最大值
         if (max < num[i]) {
           max = num[i];
         }
         // min存的是最小值
         if (min > num[i]) {
           min = num[i];
         }
      }
 		// 遍历数组方法2
      for (let i = 1; i < num.length; i++) {
        // 使用三元运算
        max < num[i] ? (max = num[i]) : max;
        min > num[i] ? (min = num[i]) : min;
      }
      document.write(max);
      document.write(min);
    </script>
  </body>
</html>

操作数组

数组本质是数据集合，操作数组无非就是增删改查语法
具体
增：在数组中增添新的数据，（新增的内容）arr.push / arr.unshift
删：删除数组中的数据，arr.pop / arr.shift / arr.splice(操作的下标，删除的个数)
改：将原来的数据重新进行赋值，数组[下标]=新值
查：查询数组中数据,使用下标进行查询，也称为访问数组数据

增
数组.push()方法是将一个或多个元素添加到数组的末尾，并返回该数组的新长度
数组.unshift()方法是将一个或多个元素添加到数组的开头，并返回该数组的新长度

案例将数组[2，0，6，1，77，0，52，0，25，7]中带等于10的元素选出来，放入新数组
代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <script>
        let arr=[2,0,6,1,77,0,52,0,25,7]
        let newarr=[]
        for (let i = 0; i < arr.length; i++) {
            if (arr[i]>=10) {
                newarr.push(arr[i])
            }
        }
        document.write(newarr)
    </script>
  </body>
</html>

删
数组.pop()方法从数组中删除最后一个元素，并返回该元素的值
数组.shift()方法从数组中删除第一个元素，并返回该元素的值
数组.splice()方法方法从数组中删除指定一个元素，并返回该元素的值

改查会在代码演示中显示

代码演示(增删改查)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <script>
      // 新增
      let arr = [1, 2, 3];
      // arr.push()主要是添加在数组的末尾
      arr.push(4);
      document.write(`arr[${arr}]`); //arr[1,2,3,4]
      // 还可以新增多个数据
      arr.push("one", "two");
      document.write(`arr[${arr}]`); //arr[1,2,3,4,one,two]
      // arr.unshift()主要是添加在数组的开头
      let farry = [5, 6, 7];
      farry.unshift(4);
      document.write(`farry[${farry}]`); //farry[4,5,6,7]
      // 还可以新增多个数据
      farry.unshift("one", "two");
      document.write(`farry[${farry}]<br>`); //farry[one,two,4,5,6,7]

      // 删除
      //   删除最后一个元素
      let array = ["red", "green", "blue", "black"];
      array.pop();
      document.write(`array[${array}]`); //array[red,green,blue]
      // 删除第一个元素
      array.shift();
      document.write(`array[${array}]`); //array[green,blue]
      // 删除指定的元素 splice(起始位置/索引号，删除几个)
      let as = [1, 2, 3, 4, 5, 6, 7];
      as.splice(1, 1);
      document.write(`as[${as}]`); //as[1,3,4,5,6,7]

      // 修改
      let nums = ["苹果", "香蕉", "梨"];
      nums[0] = "apple";
      document.write(`nums[${nums}]`); //nums[apple,香蕉,梨]

      // 查
      let cnums = ["苹果", "香蕉", "梨"];
    //   document.write(cnums[1]);
      document.write(`cnums[${cnums[1]}]`);//cnums[香蕉]
    </script>
  </body>
</html>

综合案例

用户输入四个季度的数据，可以生成柱状图。
分析：输入4个数据，并且放在数组中，将柱形图的高度设置为用户输入的数据，并且宽度设置为固定
代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    .box {
      /* display: flex */
      display: flex;
      width: 700px;
      height: 300px;
      /* solid */
      border-left: 1px solid pink;
      border-bottom: 1px solid pink;
      margin: 50px auto;
      /* justify-content: space-around */
      justify-content: space-around;
      /* align-items: flex-end; */
      align-items: flex-end;
      text-align: center;
    }
    .box > div {
      /* 
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        */
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 50px;
      background-color: pink;
    }
    .box div span {
      margin-top: -20px;
    }
    .box div h4 {
      margin-bottom: -35px;
      width: 70px;
      margin-left: -10px;
    }
  </style>
  <body>
    <!-- <div class="box">
      <div style="height: 123px">
        <span>123</span>
        <h4>第一季度</h4>
      </div>
      <div style="height: 156px">
        <span>156</span>
        <h4>第二季度</h4>
      </div>
      <div style="height: 120px">
        <span>120</span>
        <h4>第三季度</h4>
      </div>
      <div style="height: 210px">
        <span>210</span>
        <h4>第四季度</h4>
      </div>
    </div> -->
    <script>
      let arr = [];
      // 弹框
      for (let i = 1; i < 5; i++) {
        arr.push(prompt(`请输出第${i}季度的数组：`));
      }
    //   盒子的开头
      document.write('<div class="box">')
      
   // 盒子的中间
        for (let 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>