JS数组学习之splice方法

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

splice方法从array移除n个元素(大于或等于0)，并且可以用新的item替换被移除的元素。参数start是从数组array中移除元素的最开始位置（数组的索引，正负数表示方向，负数表示从数组末尾开始往前数,但是不论正负，移除的方向始终是索引递增的方向）。参数deleteCounts是要移除的元素个数(如果设置为 0，则不会删除)。后面的items用来替换被移除的位置上(可多可少)。splice最终返回一个包含被移除元素的数组，并且原数组也被改变。

splice主要作用是从一个数组中删除元素（改变原数组），slice主要作用是从数组中复制一段元素（不改变原数组），两者有本质区别

用法：

var a = [1,2,3,4,5]；
var b=a.splice(0,2,6,7,8);

//a ==> [6, 7, 8, 3, 4, 5]
//b ==> [1,2]  

原生方法实现分析:

1. 确认开始索引位置 start，最小为0。

2. 确认需要移除的长度 deleConuts，最小为0，

3. 确认原数组变化后的新长度

4. 按照索引位置，获取deleConuts长度的新数组，用于返回

5. 对原数组进行替换items新元素。

最终代码实现

//按照步骤，数组会被分成3个部分，左边,arr_left,中间被删除arr_delete,右边arr_right
Array.prototype.splice = function(start,deletCounts){
    var max = Math.max,
        min = Math.min,
        len = this.length,//数组长度
        insertCounts = max(arguments.length - 2 ,0),//用来替换的数组的个数，不包括参数值中的前2个
        result = [],//存储用来返回的数组
        ;
    //确定索引开始位置
    start = start >= 0 ? start || len + start ;//负数表示从数组末尾开始往前数
    //最多能删除从索引开始到数组结束位置 
    deletCounts = max(min(typeof 'deletCounts' === 'number' ? deletCounts : len ,len - start),0);
    var changeCounts = insertCounts - deletCounts ,//新增-删除
        new_len = len + changeCounts ;//原数组变化后的新长度
    //生成返回的数组    
    for (var i = 0; i < deletCounts; i++) {
        var item = this[start + i];//从索引开始后的元素（包括start）
        if(item !== undefined){
            //超过原数组最大索引值会不存在
            result[i] = item
        }
        if(start + i > len - 1){
            //超过原数组最大索引，后续不需要再处理
            break 
        }
    } 
    //替换被删除项
    var arr_right_length = len - start - deletCounts;//右边arr_right长度
    if(changeCounts > 0 ){
        //新增大于删除，则将数组右边部分arr_right 向右挪动差值个单位，相当于右边的索引都增加 changeCounts(防止有重叠部分，从右往左复制)
        var i = 1;
        while(arr_right_length){
            this[new_len - i] = this[len - i];
            k ++;
            arr_right_length -- ;
        }
    }else if(changeCounts < 0){
        //新增小于删除，则将右边arr_right 向左挪动差值个单位
        var i = start + insertCounts ;//右边新的索引
        for(var k = 0 ;k < arr_right_length ;k++){
            this[i] = this[i - changeCounts] ;//因为是负数，所以 i -changeCounts表示更大
            i ++ ;
        }
        this.length = new_len;//需要手动修改数组长度
    }   
    for(var i = 0;i < insertCounts ; i++){
        //对新增的部分进行赋值处理
        this[start + i] = arguments[2+i]
    }
    //返回被删除的元素
    return result
}

附上一图，希望能够更明了（画工太拙劣）：

image.png

不对的地方还望指导，谢谢！