JS 数组截取方法|极客教程

JS 数组截取方法

在开发中，我们经常会遇到需要对数组进行截取的情况。数组截取是指从原数组中选取一部分元素生成一个新的数组。在 JavaScript 中，我们可以通过一些方法来实现数组的截取操作，下面我们就来详细介绍几种常用的数组截取方法。

1. slice() 方法

JavaScript 中的数组对象提供了一个 slice() 方法，可以从数组中截取出一个新的数组。slice() 方法接受两个参数，分别是起始位置和结束位置（不包括结束位置的元素）。如果不指定结束位置，则会一直截取到数组末尾。

下面是 slice() 方法的基本语法：

var arr = [1, 2, 3, 4, 5];
var newArr = arr.slice(start, end);

接下来我们通过一个示例来演示 slice() 方法的使用：

var fruits = ['apple', 'orange', 'banana', 'grape', 'cherry'];
var newFruits = fruits.slice(1, 3);

console.log(newFruits); // ['orange', 'banana']

在上面的示例中，我们先创建了一个包含五种水果的数组 fruits，然后使用 slice(1, 3) 方法从第二个元素（索引为1）开始，截取到第四个元素（索引为2）并生成一个新数组 newFruits，最后输出为 ['orange', 'banana']。

2. splice() 方法

除了 slice() 方法外，JavaScript 中的数组对象还提供了 splice() 方法来实现数组的截取。splice() 方法除了可以截取数组外，还可以向数组中插入、删除元素。splice() 方法的第一个参数是起始位置，第二个参数是删除的元素个数，第三个参数以后则是要插入的元素。

下面是 splice() 方法的基本语法：

var arr = [1, 2, 3, 4, 5];
var newArr = arr.splice(start, deleteCount, element1, element2, ...);

接下来我们通过一个示例来演示 splice() 方法的使用：

var colors = ['red', 'green', 'blue', 'yellow', 'purple'];
var removed = colors.splice(2, 1, 'orange', 'pink');

console.log(colors); // ['red', 'green', 'orange', 'pink', 'yellow', 'purple']
console.log(removed); // ['blue']

在上面的示例中，我们先创建了一个包含五种颜色的数组 colors，然后使用 splice(2, 1, 'orange', 'pink') 方法从第三个元素（索引为2）开始，删除一个元素并插入两个新元素，最后输出为 ['red', 'green', 'orange', 'pink', 'yellow', 'purple']。同时，被删除的元素 'blue' 存储在 removed 变量中。

3. concat() 方法

除了上述两种方法外，JavaScript 中的数组对象还提供了 concat() 方法来实现数组的拼接。concat() 方法可以接受多个参数，每个参数可以是数组或值，它会将这些参数合并成一个新的数组并返回。

下面是 concat() 方法的基本语法：

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var newArr = arr1.concat(arr2);

接下来我们通过一个示例来演示 concat() 方法的使用：

var fruits1 = ['apple', 'orange'];
var fruits2 = ['banana', 'grape'];
var allFruits = fruits1.concat(fruits2);

console.log(allFruits); // ['apple', 'orange', 'banana', 'grape']

在上面的示例中，我们分别创建了两个包含水果的数组 fruits1 和 fruits2，然后使用 concat(fruits2) 方法将两个数组合并为一个新数组 allFruits，最后输出为 ['apple', 'orange', 'banana', 'grape']。