如何将项目插入到特定索引(JavaScript)的数组中?

2020/10/25 16:32 · jquery ·  · 0评论

我正在寻找一种JavaScript数组插入方法,其样式为:

arr.insert(index, item)

最好是在jQuery中,但此时任何JavaScript实现都可以。

您想要的是splice本机数组对象上的函数。

arr.splice(index, 0, item);将插入itemarr指定的索引处(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.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' ]

除了拼接以外,您可以使用这种方法,该方法不会突变原始数组,但会使用添加的项创建一个新数组。通常应尽可能避免突变。我在这里使用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]

通过稍微调整函数以将rest运算符用于新项,可以将其添加到多个项中,并在返回的结果中也进行扩展

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]

自定义数组insert方法

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

它可以插入多个元素(如本机splice一样)并支持链接:

["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/

如果您想一次将多个元素插入数组中,请查看此Stack Overflow答案:将数组拼接成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);

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

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

我建议在这种情况下使用纯JavaScriptJavaScript中也没有insert方法,但是我们有一个 内置的Array方法,它可以为您完成工作,它称为splice ...。

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

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

好吧,假设我们下面有这个数组:

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

我们可以这样删除3

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

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

[1, 2, 4, 5]

到目前为止,一切都很好,但是如何使用拼接将新元素添加到数组中呢?让我们把3放回去...

arr.splice(2, 0, 3);

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

我们再次使用splice,但是这次我们为第二个参数传递了0,这意味着我们不希望删除任何项目,但是与此同时,我们添加了第三个参数3,它将在第二个索引处添加...

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

arr.splice(2, 2, 3);

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

[1, 2, 3, 5];

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

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

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

//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

这有两种方法:

const array = [ 'My', 'name', 'Hamza' ];

array.splice(2, 0, 'is');

console.log("Method 1 : ", array.join(" "));

要么

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

const array = [ 'My', 'name', 'Hamza' ];
array.insert(2, 'is');

console.log("Method 2 : ", array.join(" "));

另一种可能的解决方案,使用Array#reduce

const arr = ["apple", "orange", "raspberry"];
const arr2 = [1, 2, 4];

const insert = (arr, item, index) =>
  arr.reduce(function(s, a, i) {
    i === index ? s.push(item, a) : s.push(a);
    return s;
  }, []); 

console.log(insert(arr, "banana", 1));
console.log(insert(arr2, 3, 2))

Array#splice()除非您确实想避免对数组进行变异,否则这是一种方法。鉴于2个阵列arr1arr2,这里是你会怎么插入的内容arr2arr1第一个元素后:

const arr1 = ['a', 'd', 'e'];
const arr2 = ['b', 'c'];

arr1.splice(1, 0, ...arr2); // arr1 now contains ['a', 'b', 'c', 'd', 'e']

console.log(arr1)

如果您担心变异的阵列(例如,如果使用Immutable.js),您可以改用slice(),不要与混淆splice()'p'

const arr3 = [...arr1.slice(0, 1), ...arr2, ...arr1.slice(1)];

即使已经回答了这个问题,我仍在添加此注释,以供选择。

我想将已知数量的项目放置到数组中的特定位置,因为它们来自“关联数组”(即对象),从定义上讲,这些数组不能保证按排序的顺序排列。我希望结果数组是对象数组,但是对象要按数组中的特定顺序排列,因为数组可以保证它们的顺序。所以我做到了。

首先是源对象,即从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);

任何仍然对此有疑问并尝试了以上所有选项却从未获得它的人。我正在分享我的解决方案,这是要考虑到您不想显式地声明对象与数组的属性。

function isIdentical(left, right){
    return JSON.stringify(left) === JSON.stringify(right);
}

function contains(array, obj){
    let count = 0;
    array.map((cur) => {
          if(this.isIdentical(cur, obj)) count++;
    });
    return count > 0;
}

这是对引用数组进行迭代并将其与您要检查的对象进行比较,将它们都转换为字符串,然后在匹配时进行迭代的组合。然后,您可以数数。这可以改善,但这是我解决的地方。希望这可以帮助。

采取减少收益的方法如下:

function insert(arr, val, index) {
    return index >= arr.length 
        ? arr.concat(val)
        : arr.reduce((prev, x, i) => prev.concat(i === index ? [val, x] : x), []);
}

