Объект
Array.prototype
предоставляет метод slice()
в JavaScript, который позволяет извлекать элементы подмножества массива и добавлять их в новый массив.
В этом уроке мы покажем вам практическое использование метода slice()
массива JavaScript и 3 способа его применения на примерах.
Метод принимает два необязательных параметра следующим образом:
slice(start, stop);
Оба параметра start
и stop
являются необязательными.
Параметр start
определяет отсчитываемый от нуля индекс, с которого следует начать извлечение. Если start
не undefined
, slice()
начинается с 0
.
Параметр stop
, как следует из его названия, представляет собой отсчитываемый от нуля индекс, на котором следует закончить извлечение. Метод slice()
извлекает до stop-1
. Это означает, что метод не включает элемент в stop
позиции в новый массив. Если вы опустите параметр stop
, метод slice()
будет использовать длину массива для параметра stop
.
Функция возвращает новый массив, содержащий элементы исходного массива. Важно помнить, что метод slice()
выполняет поверхностное копирование элементов только в новый массив. Кроме того, он не изменяет исходный массив.
Клонирование массива
Метод используется для клонирования массива, как показано в следующем примере:
var numbers = [1,2,3,4,5]; var newNumbers = numbers.slice();
В этом примере массив newNumbers
содержит все элементы массива numbers
.
Копирование части массива
Обычно метод slice()
используется для копирования части массива без изменения исходного массива. Вот пример:
var colors = ['red','green','blue','yellow','purple']; var rgb = colors.slice(0,3); console.log(rgb); // ["red", "green", "blue"]
Массив rgb
содержит первые три элемента массива colors
. colors
исходного массива остаются неизменными.
Преобразование массивоподобных объектов в массивы
Метод slice()
используется для преобразования объекта, похожего на массив, в массив. Например:
function toArray() { return Array.prototype.slice.call(arguments); } var classification = toArray('A','B','C'); console.log(classification); // ["A", "B", "C"]
В этом примере arguments
функции toArray()
представляют собой массивоподобный объект. Внутри функции toArray()
мы вызвали метод slice()
для преобразования объекта arguments в массив.
Каждый аргумент, который мы передаем функции toArray()
, будет элементом нового массива.
Другой типичный пример, который вы часто видите, — это преобразование NodeList
в массив следующим образом:
var p = document.querySelectorAll('p'); var list = Array.prototype.slice.call(p);
В этом примере сначала мы использовали document.querySelectorAll()
для получения всех p
узлов HTML-документа. Результатом этого метода является объект NodeList
, который представляет собой массивоподобный объект. Затем мы вызвали метод slice()
для преобразования объекта NodeList
в массив.
Синтаксис:
var list = [].slice.call(document.querySelectorAll('p'));
В этом примере мы создали пустой массив []
и косвенно получили доступ к методу slice()
метода Array.prototype
через пустой массив. Эффект такой же, как при прямом использовании Array.prototype
.