Понимание метода среза массива в Javascript

Метод slice для массивов возвращает поверхностную копию части массива. Он принимает два числа: начало и конец. У каждого массива есть метод slice. Вот краткий пример:

let myArray = [ '⚡️', '🔎', '🔑', '🔩' ];
let newArray = myArray.slice(2, 3);

console.log(newArray); // [ '🔑' ]

Для метода slice есть два необязательных параметра: start и end. Вы можете указать оба варианта, только start или ни один из них, если хотите, так что все они действительны:

let arrayOne = [ '⚡️', '🔎', '🔑', '🔩' ];
let arrayOneSlice = arrayOne.slice(2, 3);  // [ '🔑' ]

let arrayTwo = [ '⚡️', '🔎', '🔑', '🔩' ];
let arrayTwoSlice = arrayTwo.slice(2);  // [ '🔑', '🔩' ]

let arrayThree = [ '⚡️', '🔎', '🔑', '🔩' ];
let arrayThreeSlice = arrayThree.slice();  // [ '⚡️', '🔎', '🔑', '🔩' ]

начать

Это индекс первого элемента, который нужно включить в новый массив. Например, если установлено значение 2, slice начнет вашу новую копию массива с индекса 2. Если используется отрицательное значение, это указывает на смещение от конца последовательности. Например:

let arrayOne = [ '⚡️', '🔎', '🔑', '🔩' ];
let arrayOneSlice = arrayOne.slice(-2);  // [ '🔑', '🔩' ]
let arrayOneSliceAgain = arrayOne.slice(-1);  // [ '🔩' ]

конец

Это первый элемент, который необходимо исключить из массива срезов, что немного сбивает с толку. Вы могли бы ожидать, что end будет представлять последний элемент для включения, но вместо этого он будет первым элементом для исключения. Помните об этом, если используете slice! Если вы опустите этот аргумент, метод slice просто продолжит работу до конца массива, как показано в этом примере:

let arrayTwo = [ '⚡️', '🔎', '🔑', '🔩' ];
let arrayTwoSlice = myArray.slice(2);  // [ '🔑', '🔩' ]

Если используется значение, превышающее длину массива, slice продолжается только до конца массива. Если используется отрицательное значение, оно указывает на смещение от конца массива. Например, (2, -1) будет равно 2 с начала и -1 с конца массива:

let arrayOne = [ '⚡️', '🔎', '🔑', '🔩' ];
let arrayOneSlice = arrayOne.slice(2, -1);  // [ '🔑' ]
let arrayOneSliceAgain = arrayOne.slice(1, -1);  // [ '🔎', '🔑' ]

Использование среза для создания копии массива

Срез не изменяет исходный массив. Вместо этого создается новая мелкая копия. Таким образом, ваш существующий массив по-прежнему будет содержать те же значения:

let arrayOne = [ '⚡️', '🔎', '🔑', '🔩' ];
let arrayOneSlice = arrayOne.slice(2, 3);  

console.log(arrayOne); // [ '⚡️', '🔎', '🔑', '🔩' ]
console.log(arrayOneSlice); // [ '🔑' ]

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

let arrayOne = [ '⚡️', '🔎', '🔑', '🔩' ];
let arrayOneSlice = arrayOne.slice();

arrayOneSlice[2] = '⚡️'
console.log(arrayOne); // [ '⚡️', '🔎', '🔑', '🔩' ]
console.log(arrayOneSlice); // [ '⚡️', '🔎', '⚡️', '🔩' ]

Это может быть полезно в некоторых сценариях. Однако slice создает только поверхностную копию массива. Это означает, что все становится немного запутанным, когда у вас есть объекты в вашем массиве. Рассмотрим следующий массив:

let arrayOne = [ { items: [ '⚡️', '🔎', '🔑', '🔩' ]}, '👨‍💻', '😄', '🐔' ]

Этот массив содержит объект внутри него. Попробуем сделать нарезанную копию этого массива, а затем обновить items:

let arrayOne = [ { items: [ '⚡️', '🔎', '🔑', '🔩' ]}, '👨‍💻', '😄', '🐔' ]
let arrayOneSlice = arrayOne.slice(0, 2);

arrayOneSlice[0].items = [ '🔎' ];
arrayOneSlice[1] = '🔎';

console.log(arrayOne); // [ { items: [ '🔎' ]}, '👨‍💻', '😄', '🐔' ]
console.log(arrayOneSlice); // [ { items: [ '🔎' ]}, '🔎' ]

Подождите, что? Мы изменили объект arrayOneSlice items, но он изменился как в arrayOne, так и в arrayOneSlice! Между тем, arrayOneSlice[1] изменил только arrayOneSlice! Добро пожаловать в еще одну причуду Javascript. В первом примере, используя нотацию arrayOneSlice[0].items, Javascript интерпретирует это как обновление существующего элемента в неглубокой копии и, таким образом, влияет на оригинал. Однако несколько сбивает с толку тот факт, что при использовании нотации arrayOneSlice[1] Javascript интерпретирует это как помещение нового значения в место [1] самой поверхностной копии.

Это означает, что, хотя может казаться, что вы делаете копию с помощью slice при работе с простыми массивами, это не верно. при использовании его на более сложных объектах. Когда-нибудь знание этой маленькой мелочи сэкономит вам много времени.

Заключение

Метод фрагмента Javascript полезен для создания новых неглубоких копий массивов с подмножеством данных исходного массива. Его также можно использовать ограниченным образом для создания дубликатов, которые можно обновлять независимо. Копии фрагментов Javascript по-прежнему имеют ту же ссылку, что и оригинал в памяти, что полезно знать при работе с ними.

Надеюсь, вам понравилось это руководство. Чтобы узнать больше о Javascript, ознакомьтесь с другими моими статьями здесь.

Также опубликовано здесь