JavaScript 数组 【‘遍历数组’,‘增‘,‘删’,‘改‘,‘查‘】 详解 +增删查改数组案例

1、数组是什么？

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

2、数组的基本使用？

目标：能够声明数组并且能够获取里面的数据。
声明语法：
let 数组名 = [数据1，数据2，。。。。数据n]
例：
let names = [‘小明’,‘小刚’,‘小红’,‘小丽’,‘小米’]
1、数组是按顺序保存，所以每个数据都有自己的编号
2、计算机中的编号从0 开始，所以小明的编号为0，小刚为1，依次类推
3、在数组中，数据的编号也叫索引或下标
4、数组可以存储任意类型的数据
1
开发中，数组的术语：
元素：数组中保存的每个数据都叫数组元素
下标：数组中数据的编号
长度：数组中数据的个数，通过数组的length属性获得
1
遍历数组：
**** 用循环把数组中每个元素都访问到，一般会用for循环遍历

3、操作数组？

3、
数组本质是数据集合，操作数据无非就是增删改查语法：
增: 数组添加新的数据 arr.push(新增的内容在结尾) arr.unshift(新增的内容在开头)
删：删除数组中数据 arr.pop();arr.shift();arr.splice(操作的下标；删除的个数)
改: 重新赋值 数组[下标] = 新值
查：查询数组数据 数组[下标]
1、目标：掌握利用push向数组添加元素(数据)
2、数组增加新的数据。
数组.push()方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度(重点)
arr.push(元素1，元素2.。。。。元素n)
1

   例如：
            let arr = ['red','green']
            arr.push('pink')
            console.log(arr)
        arr.unshift()方法将一个或多个元素添加到数组的开头,并返回该数组的新长度.
        语法:
            arr.unshhift(元素1,元素2,...元素n)
        例如:
            let arr = ['red','blue','green']
            arr.unshift('pink','orange')
            console.log(arr)
1
2
3
4
5
6
7
8
9
10
11

4、数组删除元素

4
1-数组.pop()方法从数组中删除最后一个元素,并返回该元素的值.
1
语法:arr.pop()
例如:
let arr = [‘red’,‘green’,‘pink’]
arr.pop()
console.log(arr) //返回[‘red’,‘green’]
2-数组.shift() 是删除第一个元素,并返回该元素的值
2
let arr = [‘段’,‘王’,‘李’,‘周’,‘张’]
arr.shift()
console.log(arr)
3- 数组删除元素 — 数组.splice()方法 删除指定元素
语法:
arr.splice(start,deleteCount)
arr.splice(起始位置,删除几个元素)

解释:
start起始位置:
指定修改的开始位置(从0计数)
deleteCount:
表示要移除的数组元素的个数
可选的.如果省略则默认从指定的起始位置删除到最后
删除元素的使用场景:
1-随机抽奖,中奖的用户就需要从数组里面删除,不允许重复抽奖
2-点击删除按钮,相关的数据回从商品数据中删除

电商平台场景--使用到比较多
1

## 总结:

1-想要数组末尾增加数据元素利用哪个方法?
arr.push()
可以添加一个或者多个数组元素
返回的是数组长度
2-想要数组开头增加数据元素利用哪个方法?
arr.unshift()
可以添加一个或者多个数组元素
返回的是数组长度
3-重点记住 arr.push()

数组删除元素小结:
4、想要数组末尾删除1个数据元素利用哪个方法?带参数不?
arr.pop()
不带参数
返回值是删除的元素

5、想要数组 开头删除1个数据元素利用哪个方法?带参数吗?
arr.shift() 不带参数;返回值是删除的元素

6、想要指定删除数组元素用哪个?开发常用吗?有哪些使用场景?
arr.splice(起始位置,删除的个数)
开发很常用,比如随机抽奖,删除指定商品等等.

数组案例

数组案例一 数组求和

// 需求：求数组[2,6,1,7,4]里面所有元素的和以及平均值
// 解析：
// 1、声明一个求和变量 sum
// 2、遍历这个数组，把里面每个数组元素加到sum里面
// 3、用求和变量sum除以数组的长度就可以得到数组的平均值

   let arr = [2,6,1,7,4]
        // 求和变量
        let sum = 0 
        // 求平均数变量
        let average = 0
        //遍历数组
        for( let i = 0; i < arr.length ; i++){
            sum += arr[i]

        }
        average = sum /arr.length
        document.write(`这个同学的总分是:${sum}   平均分是:${average}`)
        
1
2
3
4
5
6
7
8
9
10
11
12
13

遍历数组解析

        // 循环遍历数组  解析
        let arr = [2, 6, 1, 7, 4]
        // 给求和来一个容器sum变量
        let sum = 0
        // 给平均数来一个容器
        let meanValue = 0
        for(let i = 0 ; i < arr.length; i++) {
            // 最迷惑的地方是 i 和 arr[i]
            // console.log(i) // i是打印0-4  是循环的下标或者索引
            // console.log(arr.length) //arr数组长度是5
            console.log(arr[i]) //遍历输出数组顺序的内容
            sum = sum +arr[i]  //每次循环数组的值来根据下标的次数来相加
        }
        console.log(sum)//打印 数组的和
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

