Javascript-метод Array.slice: тонкощі використання
Синтаксис методу
array.slice([begin[, end]])
Як видно, метод приймає два аргументи, але жоден з них не є обов'язковим.
Перший параметр позначає позицію початку шуканого подмассива, другий - позицію елемента, на якому буде припинено витяг. Отже, вони повинні представляти собою цілі числа.
При відсутності аргументу end
метод буде працювати до самого кінця вихідного масиву.
При відсутності обох параметрів array
- просто буде скопійовано повністю.
Функція може приймати і негативні аргументи, при цьому відлік позиції почнеться з кінця масиву.
Приклади роботи
Розглянемо роботу методу slice()
на прикладі простого масиву чисел:
let arr =[5, 4, 3, 2, 1];
Отримання подмассива з перших трьох елементів:
console.log(arr.slice(0 3));
Тут перший аргумент - 0. Він вказує функції, що потрібно почати з нульової позиції. А другий - 3 говорить, що потрібно зупинитися на елементі з індексом 3 не включаючи його до фінальної вибірку. У підсумку на консоль буде виведений масив, що включає в себе 5 4 і 3.
<!-- fb_336x280_1 -->
<script> (adsbygoogle = window.adsbygoogle ||[]).push({});
Отримання подмассива з останніх трьох елементів:
console.log(arr.slice(-3));
Для виконання цього завдання достатньо лише одного аргументу, який позначить початок вибірки. Від'ємне значення ініціює відлік з кінця масиву. У нашому випадку це елемент зі значенням 3. Підсумковий масив включає в себе числа 321.
Обчислене значення
Особливість методу jаvascript array.slice
() полягає в тому, що він не модифікує об'єкт, у контексті якого був викликаний. Це означає, що після всіх проведених операцій масив arr
залишився незмінним і може бути використаний програмою для інших цілей.
Робота функції полягає у створенні нового масиву, не пов'язаного з вихідним, і заповненні його вибраними елементами. Щоб цей масив можна було використовувати у подальшому, його необхідно записати в змінну.
<!-- fb_336x280_2 -->
<script> (adsbygoogle = window.adsbygoogle ||[]).push({});
let arr =[5, 4, 3, 2, 1];
let newArr = arr.slice(1 4);
console.log(newArr); //[4, 3, 2]
console.log(arr); //[5, 4, 3, 2, 1]
З прикладу видно, що об'єкт arr
залишився незміненим. Результат роботи методу став новий масив newArr
.
Копіювання масивів
Цей механізм дозволяє автоматично створювати копії, не перебираючи кожний елемент послідовності вручну.
let clone = arr.slice();
console.log(clone); //[5, 4, 3, 2, 1]
Виклик методу без аргументів запускає копіювання з самого початку і до кінця масиву arr
. Отриманий клон абсолютно незалежний від свого джерела і дозволяє маніпулювати даними без побоювання втратити їх назавжди.
clone[2]++;
console.log(clone); //[5, 4, 4, 2, 1]
console.log(arr); //[5, 4, 3, 2, 1]
Тут важливо пам'ятати, що об'єкти jаvascript передаються по посиланню. Отже, якщо елементи послідовності є об'єктами, то їх зміна в копії спричинить за собою таку ж зміну в исходнике.
let arr =[
{a: 1},
[2, 3]
];
//копіюємо вихідний масив
let newArr = arr.slice();
console.log(newArr); //[{a: 1},[2, 3]]
//змінюємо копію
newArr[0].a = 7;
console.log(newArr); //[{a: 7},[2, 3]]
//вихідний масив теж змінився
console.log(arr); //[{a: 7},[2, 3]]
Без побоювань можна працювати з рядками, числами і булевими операторами значеннями, так як вони повністю копіюються у нову послідовність. При цьому додавання і видалення елементів в рамках клонованого масиву ніяк не впливає на вихідний.