数组(Array)

1.定义

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

2.数组的基本使用

2.1 声明语法

2.2 取值语法

  <script>
    // 1.声明数组（array），英文下的中括号[用逗号隔开数据]
    let arr = ['苹果', '雪梨', '香蕉','圣女果','榴莲','芒果','石榴']
    // 2.取值语法
    // 获取这个数组的第0个元素 (就是讲的是索引或者下标)
    console.log(arr[0]); //结果是苹果
    // 3.数组的长度 (arr.length)
    console.log(arr.length); //结果是7
    //当我们的获取的元素的下标超出了数组的长度就输出undefined
    console.log(arr[100]);  //结果是undefined
  </script>

2.3 专业术语

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

注意点

数组是按顺序保存，所以每个数据都有自己的编号
在数组中，数据的编号也叫索引或下标。通常我们也是叫索引或下标来指示元素
计算机中的编号是从0开始的
当我们的获取的元素的下标超出了数组的长度就输出undefined

2.4 遍历数组

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

语法

推导for循环遍历数组的由来

 <title>推导数组的循环由来</title>
</head>
<body>
  <script>
    // 声明一个数组
    let arr = [10,20,30,40,50]
    // 挨个打印数组里面的元素
    arr[0] //结果是10
    arr[1] //结果是20
    arr[2] //结果是30
    arr[3] //结果是40
    arr[4] //结果是50
    // 通过循环挨个打印数组里面的元素
    for (let index = 0; index < arr.length; index++) {
     
      // 如果index =1，2,3,4,5  arr[5]
      // arr[index]  那么就发现arr[0]没有输出，或者输出arr[5]是undefined
      // 所以综上所述，我们发现下标index的范围只能是 0-4
      // index = 0
      // 下标范围只能是0-4，用index <=4 或者index < 5
      // 因为数组的长度是5(arr.length)，所以最终比较好的写法是index < arr.length
    }
  </script>

小试牛刀案例1

需求：求数组 [2,6,1,7, 4] 里面所有元素的和以及平均值

代码案例

<script>
      // 声明数组
      let arr = [2, 6, 1, 7, 4];
      // 声明一个变量求和 sum
      let sum = 0;
      // 遍历数组的循环
      for (let index = 0; index < arr.length; index++) {
         /* 当index = 0，arr =2，sum = arr = 2
       当index = 1，arr =6，sum = 上面的sum + arr = 2+6*/
        // sum = sum + arr[index] 可以简写为
        sum += arr[index];
      }
      console.log(sum);
      //平均值=总和/元素的个数 (arr.length)
      console.log(sum / arr.length);
    </script>

小试牛刀案例2

需求：求数组 [2,6,1,77,52,25,7] 中的最大值和最小值

最大值代码如下

  <title>数组求最大值</title>
  </head>
  <body>
    <script>
      // 声明数组
      let arr = [2, 6, 1, 77, 52, 25, 7];
      // 假设一个最大值等于数组的第0个元素 
      let max = arr[0];
      // for循环
      for (let index = 0; index < arr.length; index++) {
        // 如果当前的数组元素大于 max
        if (arr[index] > max  ) {
          // 满足条件 max 等于输出当前的数组元素
          max = arr[index]
        }
      }
      console.log(max);
    </script>

最小值代码如下

<title>数组求最小值</title>
  </head>
  <body>
    <script>
      // 声明数组
      let arr = [2, 6, 1, 77, 52, 25, 7];
      // 假设一个最小值等于数组的第0个元素 
      let min = arr[0];
      // for循环
      for (let index = 0; index < arr.length; index++) {
        // 如果当前的数组元素小于 min
        if (arr[index] < min  ) {
          // 满足条件 max 等于输出当前的数组元素
          min = arr[index]
        }
      }
      console.log(min);
    </script>
  </body>

3.操作数组

3.1定义

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

3.2数组增加新的元素

数组.push(新增的内容) 方法，特点在末尾新增元素

 <script>
      // 声明数组
      let arr = ["苹果", "雪梨", "香蕉", "圣女果"];
      // 新增一个数组元素
      arr.push("榴莲", "芒果", "石榴");
      console.log(arr);
    </script>

小试牛刀案例1

需求：接收用户的4次输入同学的名字，组成一个数组

