Обратный массив с помощью метода splice ()

Question

Я изучаю Javascript, видел этот код, но не знаю точно, как он работает. По сути, он переворачивает числа в массиве.

Кто-нибудь, кто имеет более глубокое понимание и хотел бы объяснить мне, что именно делает код?

var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

var knop = document.getElementById("knop");
knop.addEventListener("click", reverse);

function reverse() {
  for (var i = 0, j = a.length; i < a.length; i++) {
    a.splice(i, 0, a[j - 1]);
    a.splice(j, 1);
  }
  document.getElementById("demo1").innerHTML = a;
}

   <p id="demo1">Hier komt de inhoud na het omkeren</p>
    <button type="button" id="knop">Keerom</button>

Answer 1

Сначала давайте прочитаем, что делает Array.splice () :

Метод splice () изменяет содержимое массива, удаляя илизамена существующих элементов и / или добавление новых элементов.

array.splice (start [, deleteCount [, item1 [, item2 [, ...]]]])

• start : Индекс, с которого следует начать изменение массива (с началом 0).Если он больше длины массива, фактический начальный индекс будет установлен равным длине массива.Если отрицательно, начнется, что многие элементы с конца массива (с происхождением -1, что означает -n является индексом n-го последнего элемента и, следовательно, эквивалентно индексу array.length-n) и будет установлено в0, если абсолютное значение больше длины массива.
• deleteCount (Необязательно): целое число, указывающее количество удаляемых старых элементов массива.Если deleteCount опущен или если его значение равно или больше, чем array.length - start (то есть, если оно равно или больше, чем число элементов, оставшихся в массиве, начиная с начала), то всеэлементы от начала до конца массива будут удалены.Если deleteCount равен 0 или отрицателен, никакие элементы не удаляются.В этом случае вы должны указать хотя бы один новый элемент (см. Ниже).
• item1, item2, ... (необязательно): элементы, добавляемые в массив, начиная сначальный индекс.Если вы не укажете какие-либо элементы, splice () удалит только элементы из массива.

Вы должны сначала заметить, что splice() мутирует исходный массив,Итак, на каждом иритарионе цикла вы в основном выполняете следующие действия:

a.splice (i, 0, a [j - 1]);

Добавьте последний элемент текущего массива в позицию i.

a.splice (j, 1);

Удалите последний элемент в массиве.

Это будет легко проверить, если мы добавим несколько журналов:

var a = [1, 2, 3, 4, 5];

var knop = document.getElementById("knop");
knop.addEventListener("click", reverse);

function reverse()
{
  for (var i = 0, j = a.length; i < a.length; i++)
  {
    console.log("-----------------");
    console.log("Iteration: " + i);
    console.log("-----------------");
    console.log(`array before insert at position ${i}: ${a}`);
    a.splice(i, 0, a[j - 1]);
    console.log(`array after insert at position ${i}: ${a}`);
    a.splice(j, 1);
    console.log(`array after delete last element: ${a}`);
  }
  document.getElementById("demo1").innerHTML = a;
}

.as-console {background-color:black !important; color:lime;}
.as-console-wrapper {max-height:100% !important; top:0;}

<p id="demo1">Hier komt de inhoud na het omkeren</p>
<button type="button" id="knop">Keerom</button>

Answer 2

Полагаю, вы говорите именно об этой части (а не о взаимодействии с домом)

Самый простой способ увидеть это - добавить console.log ()

var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
for (var i = 0, j = a.length; i < a.length; i++) {
  a.splice(i, 0, a[j - 1]);
  console.log('index:',  i)
  console.log('copy:',  a.join(','))
  a.splice(j, 1);
  console.log('trim:',  a.join(','))
}

когда вы смотрите на вывод, вы видите, что функция копирует последний элемент в массив по индексу i. Затем он удаляет последний элемент. Он делает это столько раз, сколько элементов в массиве

пример:

В этом случае копируется последний элемент (7) между 3-м и 4-м пунктом, позиция по индексу 3. Затем удаляет 7

index: 3
copy: 10,9,8,7,1,2,3,4,5,6,7
trim: 10,9,8,7,1,2,3,4,5,6

Answer 3

Посмотрите это array.splice и вернитесь сюда.

Теперь, когда вы знаете, что делает array.splice ().

Здесь в основном происходят две вещи:

1. a.splice(i, 0, a[j - 1]);

Эта часть кода берет текущий последний элемент a (a [j - 1]) и помещает его в i -й индекс a

и сдвигает элементы вправо на i -й указатель на одну позицию.

* ** 1 022 тысяча двадцать-один * ПРИМЕР 1 * 1 023 * на первом шаге:

i = 0

a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

j = длина a

a [j - 1] = 10

результат a.splice (i, 0, a [j - 1]); есть

a = [10,1,2,3,4,5,6,7,8,9,10]

2. a.splice(j, 1);

На этом шаге мы удаляем лишний последний элемент, оставшийся в a после шага 1

Из ПРИМЕРА-1 мы видим, что длина a увеличилась на 1 единицу.

Итак, на этом шаге мы берем последний элемент a (теперь a [j] ) и удаляем его.

чтобы получить результат a = [10,1,2,3,4,5,6,7,8,9]

Теперь для i = 1

a.splice (i, 0, a [j - 1]); дает = [10,9,1,2,3,4,5,6,7,8,9] и

* 1 072 * a.splice (к, 1); дает = [10,9,1,2,3,4,5,6,7,8]

Этот процесс повторяется до тех пор, пока i == a.length, т.е. больше не останется элементов для вращения.

Answer 4

knop.addEventListener("click", reverse); //attaches the eventListener to the variable `knop` so when the it will clicked it will trigger `reverse` event.

//This creates a loop which runs through whole array.
for (var i = 0, j = a.length; i < a.length; i++) {
    a.splice(i, 0, a[j - 1]);
    a.splice(j, 1);
  }

Это добавит новый элемент по индексу i. И добавленный новый элемент является последним элементом array

a.splice(i, 0, a[j - 1]);

Эта строка удаляет последний элемент массива, добавленный по индексу i.

a.splice(j, 1);

Ниже приведен пример изменения массива

[1,2,3,4,5,6] => [6,1,2,3,4,5] => [6,5,1,2,3,4] => [6,5,4,1,2,3] => [6,5,4,3,1,2] => [6,5,4,3,2,1] (полностью в обратном порядке)

Код начинает удалять элементы из last и добавлять их на их позиции, которые должны быть в обращенном массиве. Например:

• последний будет перемещен на 1-е место
  
• Второй последний будет перемещен на второе место
  
• Второе-второе место
  
• Первый будет перемещен на последнее место
  

Answer 5

Может быть, проще использовать только одну переменную в качестве индекса для изменения.

Он берет элемент из нулевого индекса и склеивает (вставляет) его по индексу ограничения вниз.

function reverse() {
    var i = a.length;
    while (i--) {
        console.log(...a);
        a.splice(i, 0, a.splice(0, 1)[0]);
    }
    document.getElementById("demo1").innerHTML = a;
}

var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

var knop = document.getElementById("knop");
knop.addEventListener("click", reverse);

<p id="demo1">Hier komt de inhoud na het omkeren</p>
<button type="button" id="knop">Keerom</button>