使用splice（）方法反转数组
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用splice（）方法反转数组相关的知识，希望对你有一定的参考价值。
我正在学习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>我假设你专门讲这个部分（不是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(','))
首先，让我们读一下Array.splice()的作用：
splice（）方法通过删除或替换现有元素和/或添加新元素来更改数组的内容。
array.splice（start [，deleteCount [，item1 [，item2 [，...]]]]）
- start：开始更改数组的索引（原点为0）。如果大于数组的长度，实际的起始索引将设置为数组的长度。如果是负数，将从数组的末尾开始那么多元素（原点为-1，意思是-n是第n个最后一个元素的索引，因此等于array.length - n的索引）并将设置为如果绝对值大于数组的长度，则为0。
- deleteCount（可选）：一个整数，指示要删除的旧数组元素的数量。如果省略deleteCount，或者它的值等于或大于array.length - start（即，如果它等于或大于数组中剩余的元素数，从start开始），那么所有的从数组开始到结束的元素将被删除。如果deleteCount为0或负数，则不删除任何元素。在这种情况下，您应该至少指定一个新元素（见下文）。
- item1，item2，...（可选）：从起始索引开始添加到数组的元素。如果未指定任何元素，则splice（）将仅从数组中删除元素。
您应该首先注意splice()会改变原始数组。所以，在循环的每个iretarion上，基本上你都在执行这些操作：
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>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]（完全颠倒）
代码开始从最后删除元素并将它们添加到它们应该是反向数组的位置。例如：
- 最后将被移到第一名
- 第二名将被移至第二名
- 排在倒数第二位
- 首先将被移到最后一个位置
看到这个array.splice，然后回到这里。
现在你知道了array.splice（）的作用了。
这里基本上发生了两件事：
1. a.splice(i, 0, a[j - 1]);
这部分代码获取a（a [j - 1]）的当前最后一个元素，并将其放在a的第i个索引处
并将元素移到第i个索引的右边一个位置。
第一步中的例子-1：
i = 0
a = [1,2,3,4,5,6,7,8,9,10]
j = a.length
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之后留下的额外最后一个元素
从例-1可以看出，a的长度增加了1个单位。
所以在这一步中我们取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]和
a.splice（j，1）;给出一个= [10,9,1,2,3,4,5,6,7,8]
重复该过程直到i == a.length，即不再有元件旋转。
也许更容易使用一个变量作为变化的索引。
它从索引零开始获取元素，并在倒计时索引处拼接（插入）它。
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（）方法反转数组的主要内容，如果未能解决你的问题，请参考以下文章