javascript js - 如何在特定索引处将项插入数组?




array splice (10)

我正在寻找一个Javascript数组插入方法,风格为:

arr.insert(index, item)

最好是在jQuery中,但任何Javascript实现都会在这一点上完成。


Answers

我推荐在这种情况下使用纯JavaScript,JavaScript中也没有插入方法,但是我们有一个方法,它是一个内置的Array方法,它可以为你完成工作,它叫做splice ...

让我们看看什么是splice() ......

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

好的,想象我们下面有这个数组:

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

我们可以删除3这样:

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

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

[1, 2, 4, 5]

到目前为止,这么好,但我们如何使用splice向阵列添加新元素? 让我们回到3 ...

arr.splice(2, 0, 3);

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

我们再次使用拼接 ,但是这次对于第二个参数,我们传递0 ,意味着我们想要删除没有项目,但同时,我们添加第三个参数,即将在第二个索引处添加的3个...

您应该知道,我们可以同时删除添加 ,例如现在我们可以这样做:

arr.splice(2, 2, 3);

这将删除索引2处的2个项目 ,然后在索引2处添加3 ,结果将为:

[1, 2, 3, 5];

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

array.splice(start,deleteCount,item1,item2,item3 ......)


你想要的是本机数组对象上的splice功能。

arr.splice(index, 0, item);item插入到指定索引的arr中(首先删除0项,也就是说,它只是一个插入)。

在这个例子中,我们将创建一个数组并将一个元素添加到索引2中:

var arr = [];
arr[0] = "Jani";
arr[1] = "Hege";
arr[2] = "Stale";
arr[3] = "Kai Jim";
arr[4] = "Borge";

console.log(arr.join());
arr.splice(2, 0, "Lene");
console.log(arr.join());


为了正确的函数编程和链接目的, Array.prototype.insert()的发明是必不可少的。 实际上,如果它已经返回变异数组而不是完全没有意义的空数组,那么splice可能是完美的。 所以这就是它

Array.prototype.insert = function(i,...rest){
  this.splice(i,0,...rest)
  return this
}

var 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 = function(i,...rest){
  return this.slice(0,i).concat(rest,this.slice(i));
}

var a = [3,4,8,9],
    b = a.insert(2,5,6,7);
console.log(JSON.stringify(a));
console.log(JSON.stringify(b));


即使已经回答了这个问题,我还是将这个说明添加到另一种方法中。

我想将一个已知数量的项放入一个数组中,放入特定的位置,因为它们来自一个“关联数组”(即一个对象),根据定义,它不能保证按排序顺序排列。 我希望得到的数组是一个对象数组,但由于数组保证了它们的顺序,所以对象在数组中按特定的顺序排列。 所以我这样做了。

首先是源对象,从PostgreSQL检索的JSONB字符串。 我想让它按每个子对象中的“order”属性排序。

var jsonb_str = '{"one": {"abbr": "", "order": 3}, "two": {"abbr": "", "order": 4}, "three": {"abbr": "", "order": 5}, "initialize": {"abbr": "init", "order": 1}, "start": {"abbr": "", "order": 2}}';

var jsonb_obj = JSON.parse(jsonb_str);

由于对象中的节点数是已知的,因此我首先创建一个具有指定长度的数组:

var obj_length = Object.keys(jsonb_obj).length;
var sorted_array = new Array(obj_length);

然后迭代对象,将新创建的临时对象放入阵列中的所需位置,而不进行任何“排序”。

for (var key of Object.keys(jsonb_obj)) {
  var tobj = {};
  tobj[key] = jsonb_obj[key].abbr;

  var position = jsonb_obj[key].order - 1;
  sorted_array[position] = tobj;
}

console.dir(sorted_array);

除了拼接之外,您可以使用这种方法,它不会改变原始数组,但会创建一个带有添加项的新数组。 你应该尽可能避免变异。 我在这里使用ES6传播运营商。

const items = [1, 2, 3, 4, 5]

const insert = (arr, index, newItem) => [
  // part of the array before the specified index
  ...arr.slice(0, index),
  // inserted item
  newItem,
  // part of the array after the specified index
  ...arr.slice(index)
]

const result = insert(items, 1, 10)

console.log(result)
// [1, 10, 2, 3, 4, 5]

这可以用来添加多个项目,通过稍微调整函数来使用其余运算符来处理新项目,并将其传播到返回的结果中

const items = [1, 2, 3, 4, 5]

const insert = (arr, index, ...newItems) => [
  // part of the array before the specified index
  ...arr.slice(0, index),
  // inserted items
  ...newItems,
  // part of the array after the specified index
  ...arr.slice(index)
]

const result = insert(items, 1, 10, 20)

console.log(result)
// [1, 10, 20, 2, 3, 4, 5]


如果要一次将多个元素插入到数组中,请查看此答案: 在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/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);

在特定索引处附加单个元素

//Append at specific position(here at index 1)
arrName.splice(1, 0,'newName1');
//1: index number, 0: number of element to remove, newName1: new element


//Append at specific position (here at index 3)
arrName[3] = 'newName1';

在特定索引处附加多个元素

//Append from index number 1
arrName.splice(1, 0,'newElemenet1', 'newElemenet2', 'newElemenet3');
//1: index number from where append start, 
//0: number of element to remove, 
//newElemenet1,2,3: new elements

我试过这个,工作正常!

var initialArr = ["India","China","Japan","USA"];
initialArr.splice(index, 0, item);

索引是您要插入或删除元素的位置。 0即第二个参数定义要删除的索引中的元素数项是要在数组中创建的新条目。 它可以是一个或多个。

initialArr.splice(2, 0, "Nigeria");
initialArr.splice(2, 0, "Australia","UK");

您可以通过执行以下Array.insert来实现Array.insert方法:

Array.prototype.insert = function ( index, item ) {
    this.splice( index, 0, item );
};

然后你就可以使用它:

var arr = [ 'A', 'B', 'D', 'E' ];
arr.insert(2, 'C');

// => arr == [ 'A', 'B', 'C', 'D', 'E' ]

在大多数情况下,最好使用插件。 认真。 我会在这里吹捧我的 。 当然也有其他的。 但请检查他们是否真的避免了首先要插入插件的陷阱 - 并非所有插件都这样做。

我已经写过关于在elsewhere使用插件的原因。 简而言之,这里的大多数答案都是基于这一点

$('html, body').animate( { scrollTop: $target.offset().top }, duration );

是坏的UX。

  • 动画不响应用户操作。 即使用户点击,点击或尝试滚动,它也会继续。

  • 如果动画的起点接近目标元素,则动画非常缓慢。

  • 如果目标元素放置在页面底部附近,则无法滚动到窗口顶部。 滚动动画在中间运动时突然停止。

为了处理这些问题(以及elsewhere ),您可以使用我的插件jQuery.scrollable 。 电话就变成了

$( window ).scrollTo( targetPosition );

就是这样。 当然,还有更多的选择

关于目标位置,在大多数情况下, $target.offset().top完成这项工作。 但请注意,返回的值没有考虑html元素的边框( 请参阅此演示 )。 如果您在任何情况下都需要目标位置准确,最好使用

targetPosition = $( window ).scrollTop() + $target[0].getBoundingClientRect().top;

即使设置了html元素的边框,这也是有效的。





javascript jquery arrays insert