Объект 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.