Slice: примеры (JAVASCRIPT)

Использование функции slice в JavaScript на практике
Раздел: Массивы, Копирование
slice(start?, end?): array|string
типовые примерыslice на php, python, mysqlslice изменения javascriptпримеры расширенные

Основы функции slice

Метод slice() в JavaScript используется для создания копии части массива или строки без изменения исходного объекта. Он доступен для объектов типа Array, String, а также для типизированных массивов и подобных массивам структур.

Функция применяется, когда требуется извлечь определенный фрагмент данных для дальнейшей обработки, не удаляя и не модифицируя первоначальную структуру.

Аргументы

  • start (необязательный) – индекс, с которого начинается извлечение. При отрицательном значении отсчет ведется от конца последовательности (-1 – последний элемент). Если аргумент опущен, копирование начинается с индекса 0.
  • end (необязательный) – индекс, на котором извлечение заканчивается (элемент с этим индексом не включается в результат). При отрицательном значении отсчет также ведется от конца. Если аргумент опущен или превышает длину последовательности, извлечение продолжается до конца.

Возвращаемое значение

Метод возвращает новый массив или строку, содержащую извлеченные элементы. Исходный массив или строка остаются без изменений.

Базовые примеры использования

Пример работы с массивом:

const fruits = ['Яблоко', 'Банан', 'Вишня', 'Апельсин', 'Лимон'];
console.log(fruits.slice(1, 3));
['Банан', 'Вишня']

Использование отрицательных индексов для строки:

const text = 'Привет, мир!';
console.log(text.slice(-4, -1));
'мир'

Копирование всего массива:

const numbers = [10, 20, 30];
const copy = numbers.slice();
console.log(copy);
[10, 20, 30]

Похожие функции в JavaScript

splice

Метод splice() изменяет исходный массив, удаляя или заменяя существующие элементы и/или добавляя новые. Используется, когда требуется модификация массива, а не простое извлечение.

substring и substr

Для строк существуют методы substring() и устаревший substr(). substring() похож на slice(), но не поддерживает отрицательные индексы. substr() в качестве второго параметра принимает длину подстроки, а не конечный индекс. Предпочтительнее использовать slice() для строк из-за его согласованности с работой на массивах и поддержки отрицательных индексов.

Типичные ошибки

Путаница с индексами

Начинающие разработчики иногда забывают, что конечный индекс не включается в результат.

const arr = [100, 200, 300];
console.log(arr.slice(0, 2));
[100, 200] // Элемент с индексом 2 (300) не включен

Ожидание модификации исходного массива

Метод slice() не изменяет исходный массив, в отличие от splice().

const data = [1, 2, 3];
data.slice(1);
console.log(data);
[1, 2, 3] // Исходный массив остался прежним

Работа с псевдомассивами

При работе с объектами, подобными массивам (например, arguments), может потребоваться преобразование.

function example() {
    // console.log(arguments.slice()); // Ошибка: у arguments нет метода slice
    const argsArray = Array.prototype.slice.call(arguments);
    console.log(argsArray);
}
example(5, 10, 15);
[5, 10, 15]

Изменения в последних версиях

Метод slice() для массивов и строк остается стабильным и не претерпевал значительных изменений в последних версиях ECMAScript. Однако, с появлением типизированных массивов (например, Int8Array, Uint32Array) метод slice() стал доступен и для этих структур, следуя той же семантике.

В современных версиях JavaScript для преобразования псевдомассивов в массив часто используют метод Array.from() или оператор расширения (...), что может быть более удобной альтернативой вызову slice() через call.

Расширенные примеры применения

Извлечение последних N элементов

Пример javascript
const array = [1, 2, 3, 4, 5];
const lastThree = array.slice(-3);
console.log(lastThree);
[3, 4, 5]

Создание мелкой копии многомерного массива

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

Пример javascript
const matrix = [[1, 2], [3, 4]];
const matrixCopy = matrix.slice();
matrixCopy[0][0] = 99;
console.log(matrix[0][0]);
99 // Изменение затронуло исходный массив

Использование с методами итерации

Пример javascript
const users = ['Анна', 'Борис', 'Виктор', 'Галина'];
const selected = users.slice(1, 3).map(user => user.toUpperCase());
console.log(selected);
['БОРИС', 'ВИКТОР']

Работа с частями строки в контексте разбора

Пример javascript
const fullName = "Иванов,Петр,Сергеевич";
const parts = fullName.split(',');
const lastName = parts.slice(0, 1)[0];
const initials = parts.slice(1).map(name => name[0].toUpperCase() + '.').join('');
console.log(`${lastName} ${initials}`);
Иванов П.С.

Имитация очереди без удаления элементов

Пример javascript
const queue = ['Задача1', 'Задача2', 'Задача3'];
function processNext(tasks) {
    return tasks.slice(0, 1)[0]; // Берем первую задачу, не удаляя
}
console.log(processNext(queue));
console.log(queue.length);
Задача1
3 // Длина исходного массива не изменилась

Аналоги в других языках программирования

Python

В Python используется синтаксис срезов (slicing) с квадратными скобками и двоеточием. Отрицательные индексы также поддерживаются.

my_list = [1, 2, 3, 4, 5]
result = my_list[1:4]
print(result)
[2, 3, 4]

PHP

Для массивов применяется функция array_slice(), для строк – substr().

$array = ['a', 'b', 'c', 'd'];
$result = array_slice($array, 1, 2);
print_r($result);
Array
(
    [0] => b
    [1] => c
)

C#

В C# для массивов и строк доступен метод Substring для строк и метод Copy или LINQ-метод Skip().Take() для массивов. С версии C# 8.0 появился оператор диапазона ...

string text = "Hello, world!";
string result = text.Substring(7, 5);
Console.WriteLine(result);
world

JS slice function comments

En
Slice Returns a shallow copy of a portion of an array/string into a new array/string