css.in.ua
Підтримати

JS метод Array.copyWithin()

Опис

Метод copyWithin надає можливість легко переміщати частини масиву всередині самого масиву без необхідності використання додаткових змінних або циклів. Особливістю методу copyWithin є його ефективність та зручність у використанні. Це корисний інструмент, особливо коли потрібно швидко змінити порядок елементів або дублювати частини масиву. Така можливість стає незамінною у різноманітних задачах обробки даних. Для тих, хто знайомий з мовами програмування C або C++, ця операція може нагадати функцію memmove, яка використовується для копіювання блоків пам'яті.

Як використовувати метод copyWithin?

Уявімо, що у вас є масив чисел, і вам потрібно перемістити частину цього масиву на інше місце всередині того ж масиву. Метод copyWithin дозволяє це зробити, вказавши декілька параметрів: де починати вставку, звідки брати дані та де закінчувати копіювання. Завдяки цьому методу, ви можете швидко та ефективно організовувати свої дані без великих зусиль.

// Маємо початковий масив чисел
let numbers = [1, 2, 3, 4, 5];

// Використовуємо метод copyWithin, щоб взяти числа "2" та "3" 
// і помістити їх на місце чисел "4" та "5"
numbers.copyWithin(3, 1, 3);

console.log(numbers); 
// Результат: [1, 2, 3, 2, 3]

У цьому прикладі ми використовуємо copyWithin, щоб копіювати елементи з позицій 1 до 3 (не включно) та вставляти їх, починаючи з позиції 3.

Важливо зазначити, що undefined конвертується в 0 під час перетворення на ціле число. Отже, якщо не задати параметр start, це буде еквівалентно заданню 0. Це призводить до копіювання всього масиву на потрібну позицію, що є схожим на правий зсув: права частина втрачається, а ліва – дублюється. Щоб уникнути плутанини, краще явно вказувати 0 як значення для start.

Нотатка:

Основна перевага використання методу copyWithin() полягає в тому, що він здійснює маніпуляції з елементами масиву на місці, без створення нового масиву або модифікації розміру масиву. Це дозволяє ефективно виконувати операції копіювання елементів в межах самого масиву.
Нотатка:

Використання методу copyWithin() також дозволяє вказувати від'ємні значення для позицій target, start та end, що вказує на відлік позицій від кінця масиву. Це може бути корисною функціональністю для вибору певних ділянок масиву.
Нотатка:

Метод copyWithin() універсальний. Він очікує, що у this буде властивість length та властивості з цілими числовими ключами. Проте, не дивлячись на те, що рядки також схожі на масиви, цей метод не підходить для їх обробки, адже рядки незмінні.
Нотатка:

Метод copyWithin() зберігає порожні слоти. Так, якщо копійована область є розрідженою, нові індекси порожніх слотів також видаляються та стають порожніми.
Нотатка:

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

Синтаксис

copyWithin(target, start)
copyWithin(target, start, end)

Параметри

*target

В якості параметра target вказується ціле число, яке вказує індекс, до якого копіювати послідовність.

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

В якості параметра start вказується ціле число, яке вказує індекс, з якого починається копіювання елементів.

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

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

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

Return

array

Змінений масив.

Переглядачі

Переглядач

45

32

9

32

12
Переглядач

45

45

32

9
Переглядач

4.0.0

1.0

Приклади


Перший виклик copyWithin() копіює елемент з позиції 3 в початкову позицію 0. Другий виклик копіює всі елементи з позиції 3 до кінця масиву в позицію 1.

Після виклику методу copyWithin() елементи масиву заміняються копіями елементів, що знаходяться між початковою та кінцевою позиціями. Результатом є модифікований масив.

console.log([1, 2, 3, 4, 5].copyWithin(0, 3));
// [4, 5, 3, 4, 5]

console.log([1, 2, 3, 4, 5].copyWithin(0, 3, 4));
// [4, 2, 3, 4, 5]

console.log([1, 2, 3, 4, 5].copyWithin(-2, -3, -1));
// [1, 2, 3, 3, 4]

У даному прикладі, метод copyWithin() викликається на масиві [1, , 3] з аргументами 2, 1, 2, що означає скопіювати елементи з позиції 1 (включно) до позиції 2 (виключно) до позиції 2. Результатом буде [1, empty, empty], де empty позначає порожні слоти.

console.log([1, , 3].copyWithin(2, 1, 2)); // [1, empty, empty]

В прикладі використовується об'єкт arrayLike, який не є масивом, але має властивість length та індекс 3. Застосування методу copyWithin() до arrayLike за допомогою Array.prototype.copyWithin.call(arrayLike, 0, 3) копіює значення з індексу 3 в початковий індекс 0, і повертає модифікований об'єкт. Після цього, виклик Array.prototype.copyWithin.call(arrayLike, 3, 1) копіює значення з індексу 1 в індекс 3, але властивість '3' видаляється, оскільки початковий індекс є порожнім слотом.

const arrayLike = {
  length: 5,
  3: 1,
};
console.log(Array.prototype.copyWithin.call(arrayLike, 0, 3));
// { '0': 1, '3': 1, length: 5 }
console.log(Array.prototype.copyWithin.call(arrayLike, 3, 1));
// { '0': 1, length: 5 }
// Властивість '3' видаляється, оскільки скопійоване джерело є порожнім слотом

Спільнота

Зв'язок