Array.prototype.slice()

Метод slice() (вирізати скибку, зріз) примірників Array повертає поверхневу копію (зріз) певної частини масиву, взяту від елемента за індексом start (включно) до елемента за індексом end (не включно), у вигляді нового масиву. Початковий масив не змінюється.

Спробуйте його в дії

Синтаксис

slice()
slice(start)
slice(start, end)

Параметри

start (початок) Необов'язкове

Індекс (починаючи з нуля), за яким почнеться вибирання елементів з масиву, перетворений на ціле число.

• Від'ємний індекс рахується з кінця масиву: якщо -array.length <= start < 0, використовується start + array.length.
• Якщо start < -array.length або start опущено, використовується 0.
• Якщо start >= array.length, то повертається порожній масив.

end (кінець) Необов'язкове

Індекс (починаючи з нуля), на якому припиниться вибирання елементів з масиву, перетворений на ціле число. slice() вибирає елементи до, але не включаючи end.

• Від'ємний індекс рахується з кінця масиву: якщо -array.length <= end < 0, використовується end + array.length.
• Якщо end < -array.length, використовується 0.
• Якщо end >= array.length або end опущено, використовується array.length, унаслідок чого вибираються всі елементи аж до кінця масиву.
• Якщо end вказує на позицію, що передує або дорівнює позиції, на яку вказує start, то повертається порожній масив.

Результат

Новий масив, що містить всі витягнуті елементи.

Опис

Метод slice() є копіювальним методом. Він не змінює this, а повертає поверхневу копію, котра містить частину тих самих елементів, що є у вихідному масиві.

Метод slice() зберігає порожні комірки. Якщо вирізана частка є розрідженою, то повернений масив буде розрідженим також.

Метод slice() є узагальненим. Він лишень очікує, що значення this матиме властивість length, а також властивості з цілочисловими ключами.

Приклади

Повернення частини наявного масиву

const fruits = ["Банан", "Апельсин", "Лимон", "Яблуко", "Манго"];
const citrus = fruits.slice(1, 3);

// fruits містить ['Банан', 'Апельсин', 'Лимон', 'Яблуко', 'Манго']
// citrus містить ['Апельсин','Лимон']

У цьому прикладі slice(1, 3) видобуває елементи від індексу 1 до (не включно) індексу 3, що породжує новий масив ['Апельсин', 'Лимон'].

Пропущення параметра end

const fruits = ["Яблуко", "Банан", "Апельсин", "Манго", "Ананас"];

const tropical = fruits.slice(2);
console.log(tropical); // ['Апельсин', 'Манго', 'Ананас']

У цьому прикладі slice(2) видобуває елементи від індексу 2 до кінця масиву.

Застосування від'ємних індексів

const fruits = ["Яблуко", "Банан", "Апельсин", "Манго", "Ананас"];

const lastTwo = fruits.slice(-2);
console.log(lastTwo); // ['Манго', 'Ананас']

У цьому прикладі slice(-2) видобуває останні два елементи масиву. Коли з методом slice використовується негативний індекс, то такі індекси рахуються від кінця масиву, починаючи від -1, що позначає останній елемент, -2 – другий із кінця, і так далі. Від'ємний індекс -2 також включається, бо є початковою точкою видобування.

|     |     |     |     |     |
|  S  |  L  |  I  |  C  |  E  |
|     |     |     |     |     |
  -5    -4    -3    -2    -1

<--- зворотна лічба

Застосування додатного індексу початку та від'ємного індексу кінця

const fruits = ["Яблуко", "Банан", "Апельсин", "Манго", "Ананас"];

// Застосування додатного індексу початку та від'ємного індексу кінця
const sliceExample = fruits.slice(1, -1);
console.log(sliceExample); // ['Банан', 'Апельсин', 'Манго']

У цьому прикладі slice(1, -1) починає видобування з індексу 1 і продовжує до (не включно) елемента за індексом -1 (тобто останнього елемента). Це породжує новий масив ['Банан', 'Апельсин', 'Манго']. Метод slice завжди виключає з видобування заданий кінцевий індекс незалежно від його додатності чи від'ємності.

пряма лічба --->
   0     1     2     3     4
|     |     |     |     |     |
|  S  |  L  |  I  |  C  |  E  |
|     |     |     |     |     |
  -5    -4    -3    -2    -1
<--- зворотна лічба

Застосування slice до масиву об'єктів

В цьому прикладі slice створює новий масив newCar з myCar. Обидва містять посилання на об'єкт myHonda. Коли колір myHonda змінюється на purple, обидва масиви показують цю зміну.

// За допомогою slice() створити newCar з myCar.
const myHonda = {
  color: "червоний",
  wheels: 4,
  engine: { cylinders: 4, size: 2.2 },
};
const myCar = [myHonda, 2, "чудовий стан", "придбана у 1997"];
const newCar = myCar.slice(0, 2);

console.log("myCar =", myCar);
console.log("newCar =", newCar);
console.log("myCar[0].color =", myCar[0].color);
console.log("newCar[0].color =", newCar[0].color);

// Змінити колір myHonda.
myHonda.color = "бузковий";
console.log("Новий колір моєї Honda –", myHonda.color);

console.log("myCar[0].color =", myCar[0].color);
console.log("newCar[0].color =", newCar[0].color);

Скрипт надрукує такий текст:

myCar = [
  {color: 'червоний', wheels: 4, engine: {cylinders: 4, size: 2.2 } },
  2,
  'чудовий стан','придбана у 1997'
]
newCar = [ { color: 'червоний', wheels: 4, engine: { cylinders: 4, size: 2.2 } }, 2 ]
myCar[0].color = червоний
newCar[0].color = червоний
Новий колір моєї Honda – бузковий
myCar[0].color = бузковий
newCar[0].color = бузковий

Виклик slice() на об'єктах-немасивах

Метод slice() зчитує з this властивість length. Потім він зчитує цілочислові властивості від start до end і визначає їх на новоствореному масиві.

const arrayLike = {
  length: 3,
  0: 2,
  1: 3,
  2: 4,
  3: 33, // ігнорується slice(), оскільки length – 3
};
console.log(Array.prototype.slice.call(arrayLike, 1, 3));
// [ 3, 4 ]

Використання slice() для перетворення масивоподібних об'єктів на масиви

Метод slice() нерідко використовується вкупі з bind() і call() для створення допоміжного методу, що перетворює масивоподібний об'єкт на масив.

// slice() викликається з `this`, переданим як перший аргумент
const slice = Function.prototype.call.bind(Array.prototype.slice);

function list() {
  return slice(arguments);
}

const list1 = list(1, 2, 3); // [1, 2, 3]

Використання slice() на розріджених масивах

Масив, повернений зі slice(), може бути розрідженим, якщо розрідженим є вихідний масив.

console.log([1, 2, , 4, 5].slice(1, 4)); // [2, порожньо, 4]

Специфікації

Сумісність із браузерами

Дивіться також

• Поліфіл Array.prototype.slice у складі core-js
• Посібник Колекції з індексами
• Array
• Array.prototype.pop()
• Array.prototype.shift()
• Array.prototype.concat()
• Array.prototype.splice()
• TypedArray.prototype.slice()
• String.prototype.slice()