JavaScript-数组增删改查

非关键性的地方都不在贴图了直接上代码

let arr = ["a", "b", "c"];

需求

获取数组中索引为 1 的那个数据 (查)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let arr = ["a", "b", "c"];

        console.log(arr[1]);
    </script>
</head>
<body>
</body>
</html>

将索引为 1 的数据修改为 m (改)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let arr = ["a", "b", "c"];
        
        arr[1] = "m";

        console.log(arr);
    </script>
</head>
<body>
</body>
</html>

将索引为 1 的数据修改为 d, 索引为 2 的修改为 e (改)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let arr = ["a", "b", "c"];

        arr[1] = "d";
        arr[2] = "e";
        console.log(arr);
    </script>
</head>
<body>
</body>
</html>

将索引为 1 的数据修改为 d, 索引为 2 的修改为 e (改) 除了如上的方式以外其实还有其它的实现方式如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let arr = ["a", "b", "c"];

        // 参数1: 从什么位置开始
        // 参数2: 需要替换多少个元素
        // 参数3开始: 新的内容
        arr.splice(1, 2, "d", "e");
        console.log(arr);
    </script>
</head>
<body>
</body>
</html>

要求在数组最后添加一条数据 (增)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let arr = ["a", "b", "c"];

        arr[3] = "d";
        console.log(arr);
    </script>
</head>
<body>
</body>
</html>

push 方法可以在数组的最后新增一条数据, 并且会将新增内容之后数组当前的长度返回给我们。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let arr = ["a", "b", "c"];

        let res = arr.push("d");
        console.log(res);
        console.log(arr);
    </script>
</head>
<body>
</body>
</html>

要求在数组最后添加两条数据 (增)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let arr = ["a", "b", "c"];

        arr.push("d");
        arr.push("e");
        console.log(arr);
    </script>
</head>
<body>
</body>
</html>

数组的 push 方法可以接收 1 个或 多 个参数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let arr = ["a", "b", "c"];

        arr.push("d", "e");
        console.log(arr);
    </script>
</head>
<body>
</body>
</html>

要求在数组最前面添加一条数据 (增)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let arr = ["a", "b", "c"];

        arr[-1] = "m";
        console.log(arr);
    </script>
</head>
<body>
</body>
</html>

unshift 方法和 push 方法一样, 会将新增内容之后当前数组的长度返回给我们。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let arr = ["a", "b", "c"];

        let res = arr.unshift("m");
        console.log(res);
        console.log(arr);
    </script>
</head>
<body>
</body>
</html>

要求在数组最前面添加两条数据 (增)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let arr = ["a", "b", "c"];

        arr.unshift("m");
        arr.unshift("w");
        console.log(arr);
    </script>
</head>
<body>
</body>
</html>

unshift 方法和 push 方法一样, 可以接收 1 个或 多 个参数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let arr = ["a", "b", "c"];

        arr.unshift("m", "w");
        console.log(arr);
    </script>
</head>
<body>
</body>
</html>

要求删除数组最后一条数据 (删) 数组的 pop 方法可以删除数组中的最后一条数据, 并且将删除的数据返回给我们。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let arr = ["a", "b", "c"];

        let res = arr.pop();
        console.log(res);
        console.log(arr);
    </script>
</head>
<body>
</body>
</html>

要求删除数组最前面一条数据 (删) 数组的 shift 方法可以删除数组中的最前面一条数据, 并且将删除的数据返回给我们。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let arr = ["a", "b", "c"];

        let res = arr.shift();
        console.log(res);
        console.log(arr);
    </script>
</head>
<body>
</body>
</html>

要求删除数组中索引为 1 的数据 (删) 以下代码的含义: 从索引为 1 的元素开始删除 1 条数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let arr = ["a", "b", "c"];

        // 参数1: 从什么位置开始
        // 参数2: 需要删除多少个元素
        arr.splice(1, 1);
        console.log(arr);
    </script>
</head>
<body>
</body>
</html>

要求删除数组中除了第 0 条以外的所有数据 (删)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let arr = ["a", "b", "c"];

        arr.splice(1, 2);
        console.log(arr);
    </script>
</head>
<body>
</body>
</html>