我正在寻找一个JavaScript数组插入方法,样式如下:
arr.insert(index, item)
最好是在jQuery中,但此时任何JavaScript实现都可以。
我正在寻找一个JavaScript数组插入方法,样式如下:
arr.insert(index, item)
最好是在jQuery中,但此时任何JavaScript实现都可以。
当前回答
如果您想一次将多个元素插入到数组中,请查看以下堆栈溢出答案:用javascript将数组拼接到数组中的更好方法
下面还有一些函数来说明这两个示例:
function insertAt(array, index) {
var arrayToInsert = Array.prototype.splice.apply(arguments, [2]);
return insertArrayAt(array, index, arrayToInsert);
}
function insertArrayAt(array, index, arrayToInsert) {
Array.prototype.splice.apply(array, [index, 0].concat(arrayToInsert));
return array;
}
最后,这里有一个jsFiddle,您可以自己看到它:http://jsfiddle.net/luisperezphd/Wc8aS/
这是如何使用这些函数的:
// if you want to insert specific values whether constants or variables:
insertAt(arr, 1, "x", "y", "z");
// OR if you have an array:
var arrToInsert = ["x", "y", "z"];
insertArrayAt(arr, 1, arrToInsert);
其他回答
这是我在一个应用程序中使用的一个工作函数。
这将检查项目是否存在:
let ifExist = (item, strings = [ '' ], position = 0) => {
// Output into an array with an empty string. Important just in case their isn't any item.
let output = [ '' ];
// Check to see if the item that will be positioned exist.
if (item) {
// Output should be equal to an array of strings.
output = strings;
// Use splice() in order to break the array.
// Use positional parameters to state where to put the item
// and 0 is to not replace an index. Item is the actual item we are placing at the prescribed position.
output.splice(position, 0, item);
}
// Empty string is so we do not concatenate with comma or anything else.
return output.join("");
};
然后我把它叫做下面。
ifExist("friends", [ ' ( ', ' )' ], 1)} // Output: ( friends )
ifExist("friends", [ ' - '], 1)} // Output: - friends
ifExist("friends", [ ':'], 0)} // Output: friends:
在这种情况下,我建议使用纯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…)
解决方案和性能
今天(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上一个小数组的示例结果如下:
自定义数组插入方法
1.具有多个参数和链接支持
/* Syntax:
array.insert(index, value1, value2, ..., valueN) */
Array.prototype.insert = function(index) {
this.splice.apply(this, [index, 0].concat(
Array.prototype.slice.call(arguments, 1)));
return this;
};
它可以插入多个元素(与原生拼接一样)并支持链接:
["a", "b", "c", "d"].insert(2, "X", "Y", "Z").slice(1, 6);
// ["b", "X", "Y", "Z", "c"]
2.支持数组类型参数合并和链接
/* Syntax:
array.insert(index, value1, value2, ..., valueN) */
Array.prototype.insert = function(index) {
index = Math.min(index, this.length);
arguments.length > 1
&& this.splice.apply(this, [index, 0].concat([].pop.call(arguments)))
&& this.insert.apply(this, arguments);
return this;
};
它可以将参数中的数组与给定数组合并,还支持链接:
["a", "b", "c", "d"].insert(2, "V", ["W", "X", "Y"], "Z").join("-");
// "a-b-V-W-X-Y-Z-c-d"
演示:http://jsfiddle.net/UPphH/
您可以使用array.spling执行此操作:
/**
* @param arr: Array
* @param item: item to insert
* @param index: index at which to insert
* @returns array with the inserted element
*/
export function _arrayInsertAt<T>(arr: T[], item: T, index: number) {
return arr.splice(index, 0, item);;
}
阵列切片的文档