Array.slice() в JavaScript — копія частини масиву

Опис

Метод slice() дозволяє створити поверхневу копію обраної частини масиву в новому об'єкті масиву. Ця копія формується на основі початкового та кінцевого індексів, при чому кінцевий індекс в результат не включається. Цінність методу полягає в тому, що оригінальний масив при цьому залишається незміненим.

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

Приклад використання методу slice():

let fruits = ["apple", "banana", "cherry", "date"];
let selectedFruits = fruits.slice(1, 3);
console.log(selectedFruits); // Output: ["banana", "cherry"]
console.log(fruits); // Output: ["apple", "banana", "cherry", "date"]

У цьому прикладі, метод slice() копіює частину масиву з першого по третій елементи (не включаючи третій). Оригінальний масив fruits залишається незміненим.

правити

Загальний опис

правити

Порада

Якщо ви не вказуєте аргументи slice(), він поверне повний копію вихідного масиву. Це може бути корисно, коли вам потрібно створити незалежну копію масиву для подальшої обробки без зміни вихідного масиву.

автор: Bond правити

Порада

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

автор: Bond правити

Порада

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

let originalArray = [1, 2, 3, 4, 5];
let copiedArray = originalArray.slice();
console.log(copiedArray); // Виведе: [1, 2, 3, 4, 5]

Таким чином, ви отримаєте новий масив, який містить ті самі елементи, що й початковий масив. Це особливо корисно, якщо ви плануєте внести зміни до скопійованого масиву без впливу на початковий.

автор: Bond правити

Порада

За допомогою методу slice() ви можете вирізати підрядок масиву з визначених індексів. Наприклад, якщо вам потрібні лише певні елементи масиву з індексу 2 по індекс 5 (не включаючи його), ви можете використати:

let originalArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let subArray = originalArray.slice(2, 5);
console.log(subArray); // Виведе: [3, 4, 5]

В результаті отримаєте новий масив, що містить елементи з індексу 2 до індексу 5 (не включаючи його) з початкового масиву.

автор: Bond правити

Нотатка

Метод slice() є універсальним та передбачає наявність в об'єкті властивості length та інших властивостей із цілими числами як індексами.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

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

Параметри

start

Початковий індекс, з якого відбувається вибірка. Перетворюється на ціле число.

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

автор: Bond

правити

end

Кінцевий індекс, до якого проводиться вибірка.Перетворюється на ціле число. Метод slice() вибирає елементи до, але не включаючи, цей кінцевий індекс.

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

автор: Bond

правити

Повернення

array

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

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	4	12	4

Підтримка: мобільні переглядачі

Переглядач
	1	18	4	1

Підтримка: серверні переглядачі

Переглядач
	0.10.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

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

console.log(citrus); // → ["Апельсин", "Лимон"]
console.log(fruits); // → ["Банан", "Апельсин", "Лимон", "Яблуко", "Манго"], slice не змінює масив

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 ]

console.log([1, 2, , 4, 5].slice(1, 4)); // [2, empty, 4]

<header>
  <h2 class="title">Використання методу slice() з масивами</h2>
  <p class="description">Демонстрація використання методу slice() для створення нових масивів та вилучення об'єктів за властивостями.</p>
</header>
<main>
  <div class="result">
    <h3 class="result-title">Масив тварин:</h3>
    <pre id="animalsArray"></pre>
    <h3 class="result-title">Частина масиву:</h3>
    <pre id="sliceAnimals"></pre>
    <h3 class="result-title">Масив тварин, які мають більше ніж 4 літери:</h3>
    <pre id="longNamedAnimals"></pre>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

.result-title {
  font-weight: bold;
  color: #333;
}

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

document.getElementById('animalsArray').innerText = JSON.stringify(animals, null, 2);

const sliceAnimals = animals.slice(2, -1);
document.getElementById('sliceAnimals').innerText = JSON.stringify(sliceAnimals, null, 2);

const longNamedAnimals = animals.filter(animal => animal.length > 4);
document.getElementById('longNamedAnimals').innerText = JSON.stringify(longNamedAnimals, null, 2);
//# sourceURL=pen.js

const week = ['пн', 'вт', 'ср', 'чт', 'пт'];

console.log(week.slice(1, 3));  // ["вт","ср"] — індекс 3 не входить
console.log(week.slice(-2));    // ["чт","пт"]
console.log(week.slice(0, -1)); // ["пн","вт","ср","чт"]
console.log(week);              // оригінал цілий

// splice РІЖЕ оригінал
const same = ['пн', 'вт', 'ср', 'чт', 'пт'];
console.log(same.splice(1, 3)); // ["вт","ср","чт"] — вирізане
console.log(same);              // ["пн","пт"] — від масиву лишилося двоє

// копія поверхнева: об'єкти всередині спільні
const rows = [{ n: 1 }];
const copy = rows.slice();
copy[0].n = 99;
console.log(rows[0].n);         // 99, а не 1