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

我假设您是专门讲这部分（不是dom交互）

最简单的查看方法是添加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的数组中。然后，它删除最后一个项目。这样做的次数与数组中的项目次数一样

示例：

在这种情况下，它将在第3个和第4个项目之间复制最后一个项目（7），位置在索引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 2

首先，让我们阅读Array.splice()的作用：

splice（）方法通过删除或替换现有元素和/或添加新元素来更改数组的内容。

array.splice（start [，deleteCount [，item1 [，item2 [，...]]]]）


开始：   开始更改数组的索引（原点为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 3

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]（完全颠倒）

代码开始从最后删除元素，并将其添加到应位于反向数组中的位置。例如：

最后一个将移至第一名
倒数第二名将移至第二名
倒数第二名
第一个将移至最后一个位置

Answer 4

看到这个array.splice，然后回到这里。

现在您知道array.splice（）的作用。

基本上发生了两件事：

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

这部分代码采用 a （a [j-1]）的当前最后一个元素，并将其放在 a < / strong>

并将元素移至第 i 个索引的右侧。

示例1 第一步：

i = 0

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

j =长度

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);

在此步骤中，我们删除了步骤1
之后 a 中剩余的最后一个元素
在示例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]）;给出a = [10,9,1,2,3,4,5,6,7,8,9]和

a.splice（j，1）;给出a = [10,9,1,2,3,4,5,6,7,8]

重复此过程，直到i == a.length，即不再剩下要旋转的元素。

Answer 5

也许只使用一个变量作为更改索引会更容易。

它从索引0开始获取元素，并将其剪接（插入）在向下索引处。

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>

带有splice（）方法的反向数组

5 个答案: