js slice 和 splice 方法的深入理解

目录

一、 slice() 和 splice() 方法

1、slice() 方法

2、splice() 方法

（1）、删除

（2）、插入（添加）

（3）、替换

二、手写 slice() 和 splice() 方法（中高级前端面试题）★★★★★

1、手写 slice() 方法

 2、手写 splice() 方法

参考：https://blog.csdn.net/mChales_Liu/article/details/103201171#10%E3%80%81slice()%C2%A0%E6%96%B9%E6%B3%95

一、 slice() 和 splice() 方法

1、slice() 方法

• slice() 方法截取当前数组中的一部分，作为新数组返回，不改变原数组；
• slice() 方法可以接受一个或两个参数：要返回项的 起始位置 和 结束位置；
• 若只有一个参数，slice() 方法返回：从该参数指定位置开始，到数组末尾的所有项。
• 若有两个参数，slice() 方法返回：起始位置 和 结束位置之间的项。

var colorArr = ["red", "blue", "black", "gray", "green"];

var colorArr2 = colorArr.slice(1);

var colorArr3 = colorArr.slice(1,3);

console.log(colorArr);                   // ["red", "blue", "black", "gray", "green"]
console.log(colorArr2);                  // ["blue", "black", "gray", "green"]
console.log(colorArr3);                  // ["blue", "black"]

slice 方法还可以用于截取字符串！！！ 

2、splice() 方法

splice() 方法有多种用法，对于数组的项，splice() 方法可以：删除、插入 与 替换。

• splice() 方法的返回值：始终都会返回一个 包含从原始数组中删除的项的新数组，改变原数组。

（1）、删除

• splice() 方法可以删除任意数量的项。
• 需要2个参数：要删除的第一项的位置 和 要删除的项数。

var colorArr = ["red", "blue", "black"];

var colorArr2 = colorArr.splice(0, 2);
console.log(colorArr);                       // ["black"]
console.log(colorArr2);                      // ["red", "blue"]

（2）、插入（添加）

• 可以向指定位置插入任意数量的项。
• 需要三个参数：起始位置、0（要删除的项数） 和 要插入的项。

var colorArr = ["red", "blue", "black"];

var colorArr2 = colorArr.splice(1, 0, "yello", "orange");
console.log(colorArr);                 // ["red", "yello", "orange", "blue", "black"]
console.log(colorArr2);                // []

（3）、替换

• 可以向指定位置插入任意数量的项。
• 需要三个参数：起始位置、要删除的项数 和 要插入的项。

var colorArr = ["red", "blue", "black"];

var colorArr2 = colorArr.splice(1, 1, "yello", "orange");
console.log(colorArr);                     // ["red", "yello", "orange", "black"]
console.log(colorArr2);                    // ["blue"]

二、手写 slice() 和 splice() 方法（中高级前端面试题）★★★★★

1、手写 slice() 方法

Array.prototype.mySlice = function() {
    var arr = [], i = 0, o = 0, len = this.length,
        one = parseInt(arguments[0]),
        two = parseInt(arguments[1]);
    var re = /^[+]{0,1}(\d+)$/;
    if(arguments.length){
        if(!(re.test(arguments[0]) || re.test(arguments[1]))){
            throw new Error("Parameter input error");
        }
        if(one > len || two == 0) return [];  // 只有一个参数并且大于数组长度时返回空数组
        if(one >= 0) {// 第一个参数是正数的时候
            i = one;  
        } else {// 第一个参数是负数的时候
            i = len + one;
        }
        if(two){  // 如果有第二个参数
            if(two > len){// 如果第二个参数大于数组长度时，len 等于数组的长度
                len = len;
            } else if(two >= 0){// 第二个参数为正数的时候
                len = two;
            } else {// 第二个参数为负数的时候
                len = len + two;
            }
        };
    };
    for(i; i < len; i++){
        arr[o] = this[i];
        o++;
    }
    return arr;
}

 2、手写 splice() 方法

Array.prototype.mySplice= function(){
    // 更新原数组
    function changeThis(_this, _content){
        var len = content.length > _this.length ? content.length : _this.length;
        for(var i=0; i<len; i++){
            _this[i] = _content[i];
        }
        for(var i=0; i<len; i++){
            if(!_this[i]){
                _this.pop(i);
            }
        }
        return _this;
    }
    var resultArr=[], content=[], o = 0, L=0, arr=this, len = this.length,
        one = parseInt(arguments[0]),
        two = parseInt(arguments[1]),
        q=one+two;
    var re = /^[+]{0,1}(\d+)$/;
    if(!(re.test(arguments[0]) && re.test(arguments[1]))){
        throw new Error("Parameter input error");
    }
    //删除
    if(arguments.length == 2){
        // 获取删掉的数据
        resultArr = arr.slice(one, q);
        // 更新原数组的数据
        content=arr.slice(0,one).concat(arr.slice(q,arr.length));// 获取删除后剩下的数组数据
        changeThis(arr, content);
        return resultArr;// 删掉的数据
    }else if(arguments.length > 2){
        for(var i=2;i<len-1;i++){
            content.push(arguments[i]);
        }
        //插入
        if(two==0){
            // 更新原数组的数据
            content=arr.slice(0,one).concat(content,arr.slice(one,arr.length));
            changeThis(arr, content);
            return [];// 返回空数组
        //替换
        }else if(two>0){
            // 获取删掉的数据
            resultArr = arr.slice(one, q);
            // 更新原数组的数据
            content=arr.slice(0,one).concat(content,arr.slice(q,arr.length));
            changeThis(arr, content);
            return resultArr;// 替换掉的数据
        }
    }
}