Понимание метода Splice в Javascript

Привет 👋, я уже объяснял метод Splice в своем предыдущем посте.
Здесь я собираюсь объяснить метод slice на нескольких примерах.
Хотя в их названиях нет особой разницы (просто лишняя буква p, верно), но они сильно отличаются по своему механизму или тому, как они работают.

Метод Slice не изменяет исходный массив.

  • Да, вы правильно прочитали. В отличие от метода splice, метод slice не изменяет содержимое исходного массива.

  • Скорее он возвращает копию сегмента / доли / среза исходного массива (точнее, неглубокую копию).

Взгляните на синтаксис:

slice(start, end)
Войти в полноэкранный режим Выход из полноэкранного режима

Примечание : начало и конец могут быть необязательными.

  • Чтобы понять это, мы перейдем непосредственно к примерам.
  • И для этого мы начнем с простых сценариев.

Теперь мы можем разделить это на три части:

  1. slice без аргументов : slice()
  2. фрагмент с началом : slice(start)
  3. фрагмент с началом и концом : slice(start, end)

Давайте рассмотрим их по очереди.


slice()
Вход в полноэкранный режим Выход из полноэкранного режима

Пример — 1

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let resultedArray = numbers.slice();
console.log(' result - 1 ', resultedArray);   // [1, 2, 3, 4, 5, 6, 7, 8, 9];
Вход в полноэкранный режим Выход из полноэкранного режима
  • Из приведенного выше примера вы, возможно, зададитесь вопросом, что исходный массив и полученный массив абсолютно одинаковы. Тогда какого черта здесь используется метод slice?

  • Он возвращает копию (неглубокую копию) исходного массива.

  • Следующий блок кода объясняет это.

let products = [ { id : 100 , productName : 'Mobile', manufacturer : { id : 1 , countryCode : 'USA'}} ,{ id : 101 , productName : 'TV'}, { id : 102 , productName : 'Washing Machine', manufacturer : { id : 2 , countryCode : 'CAN'}} ];

let resultedArray = products.slice();

console.log( ' products ', products);
console.log( ' resultedArray ', resultedArray);

// To check their equality 
console.log( ' Equality ', products === resultedArray ) // false

// To check the equality of child nodes ( nested keys )
console.log(' child node ', products[0].manufacturer === resultedArray[0].manufacturer );   // true

Вход в полноэкранный режим Выход из полноэкранного режима
  • Когда мы проверяем равенство родительских объектов, это ясно дает нам понять, что оба объекта не одинаковы.

  • Когда мы проверяем равенство вложенных объектов, это указывает на то, что оба объекта одинаковы.

Это означает, что метод slice действительно создает неглубокую копию.


slice(start)
Вход в полноэкранный режим Выход из полноэкранного режима

Пример — 2

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let resultedArray = numbers.slice(2);
console.log(' result - 1 ', resultedArray);   // [3, 4, 5, 6, 7, 8, 9];
Вход в полноэкранный режим Выход из полноэкранного режима
  • В приведенном выше примере метод slice выдает фрагмент или часть массива, которая начинается с указанного индекса до конца массива.

  • Ничего более сложного, но подождите, есть несколько вариантов использования: начало может быть +ve, -ve, ноль & индекс вне границы.

  • Давайте рассмотрим их один за другим.

Пример — 3

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let resultedArray = numbers.slice(-2);
console.log(' result - 1 ', resultedArray);   // [8, 9];
Вход в полноэкранный режим Выход из полноэкранного режима
  • Когда начало задано как -ve целое число, то оно будет указывать с конца массива и вырезает / выдает часть массива до конца.

Пример — 4

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let resultedArray = numbers.slice(0);
console.log(' result - 1 ', resultedArray);   // [1, 2, 3, 4, 5, 6, 7, 8, 9];
Войти в полноэкранный режим Выход из полноэкранного режима
  • Когда начало равно 0, просто создается копия.

slice() <=> slice(0)

Пример — 5

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let resultedArray = numbers.slice(20);
console.log(' result - 1 ', resultedArray);   // [];
Вход в полноэкранный режим Выход из полноэкранного режима
  • Если начальный индекс выходит за границы (т.е. больше длины массива), то возвращается пустой массив.

slice(start, end)
Вход в полноэкранный режим Выход из полноэкранного режима

Пример — 6

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let resultedArray = numbers.slice(2, 4);
console.log(' result - 1 ', resultedArray);   // [3, 4];
Вход в полноэкранный режим Выход из полноэкранного режима
  • В приведенном выше примере метод slice дает нам часть массива, начиная с начального индекса — 2 и до конечного индекса, но исключая элемент в конечном индексе

  • Таким образом, мы получаем элементы 3 и 4 по индексам 2 и 3 соответственно (мы не получили элемент, присутствующий по индексу 4);

Если указан конец, то элемент в этой позиции исключается из результирующего массива после среза.

  • Теперь другой случай использования — end может быть -ve. Я не буду подробно останавливаться на этом, так как вы уже поняли идею, просмотрев примеры выше.

Пример — 7

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let resultedArray = numbers.slice(2, -4);
console.log(' result - 1 ', resultedArray);  // [3, 4, 5];
Вход в полноэкранный режим Выйти из полноэкранного режима
  • Спасибо, что заглянули! Если вы нашли эту статью полезной, поделитесь ею. Вы можете связаться со мной здесь: LinkedIn

Оцените статью
devanswers.ru
Добавить комментарий