Давайте вивчимо синтаксис Slice (), Splice () & Spread (…) у JavaScript

Я зіткнувся з цим викликом freeCodeCamp і затримався на деякий час, думаючи про те, як я можу знайти спосіб його вирішення. Вони вже згадували рішення за допомогою Slice & Splice. Тоді мене бентежило, коли використовувати Slice, а коли Splice.

Тут я поділюсь, як я вирішив це за допомогою цих методів.

І Slice, і Splice використовуються для маніпулювання масивами. Подивимось, як вони це роблять.

Фрагмент:

Метод Slice приймає 2 аргументи.

1-й аргумент : Вказує, з якого місця слід розпочати відбір.

Наприклад:

var arr1 = [1,5,8,9]; arr1.slice(1); // [5,8,9]

З першого індексу (5) він поверне елементи.

2-й аргумент : визначає, на якому рівні повинна бути кінцева точка. Якщо ви не ввели це в дужки під час виклику методу slice, він поверне елементи з початкового індексу в кінець масиву.

var arr1 = [1,5,8,9]; console.log(arr1.slice(1,3)); //[ 5, 8 ]

Якщо під час дзвінка ви ставите від’ємне число, виділення буде вибрано з кінця масиву.

var arr1 = [1,5,8,9]; console.log(arr1.slice(-2)); //[ 8, 9 ]

Примітка: Slice завжди повертає вибрані елементи з масиву.

Зріз не змінить масив. Масив залишається цілим. Див. Приклад нижче:

var arr1 = [1,5,8,9]; arr1.slice(2); console.log(arr1); // [ 1, 5, 8, 9 ]

Навіть якщо ви внесли деякі зміни в масив, це не вплине на це. Він поверне початковий масив таким, яким він був на початку.

Зрощення:

Це може приймати кілька аргументів.

Це означає,

1-й аргумент : Вказує, в якій позиції слід додати / видалити новий елемент або існуючий елемент. Якщо значення від’ємне, позиція буде рахуватися з кінця масиву.

2-й аргумент : Кількість елементів, які потрібно вилучити з вихідного положення. Якщо воно дорівнює 0, то жодні елементи не буде видалено. Якщо його не передано, він видалить всі елементи з початкової позиції.

var arr1 = [1,5,8,9]; console.log(arr1.splice(1,2)); // [ 5, 8 ]

3-й аргумент -> n-й аргумент : значення елементів, які ви хочете додати до масиву.

var arr1 = [1,5,8,9]; console.log(arr1.splice(1,2,'Hi','Medium')); // [5,8]

Вам може здатися, що ми додали до масиву "Привіт", "Середній", але тут це не відображається .... Правда?

Так, ми втішили arr1.splice (1,2, "Привіт", "Середній").

Примітка:

  • Зрощення поверне вилучені елементи лише з масиву.
  • Зрощення змінить вихідний масив
var arr1 = [1,5,8,9]; arr1.splice(1,2,'Hi','Medium'); console.log(arr1); // [ 1, 'Hi', 'Medium', 9 ]

Синтаксис розповсюдження:

Визначення : Дозволяє розширювати ітеративний файл, такий як вираз масиву або рядок, у місцях, де очікується нуль або більше аргументів (для викликів функцій) або елементів (для літералів масиву), або розширення виразу об’єкта там, де дорівнює нулю або більше Очікуються пари ключ-значення (для об’єктних літералів).

Давайте мати приклад для цього:

var arr1 = [1,3,6,7]; var arr2 = [5,arr1,8,9]; console.log(arr2); // [ 5, [ 1, 3, 6, 7 ], 8, 9 ]

Я хочу, щоб це було в одному масиві, як [5, 1, 3, 6, 7, 8, 9].

Я можу використовувати цей синтаксис Spread, щоб вирішити це:

var arr1 = [1,3,6,7]; var arr2 = [5,...arr1,8,9]; console.log(arr2); //[ 5, 1, 3, 6, 7, 8, 9 ]

Іншим основним використанням Spread Syntax є копіювання масиву:

var arr = [1, 2, 3]; var arr2 = arr; arr2.push(4); console.log(arr2); // [ 1, 2, 3, 4 ] console.log(arr); // [ 1, 2, 3, 4 ]

Я додав " 4 " лише до arr2 . Але це також внесло зміни до arr.

Ми можемо вирішити це за допомогою синтаксису Spread наступним чином ...

var arr = [1, 2, 3]; var arr2 = [...arr]; // like arr.slice() arr2.push(4); console.log(arr2); // [ 1, 2, 3, 4 ] console.log(arr); // [ 1, 2, 3]

Ви можете звернутися до документації MDN для отримання додаткової інформації про синтаксис розповсюдження.

Отже, давайте подивимось на виклик.

function frankenSplice(arr1, arr2, n) { // It's alive. It's alive! let array2Copy = [...arr2]; array2Copy.splice(n,0, ...arr1); //console.log(array2Copy); return array2Copy; } frankenSplice([1, 2, 3], [4, 5, 6], 1);

Головною умовою цього виклику є "не слід змінювати arr1 / arr2 після виконання функції".

Отже, створено масив копій arr2 і за допомогою методу сплайсингу додаємо arr1 всередину копії arr2, яка називається array2Copy.

Остаточний висновок:

-> Метод нарізки буде

  • повернути вибрані елементи з масиву
  • візьмемо 2 аргументи
  • не змінювати вихідний масив

-> Метод зрощення буде

  • повернути вилучені елементи масиву
  • взяти кілька аргументів
  • змінює вихідний масив

Це мій перший підручник з кодування - спасибі за читання! Ваш відгук допоможе мені сформувати свої навички кодування та письма.

Щасливого кодування ...!

Зв’яжіться зі мною через Twitter