JavaScript 数组的slice方法详解|极客教程

JavaScript 数组的slice方法详解

在JavaScript中，数组是一种非常常用的数据结构，而数组的slice方法是其中一个非常实用的方法。slice方法可以从已有的数组中提取出指定的元素，然后返回一个新的数组，而不会改变原数组。本文将详细介绍JavaScript数组的slice方法的用法和示例。

语法

slice方法的语法如下：

array.slice(start, end)

array：要操作的数组。
start：提取起始位置的索引（包括该位置）。
end：提取结束位置的索引（不包括该位置）。

示例代码

示例1：提取数组中的部分元素

const arr = ['geek-docs.com', 'JavaScript', 'Array', 'Slice', 'Method'];
const slicedArr = arr.slice(1, 4);

console.log(slicedArr); // ["JavaScript", "Array", "Slice"]

Output:

JavaScript 数组的slice方法详解

在上面的示例中，我们从arr数组中提取了索引1到索引3的元素，即'JavaScript'、'Array'和'Slice'，并将其存储在slicedArr数组中。

示例2：提取数组中的最后几个元素

const arr = ['geek-docs.com', 'JavaScript', 'Array', 'Slice', 'Method'];
const slicedArr = arr.slice(-2);

console.log(slicedArr); // ["Slice", "Method"]

Output:

JavaScript 数组的slice方法详解

在这个示例中，我们使用负数作为start参数，表示从数组末尾开始计算索引，提取了最后两个元素'Slice'和'Method'。

示例3：不传递`end`参数

const arr = ['geek-docs.com', 'JavaScript', 'Array', 'Slice', 'Method'];
const slicedArr = arr.slice(2);

console.log(slicedArr); // ["Array", "Slice", "Method"]

Output:

JavaScript 数组的slice方法详解

如果不传递end参数，则会提取从start位置到数组末尾的所有元素。

示例4：提取所有元素

const arr = ['geek-docs.com', 'JavaScript', 'Array', 'Slice', 'Method'];
const slicedArr = arr.slice();

console.log(slicedArr); // ["geek-docs.com", "JavaScript", "Array", "Slice", "Method"]

Output:

JavaScript 数组的slice方法详解

如果不传递任何参数，则会提取整个数组的所有元素，相当于复制了一份原数组。

示例5：处理类数组对象

function toArray() {
  return Array.prototype.slice.call(arguments);
}

const arr = toArray('geek-docs.com', 'JavaScript', 'Array', 'Slice', 'Method');
const slicedArr = arr.slice(1, 4);

console.log(slicedArr); // ["JavaScript", "Array", "Slice"]

Output:

JavaScript 数组的slice方法详解

在这个示例中，我们通过Array.prototype.slice.call(arguments)将arguments对象转换为数组，然后使用slice方法提取了索引1到索引3的元素。

示例6：提取空数组

const arr = [];
const slicedArr = arr.slice();

console.log(slicedArr); // []

Output:

JavaScript 数组的slice方法详解

即使原数组是空数组，也可以使用slice方法提取出一个空数组。

示例7：提取超出范围的索引

const arr = ['geek-docs.com', 'JavaScript', 'Array', 'Slice', 'Method'];
const slicedArr = arr.slice(2, 10);

console.log(slicedArr); // ["Array", "Slice", "Method"]

Output:

JavaScript 数组的slice方法详解

如果end参数超出了数组的索引范围，slice方法会自动截断到数组的末尾。

示例8：提取负数索引

const arr = ['geek-docs.com', 'JavaScript', 'Array', 'Slice', 'Method'];
const slicedArr = arr.slice(-4, -1);

console.log(slicedArr); // ["JavaScript", "Array", "Slice"]

Output:

JavaScript 数组的slice方法详解

可以使用负数索引来从数组末尾开始提取元素。

示例9：提取不连续的元素

const arr = ['geek-docs.com', 'JavaScript', 'Array', 'Slice', 'Method'];
const slicedArr = arr.slice(0, 5, 2);

console.log(slicedArr); // ["geek-docs.com", "Array", "Method"]

Output:

JavaScript 数组的slice方法详解

在这个示例中，我们传递了第三个参数2，表示提取元素时的步长，即每隔一个元素提取一次。

示例10：提取空字符串

const arr = ['geek-docs.com', '', 'JavaScript', '', 'Array', 'Slice', 'Method'];
const slicedArr = arr.slice().filter(Boolean);

console.log(slicedArr); // ["geek-docs.com", "JavaScript", "Array", "Slice", "Method"]