数组案例二 求数组中的最大值

// 分析：
// 1、声明一个保存最大元素的变量 max
// 2、默认最大值可以取数组中的第一个元素
// 3、遍历这个数组，把里面每个数组元素和max相比较
// 4、如果这个数组元素大于max就把这个数组元素存到max里面，否则继续下一轮比较
// 5、最后输出这个max

 let arr = [22,33,44,88,55,66,11,77,44]
        // 首先max 给它一个第一个值，来和数组中后边的值一个个相比较
        let max = arr[0]
        // let min = 0
        // 遍历数组
        for(let i = 0 ; i<arr.length;i++){
             console.log(arr[i]) //打印 数组中的每一个值
             if(max < arr[i]){ //判断   从数组中的第一个值和后边的值做比较
                    max = arr[i]  //把最大的值给max
             }
        }
        document.write(`${max}
`)
1
2
3
4
5
6
7
8
9
10
11
12

案例 三 增删改查 中的 查

// 查的话就是  for循环根据数组的下标可以查到
        let arr = ['pink','hotpink','deeppink']
        for (let i = 0 ; i < arr.length ; i++) {
            document.write(`${arr[i]}
`)
        }
1
2
3
4
5

案例 四 增删改查 中的 改

 // 改的话，就是根据他的下标，重新赋新值就可以了
        let arr = ['pink','hotpink','deeppink']
        // 访问  /查询
        console.log(arr[0])
        // 改 数组中的0下标的内容
        arr[0] = 'duan'
        document.write(`${arr}`)

1
2
3
4
5
6
7
8

案例 五 增删改查 中的 增 有两种增方法

arr.push（）

// 增   从数组最后面的开始新增
        let arr = ['red', 'green']
        // 把 blue 放到arr的后面
        // 返回值是新的数组长度
        //不但把数组放入数组,而且还告诉我们,看看有3个值啦
        // arr.push('pink')
        // push()可以加多个值
        arr.push('pink','blue','orange')
        document.write(`${arr}`)
1
2
3
4
5
6
7
8
9

arr.unshift（）

  //从数组前开始增加内容
        let arr = ['red', 'blue', 'green']
        arr.unshift('pink', 'orange')
        console.log(arr)
1
2
3
4

案例 六 增删改查 中的 删 有三种删除方法

数组.pop()是删除最后一个

    // 数组.pop()是删除最后一个
        let arr = ['pink','green','orange']
        // arr.pop()
        // 检验删除哪一个   pop()是删除最后一个
        console.log(arr.pop())
        console.log(arr)
1
2
3
4
5
6

arr.shift() 是删除第一个下标内容

```go
 //arr.shift() 是删除第一个下标内容
        let arr = ['段','王','李','周','张']
        arr.shift()
        console.log(arr)
``
1
2
3
4
5
6

重点删除arr.splice(从哪里开始删,删几个)

        // 重点删除arr.splice(从哪里开始删,删几个)
        let arr = ['red','green','pink']
        // 我不喜欢绿色就把green删掉
        arr.splice(1,1) //第一个1  是从索引号是1的位置开始删  ;第二个1 是删除几个
        console.log(arr)
1
2
3
4
5
6

案例 七 数组去0案例

// 数组去0的案例
// 需求:将数组[2,0,6,1,77,0,52,0,25,7]中的0去掉.形成一个不包含0的新数组
// 1-声明一个新的数组用于存放新数据newArr
// 2-遍历原理的旧数组,找出不等于0的元素
// 3-一次追加给新数组newArr

 let arr = [2,0,6,1,77,0,52,0,25,7]
        // 声明一个新的数组用于存放新数据newArr
        let newArr = []
        // 循环遍历旧数组
        for(let i = 0; i <arr.length; i++){
            // 测试 遍历数组的内容
            // console.log(arr[i])
            // 筛选有0的内容进行删除
            if(arr[i] === 0){
                continue

            }
            //测试 筛选完的数据有没有0
            console.log(arr[i])
            // 把筛选完的数据重新赋值给新的空数组进行赋值
            newArr.push(arr[i])

        }
        console.log(newArr)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

案例 八 数组大于等于10的元素，放入到一个新数组当中案例

// 分析 :
// 1-声明一个新的数组用于存放新数据newArr
// 2-遍历原来的旧数组,找出大于等于10的元素
// 3-一次追加给新数组newArr

 let arr = [2,0,6,1,77,0,52,10,25,7]
        // 需要一个新的空数组  
        let nullArr = []
        // 遍历旧数组
        for (let i = 0 ; i <arr.length;i++ ){
            // 从旧数组里边筛选大于等于10的数
            if(arr[i] >= 10){
                // 检验一下 看筛选出来的是不是大于10
                console.log(arr[i])
                // 把筛选大于等于10的内容 追加给新数组
                nullArr.push(arr[i])

            }

        }
        console.log(nullArr)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16