push unshift pop shift原理的实现

push unshift pop shift原理的实现

1.push的实现

push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

var arr = [1,2,3,4];
arr.push(7,8,9,10); //返回值8
arr //[1,2,3,4,7,8,9,10]

通过上面对push的说明以及应用,下面我们来实现我们的myPush吧

Array.prototype.myPush = function () {
    for (var i = 0; i < arguments.length; i++) {
        this[this.length] = arguments[i]; //添加完数组了
    }
    return this.length //返回数组添加完的长度
}

关键点:循环遍历 使用最原生的方法进行数组的继续添加 this[this.length] = arguments[i];

下面进行测试

var arr = [1,2,3,4];
arr.myPush(7,8,9,10); //返回值8
arr //[1,2,3,4,7,8,9,10]

2.unshift的实现

unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。

var arr = [1,2,3,4];
arr.unshift(7,8,9,10); //返回值8
arr //[7,8,9,10,1,2,3,4]

通过上面对unshift的说明以及应用,下面我们来实现我们的myUnshift吧

Array.prototype.myUnshift = function () {
    var newArray = [...arguments, ...this];
    //长度也要变化
    this.length = newArray.length;
    //可以改变数组
    for (var i = 0; i < newArray.length; i++) {
        this[i] = newArray[i]
    }
    return this.length;
}

关键点:使用Es6的扩展运算符加入一个新的数组,然后循环遍历对数组进行全新改变

下面进行测试

var arr = [1,2,3,4];
arr.myUnshift(7,8,9,10); //返回值8
arr //[7,8,9,10,1,2,3,4]

3.pop的实现

pop() 方法用于删除数组的最后一个元素并返回删除的元素。

var arr = [1,2,3,4];
arr.pop();  //4
arr  //[1,2,3]

通过上面对pop的说明以及应用,下面我们来实现我们的myPop吧

Array.prototype.myPop = function () {
    //获取最后一个值
    var last = this[this.length - 1];
    this.length--; //删除最后元素
    return last; //返回最后一个值
}

关键点:获取到最后一个值,然后使 this.length--(长度减少即删除元素)

下面进行测试

var arr = [1,2,3,4];
arr.myPop();  //4
arr  //[1,2,3]

4.shift的实现

shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。

var arr = [1,2,3,4];
arr.shift(); //1
arr //[2,3,4]

通过上面对shift的说明以及应用,下面我们来实现我们的myShift吧

Array.prototype.myShift = function () {
    //获取第一个元素
    var first = this[0];
    // 循环往前替代
    for (var i = 1; i <= this.length; i++) {
        this[i - 1] = this[i] //往前替代
    }
    //长度减1
    this.length--;
    //返回第一个值
    return first
}

关键点:获取第一个元素,用以返回 ,然后循环往前替代,把第一个替换掉

下面进行测试

var arr = [1,2,3,4];
arr.myShift(); //1
arr //[2,3,4]

好了,这四种数组增删的方法已经实现完毕,下面进行总结一

1.push实现

关键点:循环遍历 使用最原生的方法进行数组的继续添加 this[this.length] = arguments[i];

2.unshift实现

关键点:使用Es6的扩展运算符加入一个新的数组,然后循环遍历对数组进行全新改变

3.pop实现

关键点:获取到最后一个值,然后使 this.length--(长度减少即删除元素)

4.shift实现

关键点:获取第一个元素,用以返回 ,然后循环往前替代,把第一个替换掉

最后(寄语)

希望大家越努力越幸运!