slice() для массивов в JavaScript

slice() возвращает часть массива как новый массив.

let fruits = ['apple', 'orange', 'banana', 'grape'];

let part = fruits.slice(1, 3);

console.log(part);

Результат:

['orange', 'banana']

Метод взял элементы с индекса 1 до индекса 3. Сам индекс 3 в результат не попал.

Что делает slice()

slice() берет элементы из массива и возвращает их в новом массиве.

Исходный массив при этом не меняется.

let numbers = [10, 20, 30, 40];

let result = numbers.slice(1, 3);

console.log(result); // [20, 30]
console.log(numbers); // [10, 20, 30, 40]

Синтаксис

Основная запись выглядит так:

array.slice(start, end)

start - индекс, с которого нужно начать.

end - индекс, перед которым нужно остановиться.

let users = ['Анна', 'Олег', 'Мария', 'Иван'];

console.log(users.slice(0, 2));

Результат:

['Анна', 'Олег']

Начальный и конечный индекс

Первый аргумент показывает, откуда начинать, второй - где остановиться.

let letters = ['a', 'b', 'c', 'd', 'e'];

console.log(letters.slice(1, 4));

Результат:

['b', 'c', 'd']

Элемент ‘b’ находится на индексе 1, поэтому он попал в результат. Элемент с индексом 4 уже не попал.

Конечный индекс не включается

Второй аргумент slice() не включается в результат.

let numbers = [0, 1, 2, 3, 4];

console.log(numbers.slice(0, 3));

Результат:

[0, 1, 2]

Метод взял элементы с индексами 0, 1 и 2. Элемент с индексом 3 не взял.

Один аргумент

Если передать только один аргумент, slice() вернет элементы от этого индекса до конца массива.

let fruits = ['apple', 'orange', 'banana', 'grape'];

console.log(fruits.slice(2));

Результат:

['banana', 'grape']

Без аргументов

Если вызвать slice() без аргументов, метод вернет копию всего массива.

let fruits = ['apple', 'orange'];

let copy = fruits.slice();

console.log(copy);
console.log(copy === fruits);

Результат:

['apple', 'orange']
false

false означает, что это два разных массива, даже если элементы внутри одинаковые.

Отрицательные индексы

slice() поддерживает отрицательные индексы. Они считаются с конца массива.

let numbers = [10, 20, 30, 40, 50];

console.log(numbers.slice(-2));

Результат:

[40, 50]

-1 указывает на последний элемент, -2 - на предпоследний и так дальше.

Можно указать два отрицательных индекса.

let numbers = [10, 20, 30, 40, 50];

console.log(numbers.slice(-4, -1));

Результат:

[20, 30, 40]

Исходный массив не меняется

slice() не удаляет элементы из исходного массива. Он только возвращает новый массив с выбранными элементами.

let tasks = ['one', 'two', 'three'];

let firstTwoTasks = tasks.slice(0, 2);

console.log(tasks);
console.log(firstTwoTasks);

Результат:

['one', 'two', 'three']
['one', 'two']

Если внутри массива лежат объекты, slice() копирует сам массив, но не создает новые объекты внутри него.

let users = [{ name: 'Анна' }];
let copy = users.slice();

copy[0].name = 'Мария';

console.log(users[0].name); // Мария

К этой особенности стоит вернуться, когда будете работать с массивами объектов.

Итого

slice() возвращает новый массив с выбранными элементами.

  • array.slice(start, end) берет элементы от start до end.
  • Конечный индекс не включается в результат.
  • Если передать один аргумент, элементы берутся до конца массива.
  • slice() без аргументов создает копию массива.
  • Исходный массив после вызова slice() не меняется.