Нека да изследваме синтаксиса 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-ри аргумент : Посочва на кое ниво трябва да бъде крайната точка. Ако не сте поставили това в скобите, докато извиквате метода на среза, той ще върне елементите от началния индекс в края на масива.

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 винаги връща избраните елементи от масива.

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, „Hi“, „Medium“).

Забележка:

  • Splice ще върне премахнатите елементи само от масива.
  • Срастването ще промени оригиналния масив
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].

Мога да използвам този синтаксис за разпространение, за да разреша това:

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.

Можем да разрешим това, като използваме синтаксиса на разпространението, както следва ...

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