JavaScript中的一些方法重构

1.重构shift方法

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

思路：想要删除第一个元素，我们只需要把第二个以后的元素往前移一位，然后再让数组长度减一即可。

Array.prototype.myShift = function () {
    // 先获取第一项数组元素 
    var first = this[0];
    for (var i = 0; i < this.length; i++) {
        // 将后面得所有数组元素往前移动一位
        this[i] = this[i + 1];
    }
    // 数组长度减1
    this.length--;
    // 返回第一项
    return first
}
var arr = [1, 2, 3, 4, 5];
var res = arr.myShift();
console.log(res, arr);

结果如图

2.重构unshift方法

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

思路：要添加几个元素，我们就让原数组元素往后移几位，然后将要添加的元素添加到前面。

Array.prototype.myUnshift = function () {
    // console.log(arguments.length);
    // 新数组长度 sum = 原数组长度 + 实参得个数(arguments得长度auguments.length)
    var sum = this.length + arguments.length;
    for (i = sum; i > 0; i--) {
        // 将原数组得中数组元素向后移动argument.length位
        if (i > arguments.length) {
            // 1 2 3 4 5 [4]
            // xxx xxx 1 2 3 4 5 [6]
            // this[6] = this[4]
            this[i - 1] = this[i - 1 - arguments.length]
        } else {
            this[i - 1] = arguments[i - 1]
        }
    }
    // 返回新数组得长度
    return sum
}
var arr = [1, 2, 3, 4, 5];
var res = arr.myUnshift('tom', 'larry');
console.log(res, arr);//['tom','larry','terry',1,2,3,4,5]

结果如图

3.重构forEach方法

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。

思路：这里我们只需要循环遍历数组，将参数传给回调函数执行即可，不需要做其他操作。

Array.prototype.myForEach = function (callback) {
    // callback ---> function(item,index,arr){console.log(item,index,arr)}
    for (var i = 0; i < this.length; i++) {
        callback(this[i], i, this)
    }
}
var arr = [1, 2, 3, 4, 5];
arr.myForEach(function (item, index, arr) {
    console.log(item, index, arr)
});

结果如图

4.重构every方法

every() 方法使用指定函数检测数组中的所有元素：
1、如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
2、如果所有元素都满足条件，则返回 true。

every() 方法有两个有意义的参数，第一个是回调函数（它又有三个参数，分别表示：数组元素的值、索引值、数组本身）；第二个用来指定回调函数的this指向，这里我们可以使用call、apply或者bind方法来绑定this指向。

思路：我们使用循环遍历数组，将参数传给回调函数，又因为回调函数返回的是布尔值，因此我们可以使用它作为判断条件。

Array.prototype.myEvery = function (callback) {
    for (var i = 0; i < this.length; i++) {
        // 找不符合条件表达的数组元素直接返回false 其他返回true
        if (!callback(this[i])) {
            return false
        }
    }
    return true
}
var arr = [1, 2, 3, 4, 5];
var res = arr.myEvery(function (item) {
    console.log('every');
    return item > 0
});
console.log(res);

结果如图

5.重构some方法

some() 方法会依次执行数组的每个元素：
1、 如果有一个元素满足条件，则表达式返回 true , 剩余的元素不会再执行检测。
2、如果没有满足条件的元素，则返回 false。

some()方法和every()类似，不同在于 some()方法只要有一个满足条件就返回true，而every()方法只要有一个不满足就返回false。

Array.prototype.mySome = function(callback){
	for(var i=0;i<this.length;i++){
		// 只要有一个数组元素符合条件表达式 直接返回true
		if(callback(this[i],i,this)){
			return true
		}
	}
	return false
}
var arr = [1,2,3,4,5];
var res = arr.mySome(function(item,index,arr){
	console.log('some')
	return item>5
});
console.log(res);

结果如图

 6.重构pop方法

pop() 方法用于删除数组的最后一个元素，并返回删除的元素。
没有参数，会修改原数组，数组为空时返回 undefined

思路：
我们想要删除数组元素，就要获取到该数组，那么我们如何获取该数组呢？
由于数组调用了pop()方法，因此 this 指向该数组。

获取到该数组之后，我们需要做的就是：
当数组为空时，返回 undefined；
当数组不为空时，先获取最后一个元素的值作为返回值，再删除。

Array.prototype.myPop=function(){
	if(this.length>0){
		// 返回值 返回删除的数组最后一项 
		var last = this[this.length-1];
		// 数组长度减1 
		this.length--;
		return last;
	}else{
		// 数组为空 
		return undefined
	}
}
var arr = [1,2,3,4,5];
var res = arr.myPop();
console.log(res,arr);

 结果如图

7.重构push方法

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

思路：我们要如何获取需要添加的元素，即如何获取push()的参数？
函数中有一个类数组对象 arguments 可以获取到函数的实参。

获取到了需要添加的元素之后，我们只需要把它们遍历添加到数组尾部即可。

Array.prototype.myPush = function () {
    // [1 2 3,] this[this.length]
    // 遍历调用myPush实际参数  把实际参数放在数组的末尾下一项
    for (i = 0; i < arguments.length; i++) {
        this[this.length] = arguments[i]
    }
    return this.length
}
var arr = ['hello', '10', 25];
var res = arr.myPush('tom', 'terry');
console.log(res, arr);

function fc(a, b) {
    // console.log(a,b)
    // 函数内部属性 arguments 专门保存实际参数的类数组对象
    console.log(arguments[3])
}
fc(1, 2, 3, 4, 5)

结果如图

8.重构map方法

Array.prototype.concat, myMap = function (callback) {
    var newArr = [];
    for (var i = 0; i < this.length; i++) {
        newArr.push(callback(this[i], i, this))
    }
    return newArr
}
var arr = [1, 2, 3, 4, 5];
var res = arr.map(function (item, index, arr) {
    return item + 5
});
console.log(res);

 结果如图

9.重构filter方法

Array.prototype.myFilter = function (callback) {
    var newArr = [];
    for (var i = 0; i < this.length; i++) {
        if (callback(this[i])) {
            newArr.push(this[i])
        }
    }
    return newArr;
}

var arr = [1, 2, 3, 4, 5];
var res = arr.myFilter(function (item) {
    return item > 3
})
console.log(res);

结果如图