因此,以这种方式,我们可以返回在索引处插入元素的新数组(这是一种很酷的功能方式-比使用push或splice更好),并且如果索引大于数组的长度,则将其插入在最后。

我试过了,它工作正常!

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

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

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

这是我在一个应用程序中使用的工作功能。

这检查项目是否退出

let ifExist = (item, strings = [ '' ], position = 0) => {
     // output into an array with empty string. Important just in case their is no item. 
    let output = [ '' ];
    // check to see if the item that will be positioned exist.
    if (item) {
        // output should equal to array of strings. 
        output = strings;
       // use splice in order to break the array. 
       // use positition param 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: 

线程有点旧,但是我必须同意上面的Redu,因为拼接肯定有一些令人困惑的接口。cdbajorin给出的响应是:“仅当第二个参数为0时,它才返回一个空数组。如果它大于0,则它返回从数组中删除的项”,这是正确的。该函数的目的是进行拼接,或者如Jakob Keller先前所述,“进行连接或连接,也进行更改。您现在要更改的已建立数组将涉及添加或删除元素……。”返回的元素的值(如果有的话)充其量是尴尬的。我100%同意,如果此方法返回了看起来很自然的方法,那么它可能会更适合于链接,这是一个添加了拼接元素的新数组。然后,您可以对返回的数组执行[[19“,” 17“]。splice(1,0,” 18“)。join(” ...“)之类的操作。它返回已删除内容的事实只是个废话恕我直言。如果该方法的目的是“切出一组元素”,那仅仅是目的。似乎,如果我不知道要切出的内容,可能没有什么理由要切掉那些元素,不是吗?如果它的行为像concat,map,reduce,slice等,那将是更好的选择,在这种情况下,将使用现有数组创建新数组,而不是对现有数组进行突变。这些都是可链接的,这是一个重要的问题。链数组操作相当普遍。似乎该语言需要朝着另一个方向发展,并尽可能地坚持下去。Javascript具有功能性且声明性较差,这似乎是对规范的奇怪偏离。

解决方案与性能

今天(2020.04.24),我对大型和小型阵列的选定解决方案进行了测试。我在MacOs High Sierra 10.13.6,Chrome 81.0,Safari 13.1,Firefox 75.0上进行了测试。

结论

对于所有浏览器

  • 令人惊讶的是,对于小型阵列,基于slicereduce(D,E,F)的非现场解决方案通常比现场解决方案快10到100倍
  • 对于大型阵列,基于splice(AI,BI,CI)的就地解决方案最快(有时约100倍-但取决于阵列大小)
  • 小型阵列的BI解决方案最慢
  • 对于大型阵列,E解决方案最慢

在此处输入图片说明

细节

测试分为两组:就地解决方案(AI,BI,CI)和非就地解决方案(D,E,F),并且针对两种情况进行了测试

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

经测试的代码显示在下面的代码片段中

jsfiddle

铬上小阵列的示例结果如下

在此处输入图片说明

我不喜欢安全,我用这个

   Array.prototype.Insert = function (item, before) {
        if (!item) return;
        if (before == null || before < 0 || before > this.length - 1) {
            this.push(item);
            return;
        }
        this.splice(before, 0,item );
    }
    
    
   var t = ["a","b"]
   
   t.Insert("v",1)
    
    console.log(t )

不变的插入

splice如果您需要就地插入数组,那么使用method无疑是最好的答案。

但是,如果您正在寻找一个返回新的更新数组而不是在插入时对原始数组进行变异的不可变函数,则可以使用以下函数。

function insert(array, index) {
  const items = Array.prototype.slice.call(arguments, 2);

  return [].concat(array.slice(0, index), items, array.slice(index));
}

const list = ['one', 'two', 'three'];

const list1 = insert(list, 0, 'zero'); // Insert single item
const list2 = insert(list, 3, 'four', 'five', 'six'); // Insert multiple


console.log('Original list: ', list);
console.log('Inserted list1: ', list1);
console.log('Inserted list2: ', list2);

注意:这是ES2015之前的方法,因此适用于旧版本和新版本的浏览器。

如果您使用的是ES6,则也可以尝试使用rest参数看到这个答案。

本文地址:http://jquery.askforanswer.com/ruhejiangxiangmucharudaotedingsuoyinjavascriptdeshuzuzhong.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!