[Javascript]Javascript编程开发中如何将一个元素对象插入已知数组的指定索引位置?

Javascript 作者: Rector 63阅读 0评论 0收藏 收藏本文

郑重申明:本文未经许可,禁止任何形式转载

问题描述

如题,在Javascript编程开发中,如何将一个元素对象插入已知数组的指定索引位置?类似如下:

arr.insert(index,item);

jQuery中可以做到的,但在Javascript中有没类似的方法呢,要怎么实现这个操作呢?

方案一

Javascript编程开发中,我们可以使用数据的splice方法来实现向数组插入元素的操作。

arr.splice(index,0,item); 方法将向数组arr中的索引位置index插入元素item(其中的参数0表示删除0个元素,即不做删除操作)。

示例如下:

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

方案二

我们也可以自已实现一个数组的prototype方法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’ ]

方案三

另外的自已实现的数组arrayinsert方法。

1.支持多参数:

/* 调用语法:
   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.支持以数组为参数的方法:

/* 调用语法:
   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”

方案四

一种使用Array.reduce()方法实现的方法,如下:

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

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

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

阅读了该文章的人还浏览了...

本文永久链接码友网 » [Javascript]Javascript编程开发中如何将一个元素对象插入已知数组的指定索引位置?

发布于: 2018-05-29 09:47:25
分享扩散:

文章评论

获取验证码