JavaScript 截取数组

在 JavaScript 中，如果想要截取数组的一部分，常用的有以下 3 种方法。

slice()。
splice()。
toSpliced()。

使用 slice() 截取数组

在 JavaScript 中，我们可以使用 slice() 方法来截取数组的一部分。slice() 方法不会修改原数组，而是返回一个新数组。

语法：

arr.slice(start, end)

说明：

slice() 方法接收以下 2 个参数。

start（可选）：截取的开始下标（包含）。如果省略，则表示从下标 0 开始。
end（可选）：截取的结束下标（不含）。如果省略，则表示截取到末尾。

slice(start, end) 截取范围为：[start, end)，也就是：包含 start 但不包含 end。其中，end 可以省略。当 end 省略时，获取的范围为：start 到结尾。

示例 1：slice() 截取部分数组

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const arr = ["red", "green", "blue", "orange", "yellow"];
        const result = arr.slice(1, 4);
        console.log(result);
    </script>
</body>
</html>

运行结果如下。

["green", "blue", "orange"]

分析：

arr.slice(1, 4) 表示截取的范围是：[1, 4)，也就是包含 “下标 1 的元素” 但不包含 “下标 4 的元素” 。

示例 2：slice() 截取到末尾

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const arr = ["red", "green", "blue", "orange", "yellow"];
        const result = arr.slice(2);
        console.log(result);
    </script>
</body>
</html>

运行结果如下。

["blue", "orange", "yellow"]

分析：

arr.slice(2) 表示截取的范围是：下标 2 到末尾。

示例 3：slice() 使用负下标

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const arr = ["red", "green", "blue", "orange", "yellow"];
        console.log(arr.slice(-2));
        console.log(arr.slice(-3, -1));
    </script>
</body>
</html>

运行结果如下。

["orange", "yellow"]
["blue", "orange"]

分析：

arr.slice(-2) 截取的范围为：-2 到末尾，因此返回的结果是：["orange","yellow"]。

arr.slice(-3, -1) 截取的范围为：[-3, -1)，也就是包含 -3 但不包含 -1，因此返回的结果是：["blue","orange"]。

提示: 关于 slice() 的更详细用法，另请参阅：JavaScript 数组 slice() 方法。

使用 splice() 截取数组

splice() 是 JavaScript 数组的一个方法，它用于修改数组（包括添加、删除或替换元素）。

语法：

arr.splice(start, n, item1, item2, ..., itemN)

说明：

splice() 方法接收以下 3 种参数。

start（必选）：表示开始的位置。start 的值可以是负数，表示从结尾倒数的索引。
n（可选）：表示删除 n 个元素。如果 n 省略，则表示删除下标为 start 的元素以及它后面的所有元素。
item1、item2、...、itemN（可选）：表示往数组添加的新元素。

注意:

splice() 是一个 “破坏性” 方法，它会改变原数组。
splice() 方法是有返回值的，它会返回被删除的数组部分。

示例 4：splice() 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const arr = ["red", "green", "blue", "orange", "yellow"];
        const deleted = arr.splice(2);
        console.log(arr);
        console.log(deleted);
    </script>
</body>
</html>

运行结果如下。

[ "red", "green" ]
[ "blue", "orange", "yellow" ]

分析：

splice(2) 表示删除下标为 2（第 3 个元素）以及后面所有的元素。此外可以看到，splice() 会修改原数组，并且返回被删除的数组部分。

提示: 关于 splice() 的更详细用法，另请参阅：JavaScript 数组 splice() 方法。

使用 toSpliced() 截取数组

toSpliced() 方法和 splice() 方法的语法是完全一样的。只不过 splice() 是一个 “破坏性” 方法，它会修改原数组。而 toSpliced() 是一个 “非破坏性” 方法，它不会修改原数组。

提示: 关于 toSpliced() 的更详细用法，另请参阅：JavaScript 数组 toSpliced() 方法。