JavaScript数组slice方法详解|极客笔记

JavaScript数组slice方法详解

在 JavaScript 中，我们经常会用到数组来存储和操作一系列数据。而数组的 slice 方法是其中一个非常常用的方法之一，它可以帮助我们从数组中提取出一部分数据，而不会改变原数组。本文将详细介绍 slice 方法的使用方法、语法和一些实际案例。

语法

slice 方法的语法如下：

array.slice(start, end)

start 是要提取的起始位置，包括 start 这个索引，如果不设置，默认从 0 开始。
end 是要提取的结束位置，不包括 end 这个索引，如果不设置，默认提取到数组的末尾。

使用方法

提取指定范围的元素

const fruits = ['apple', 'banana', 'cherry', 'orange', 'pear'];
const citrus = fruits.slice(2, 4);

console.log(citrus); // ['cherry', 'orange']

在这个示例中，slice 方法从 fruits 数组中提取了第 2 个到第 4 个元素（不包括第 4 个），然后返回新的数组 citrus。

不设置 end 参数

const fruits = ['apple', 'banana', 'cherry', 'orange', 'pear'];
const citrus = fruits.slice(2);

console.log(citrus); // ['cherry', 'orange', 'pear']

如果只设置了 start 参数而没有设置 end 参数，那么 slice 方法将会提取从 start 到数组末尾的所有元素。

负数索引

const fruits = ['apple', 'banana', 'cherry', 'orange', 'pear'];
const citrus = fruits.slice(-3, -1);

console.log(citrus); // ['cherry', 'orange']

在这个示例中，我们可以使用负数索引来表示从数组末尾开始的位置。-1 表示数组的最后一个元素。

不改变原数组

slice 方法将返回一个新的数组，而不会改变原数组，这一点非常重要。示例：

const nums = [1, 2, 3, 4, 5];
const numsSlice = nums.slice(1, 3);

console.log(nums); // [1, 2, 3, 4, 5]

实际应用案例

提取数组中的偶数元素

const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenNums = nums.slice(1, nums.length).filter((num) => num % 2 === 0);

console.log(evenNums); // [2, 4, 6, 8, 10]

在这个案例中，我们先使用 slice 方法从数组中排除第一个元素，然后再使用 filter 方法筛选出偶数元素。

分割数组

const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const firstHalf = nums.slice(0, Math.floor(nums.length / 2));
const secondHalf = nums.slice(Math.floor(nums.length / 2));

console.log(firstHalf); // [1, 2, 3, 4, 5]
console.log(secondHalf); // [6, 7, 8, 9, 10]

在这个案例中，我们将数组分为两半，分别存储在 firstHalf 和 secondHalf 中。