数组（增加和删除）

你想要那颗糖

已于 2023-03-17 16:10:01 修改

阅读量626

点赞数 1

分类专栏： JavaScript 文章标签： numpy

于 2023-03-17 11:03:56 首次发布

本文链接：https://blog.csdn.net/qq_50260510/article/details/129590015

版权

JavaScript 专栏收录该内容

61 篇文章 2 订阅

订阅专栏

1.数组：(Array) 是一种数据类型，属于引用数据类型

2.作用: 在单个变量名下存储多个数据

let names = ['小明', '小刚', '小红', '小丽', '小米']

3.注意事项：

（1）数组是按顺序保存（有序），所以每个数据都有自己的编号

（2）编号从 0 开始，数据的编号经常称为 索引或下标

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

<!DOCTYPE html>
<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>Document</title>
</head>
<body>
    <script>
        let name = ['迪丽热巴' , '古力娜扎' , '玛卡巴卡']
        console.log(name[0])
        console.log(name[1])
        console.log(name[2])
    </script>
</body>
</html>

效果展示：

二、遍历数组

遍历数组：把数组中每个数据都访问到

数组元素：数组中数据，也称为数组元素

数组长度：数组中数据的个数，通过数组.length 属性获得

我们可以使用for循环来遍历数组，其实遍历数组也是for循环重要的使用场景

<!DOCTYPE html>
<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>Document</title>
</head>
<body>
    <script>
        let arr = ['迪丽热巴' , '古力娜扎' , '玛卡巴卡']
        for( let i = 0 ; i < arr.length ; i++){
            console.log(arr[i])
        }
        console.log(arr.length)
    </script>
    
</body>
</html>

效果展示：

案例二：数组求和及平均值

<!DOCTYPE html>
<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>
</head>
<body>
    <script>
        let arr = [2 , 6 , 1 , 7 , 4]
        let sum = 0
        let average = 0
        for(let i = 0 ; i < arr.length ;i++) {
            sum = sum + arr[i]
        }
        console.log(`数组的累加和是：${sum}`)

        average = sum / arr.length
        console.log(`数组的平均值是：${average}`)

    </script>
    
</body>
</html>

效果展示

三、数组的查找和修改

1.查询语法： 数组[索引]

返回值：如果查询不到则返回 undefined

2.修改语法：数组[索引] = 新值

返回值：如果下标不存在，则是新增一个数组元素，并修改了数组长度（尽量避免）

3.增加数组元素（结尾）：将一个或多个元素添加到数组的末尾 （重点）

返回值： 该数组的新长度，会修改原数组

4.增加数组元素（开头）：将一个或多个元素添加到数组的开头

返回值： 该数组的新长度，会修改原数组

<!DOCTYPE html>
<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>
</head>

<body>
    <script>
        let arr = ['迪丽热巴', '古力娜扎']
        // 在元素最后添加元素
        arr.push('哈妮克孜')
        // 在元素最前面添加元素
        arr.unshift('朱亚文')
        console.log(arr)
    </script>

</body>

</html>

效果展示：

5.删除数组元素（结尾）：从数组中删除最后一个元素，修改原数组

返回值： 该元素的值

6. 删除数组元素（开头）：从数组中删除第一个元素，修改原数组

返回值： 该元素的值

<!DOCTYPE html>
<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>
</head>
<body>
    <script>
        let arr = ['包贝尔','邓超','杨颖','陈赫']
        arr.pop()  // 删除最后一个元素
        arr.shift()  // 删除第一个元素
        console.log(arr)  // 在控制台输出
    </script>
    
</body>
</html>

效果展示：

遍历数组综合案例：

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

<!DOCTYPE html>
<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>筛选大于等于10的元素</title>
    <!-- 将数组 [2, 12, 0, 6, 1, 77, 0, 52, 0, 25, 7 , 10] 中大于等于 10 的元素选出来，放入新数组中 -->
</head>
<body>
    <script>
        let arr = [2, 12 , 0, 6, 1, 77, 0, 52, 0, 25, 7 , 10]
        let newArr = []
        for(let i = 0 ; i < arr.length ; i++) {
            if(arr[i] >= 10){
                newArr.push(arr[i])
            }
        }
        console.log(newArr)
    </script>
    
</body>
</html>

效果展示

7. 操作数组（splice）

1.数组： splice() 方法可以添加也可以删除数组元素

2.说明： 可以从指定位置删除或者增加的数组元素，注意它修改原数组

3.语法：splice(start, deleteCount)

（1） start 起始位置 :

（2）指定修改的开始位置（从0计数）

（3）deleteCount 删除个数 :

（4）表示要移除的数组元素的个数

（5）可选的。如果省略则默认从指定的起始位置删除到最后

4.指定位置增加数据： splice(start, deleteCount, item1...)

案例分享：

<!DOCTYPE html>
<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>splice</title>

</head>

<body>
  <script>
    let arr = ['迪丽热巴' , '古力娜扎' , '杨幂' , '杨颖']
    // 1. splice(起始位置，删除个数)
    arr.splice(1,1)
    console.log(arr)

    // 2.删除并添加，把杨幂删了，换成小糯米
    let newArr = ['迪丽热巴' , '古力娜扎' , '杨幂' , '杨颖']
    newArr.splice(1,2,'小糯米')
    console.log(newArr)

  </script>
</body>

</html>

效果展示：