解决方案和性能

今天（2020.04.24），我为大型和小型阵列选择的解决方案进行测试。我在Chrome 81.0、Safari 13.1和Firefox 75.0上的macOS v10.13.6（High Sierra）上测试了它们。

结论

适用于所有浏览器

令人惊讶的是，对于小型阵列，基于切片和归约（D，E，F）的非就地解决方案通常比就地解决方案快10x-100倍对于大型阵列，基于拼接（AI、BI和CI）的就地解决方案是最快的（有时约为100倍，但取决于阵列大小）对于小型阵列，BI解决方案是最慢的对于大型阵列，E解决方案是最慢的

细节

测试分为两组：就地解决方案（AI、BI和CI）和非就地解决方案，分别针对两种情况进行：

测试包含10个元素的数组-可以在此处运行测试具有1000000个元素的数组-可以在此处运行

测试代码显示在以下代码段中：

小提琴演奏家

函数AI（arr，i，el）{arr.splice（i，0，el）；返回arr；}功能BI（arr，i，el）{阵列.原型.拼接.应用（arr，[i，0，el]）；返回arr；}函数CI（arr，i，el）{数组.原型.拼接.调用（arr，i，0，el）；返回arr；}函数D（arr，i，el）{返回arr.slice（0，i）.contat（el，arr.slices（i））；}函数E（arr，i，el）{return[…arr.slice（0，i），el，…arr.slime（i）]}函数F（arr，i，el）{返回arr.reduce（（s，a，j）=>（j-i？s.push（a）：s.push（el，a），s），[]）；}// -------------//测试// -------------设arr=[“a”、“b”、“c”、“d”、“e”、“f”]；设log=（n，f）=>{设a=f（[…arr]，3，“新”）；console.log（`${n}:[${a}]`）；};日志（'AI'，AI）；日志（'BI'，BI）；日志（'CI'，CI）；日志（'D'，D）；对数（'E'，E）；日志（'F'，F）；此代码段仅显示测试代码（不执行测试）

Google Chrome上一个小数组的示例结果如下：

我不得不同意Redu的回答，因为splice（）的界面确实有点混乱。cdbajorin给出的响应是“当第二个参数为0时，它只返回一个空数组。如果它大于0，则返回从数组中删除的项“虽然准确，但证明了这一点。

该功能的目的是拼接，或者如Jakob Keller先前所说，“连接或连接，也改变。

您有一个已建立的阵列，现在正在更改，这将涉及添加或删除元素。。。。“考虑到这一点，被删除的元素（如果有的话）的返回值充其量是尴尬的。我100%同意，如果该方法返回了一个看起来很自然的新数组，添加了拼接元素，则该方法可能更适合于链接。然后，您可以对返回的数组执行类似[”19“，”17“].splice（1,0，”18“）.join（”…“）之类的操作。

它返回删除的内容这一事实简直是无稽之谈。如果该方法的目的是“删除一组元素”，而这是它唯一的目的，也许。似乎如果我不知道我已经剪了什么，我可能没有什么理由剪掉这些元素，不是吗？

如果它表现得像concat（）、map（）、reduce（）、slice（）等，从现有数组生成新数组，而不是改变现有数组，那会更好。这些都是可链接的，这是一个重要的问题。链数组操作非常常见。

似乎语言需要朝一个或另一个方向发展，并尽可能地坚持下去。JavaScript具有功能性，声明性较低，这似乎是一种与规范的奇怪偏差。

有两种方法：

const array=['My'，'name'，'Hamza']；array.拼接（2，0，'is'）；console.log（“方法1:”，array.join（“”））；

Or

Array.prototype.insert=函数（索引，项）{此.拼接（索引，0，项）；};const array=['My'，'name'，'Hamza']；array.insert（2，'is'）；console.log（“方法2:”，array.join（“”））；

为了实现正确的函数编程和链接目的，Array.protocol.insert（）的发明是必不可少的。实际上，如果拼接返回的是变异数组，而不是一个完全没有意义的空数组，那么它可能是完美的。因此，这就是：

Array.prototype.insert=函数（i，…rest）{此.拼接（i，0，…其余）返回这个}变量a=[3,4,8,9]；document.write（“<pre>”+JSON.stringify（a.insert（2,5,6,7））+“</pre>”）；

好吧，好吧，上面的Array.prototype.splice（）一个变异了原始数组，有些人可能会抱怨“你不应该修改不属于你的东西”，这可能也是正确的。因此，为了公益，我想提供另一个Array.prototype.insert（），它不会对原始数组进行变异。就这样；

Array.prototype.insert=函数（i，…rest）{返回this.slice（0，i）.contat（rest，this.slict（i））；}变量a=[3,4,8,9]，b=插入件（2,5,6,7）；console.log（JSON.stringify（a））；console.log（JSON.stringify（b））；

除了拼接，您可以使用这种方法，它不会改变原始数组，但会使用添加的项创建一个新数组。当你需要避免突变时，它是有用的。我在这里使用ES6排列运算符。

常量项=[1，2，3，4，5]常量插入=（arr，索引，newItem）=>[//数组的指定索引之前的部分…arr.slice（0，索引），//插入的项目新项目，//指定索引之后的数组的一部分…arr.slice（索引）]常量结果=插入（项，1，10）console.log（结果）// [1, 10, 2, 3, 4, 5]

这可以用于添加多个项目，方法是稍微调整函数，为新项目使用rest运算符，并在返回的结果中传播：

常量项=[1，2，3，4，5]常量插入=（arr，索引，…newItems）=>[//数组的指定索引之前的部分…arr.slice（0，索引），//插入的项目…新项目，//指定索引之后的数组的一部分…arr.slice（索引）]常量结果=插入（项，1，10，20）console.log（结果）// [1, 10, 20, 2, 3, 4, 5]

在这种情况下，我建议使用纯JavaScript。JavaScript中也没有任何insert方法，但我们有一个内置Array方法，它为您完成任务。这叫做拼接。。。

让我们看看什么是拼接（）。。。

splice（）方法通过删除现有元素和/或添加新元素。

好的，假设我们有下面这个数组：

const arr = [1, 2, 3, 4, 5];

我们可以这样删除3个：

arr.splice(arr.indexOf(3), 1);

它将返回3，但如果我们现在检查arr，我们有：

[1, 2, 4, 5]

到目前为止，还不错，但我们如何使用拼接将新元素添加到数组中？

让我们把三个放回。。。

arr.splice(2, 0, 3);

让我们看看我们做了什么。。。

我们再次使用拼接，但这次对于第二个参数，我们传递了0，这意味着我们不想删除任何项，但同时，我们添加了第三个参数，即将在第二个索引中添加的3。。。

您应该知道，我们可以同时删除和添加。例如，现在我们可以做到：

arr.splice(2, 2, 3);

这将删除索引2中的两个项目。然后在索引2处添加3，结果将是：

[1, 2, 3, 5];

这显示了拼接中的每个项目是如何工作的：

array.拼接（开始，删除计数，项目1，项目2，项目3…）