代码如下

<script>
      /* 需求：让用户输入4个同学名字组成数组 */
      // 声明数组
      let arr = [];
      // for循环
      for (let index = 0; index <= 4; index++) {
        //要重复循环的循环体
        let userNames = prompt("请输入你的姓名");
        // 新增的用户名放到数组里面
        arr.push(userNames);
      }
      console.log(arr);
    </script>

小试牛刀案例2

需求：将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组

代码如下

    <script>
      /* 需求：将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组
       */
      // 声明一个旧的数组
      let arr1 = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
      // 创建一个新的数组，存放过滤出大于等于10的元素
      let arr2 = [];
      // for循环 第一个数组
      for (let index = 0; index < arr1.length; index++) {
        // 判断，如果当前循环的元素大于或者等于10的条件
        if (arr1[index] >= 10) {
          //满足条件就，放到新的数组中
          arr2.push(arr1[index]);
        }
      }
      console.log(arr2);
    </script>

数组.unshift (新增的内容) 方法，特点在开头新增元素

 <script>
      // 声明数组
      let arr = ["香蕉", "圣女果", "榴莲", "芒果"];
      // 开头新增数组
      arr.unshift("苹果", "雪梨");
      console.log(arr);
    </script>

总结

<script>
      /*1. push 和unshift 都可以做到给数组添加新的元素
      2.这两个代码在执行的时候，还可以返回数组的长度 (了解即可)) */
      let arr = ["苹果", "雪梨", "香蕉", "榴莲", "芒果"];
      // 添加新的元素 == 返回添加新元素之后的数组长度，
      let arrLength = arr.unshift("石榴");   //arrLength = 数组的长度= 6
      console.log(arr.length);
    </script>

3.3 数组删除元素

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

<script>
      // 声明数组
      let arr = ["苹果", "雪梨", "香蕉", "圣女果", "榴莲", "芒果", "石榴"];
      // pop 删除最后一个元素
      arr.pop();
      console.log(arr); //结果是"苹果", "雪梨", "香蕉", "圣女果", "榴莲", "芒果",
    </script>

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

<script>
    // 声明一个数组
    let arr = [ "苹果", "雪梨", "香蕉", "圣女果", "榴莲", "芒果", "石榴"]
    // shift 删除开头的第一个元素
    arr.shift()
    console.log(arr);  //结果是"雪梨", "香蕉", "圣女果", "榴莲", "芒果", "石榴"
  </script>

数组. splice() 方法删除指定元素

<script>
    // 声明数组
    let arr = ["苹果", "雪梨", "香蕉", "圣女果", "榴莲", "芒果", "石榴"]
    // splice ('想要删除的元素的下标'，'想要删除几个')
    // 需求现在想要删除的香蕉
    /* 分析 ：删除数组中的下标为1的元素
    从1的位置开始想要删除几个 */
    arr.splice(1,2)
    console.log(arr);
    // 指定位置来插入元素
    //  splice ('想要删除的元素的下标'，'想要删除几个', '在该下标位置添加元素')
    // 在1的位置，删除0个元素，增加一个红薯
    let arr1 =  ["苹果", "雪梨", "香蕉", "圣女果", "榴莲", "芒果", "石榴"]
    arr1.splice(1,0,'西瓜')
    console.log(arr1);
  </script>

3.4 补充

1.获取数组的最后的一个元素 [arr.length -1 ]

<script>
  /*   // 1.获取数组的最后的一个元素  [arr.length -1 ] 常用规则
    let arr = ['苹果', '雪梨', '香蕉','圣女果','榴莲','芒果','石榴']
    // 获取石榴元素
    console.log(arr[arr.length -1]); */
  </script>

修改或者新增数组元素

a. 如果下标这个位置已经有元素，那就是修改

b. 如果下标这个位置没有元素，添加就可以了，最终数组长度最少变成(下标+1)

3.数组可以存放任意类型的数据，可以这么做，但是不建议，我们建议一个数组内的类型要统一

let arr1 = ['苹果', 100,null,true,NaN, undefined ,80]

4.数组快速清空或者删除元素的方式 ,数组的长度是动态变化的

		arr = [] or
		arr.length = 0
      // 保留3个元素，其他不要了
      arr.length = 3
      console.log(arr);