javaScript-重构数组原型对象迭代方法

一、重构every()方法

1.方法介绍

1.使用形式:array.every(function(currentValue,index,arr){函数内容}, thisValue)
2.作用:
	该方法用于检测数组中是否所有元素都符合指定条件。条件由调用该方法时，调用者自定义提供。
3.注意点:
	every() 方法不对空数组进行检测。
	every() 方法不改变原始数组。

参数

方法的参数	参数简介
function(currentValue, index,arr)	该参数是一个回调函数，供数组中的每个元素进行调用。其中的参数 currentValue 为当前数组元素的值（必须有）、index 为当前数组元素的索引值（可选）、arr 当前元素属于的数组对象（可选）。
thisValue	对象作为该执行回调时使用，传递给函数，用作 “this” 的值。 如果省略了 thisValue ，“this” 的值为 “undefined”。简单说，就是用于改变回调函数this的指向。

返回值
布尔值。如果数组所有元素都通过检测返回 true，否则返回 false。

2.重构方法myEvery()

简单思路：
1.定义原型方法 myEvery()，并确定该方法需要传递两个参数。
2.方法体中，先判断调用方法的数组是否为空，是则直接返回undefined。
3.在方法体中，我们需要通过调用参数传进来的回调函数对数组每个元素进行遍历判断。通过for语句遍历数组，并将数组元素作为回调函数参数调用其。
4.当遍历判断过程中出现元素判断的返回结果为false时，结束遍历,并直接返回 false值。
5.若遍历全部的元素均满足条件，则返回true。

方法体:

Array.prototype.myEvery = function(isSatisfy,obj) {//参数 isSatisfy:回调函数，即方法的条件   obj:供回调函数更改this指向的对象  
    //判断  当空数组调用时，不进行检测，并返回undefined
    if (this.length != 0) {
        var n = 0;
        for(var i=0;i<this.length;i++){
            //三目运算符  判断方法被调用时是否传第二个参数(obj)  
            //若obj存在，则将isSatisfy函数中的this指向obj对象再调用isSatisfy   否则直接调用isSatisfy判断。
            if (!(obj?isSatisfy.bind(obj)(this[i]):isSatisfy(this[i],i,this))) {
                return false;
            }
        }
        return true;
    }
    else{
        return undefined;
    }
}

方法的使用:

//首先定义两个数组，供使用
var arr = [11,99,25,64,30,45];
var arr = [20,25,64,30,45];
//方法体    参考上面代码
//定义接收结果的变量
var res，res2;
//点语法 调用方法 并将返回值赋给res
res = arr.myEvery(function(currentValue,index,arr) {
    //自定义条件
    return currentValue >= 12;
});
res2=arr2.myEvery(function(currentValue,index,arr) {
    //自定义条件
    return currentValue >= 12;
});
console.log('是否元素全部满足条件:');
console.log(res);//输出为 false
console.log(res2);//输出为 true

二、重构filter()方法

1.方法介绍

1.使用形式:array.filter(function(currentValue,index,arr){函数内容}, thisValue)
2.作用:
	该方法用于创建一个新的数组，新数组中的元素是通过筛选指定数组中符合条件的所有元素。简单来说，就是返回一个原数组中满足条件的元素组成的新数组。
3.注意点:
  filter() 不会对空数组进行检测。
  filter() 不会改变原始数组。

参数

方法的参数	参数简介
function(currentValue, index,arr)	该参数是一个回调函数，数组中的每个元素都会执行这个函数。参数介绍如下表。
thisValue	用于改变回调函数this的指向。

参数	描述
currentValue	必须。当前元素的值
index	可选。当前元素的索引值
arr	可选。当前元素属于的数组对象

返回值
返回一个数组。该数组包含了符合条件的所有元素。若没有符合条件的元素则返回一个空数组。

2.重构方法myFilter()

简单思路：
1.定义原型方法 myFilter()，并确定该方法需要传递两个参数；
2.方法体中，先判断调用方法的数组是否为空，是则直接返回undefined；
3.返回值为新数组，因此需要在方法中定义一个空数组供使用。此外，还需定义一个number类型的变量，并赋值为0，作为新数组的索引；
3.在方法体中，我们需要通过for语句遍历数组，并将数组元素作为回调函数参数调用其；
4.顺序遍历数组时，每当遇到满足条件的元素时，将该元素存到新数组中对应索引变量位置，并将索引变量自增；
5.循环结束后，将新数组返回。

方法体:

Array.prototype.myFilter = function(isSatisfy) {//参数 isSatisfy:回调函数，即方法的条件   obj:供回调函数更改this指向的对象  
    //判断  当空数组调用时，不进行检测，并返回undefined
    if (this.length != 0) {
        // 新数组，用于存储满足条件的元素
        var arr2 = [];
        //number变量  作为新数组的索引
        var j=0;
        for(var i=0;i<this.length;i++){
            //三目运算符  判断方法被调用时是否传第二个参数(obj)  
            //若obj存在，则将isSatisfy函数中的this指向obj对象再调用isSatisfy   否则直接调用isSatisfy判断。
            if (obj?isSatisfy.bind(obj)(this[i]):isSatisfy(this[i],i,this)) {
                arr2[j]=arr[i];
                j++;
            }
        }
        return arr2;
    }
    else{
        return undefined;
    }
}

方法的使用:

//首先定义一个数组，供使用
var arr = [1,2,3,4,5,6,7,8,9,10];

//方法体  参考上面代码

//定义一个空数组  用于接收方法返回值
var res = [];
//通过点语法调用myFilter()  并将返回值赋给res
//条件  筛选出数组中 能被3整除的数
res = arr.arr.filter(function(n,index,arr) { 
    return n%3==0;
})
//打印返回结果
console.log('原数组：');
console.log(arr);//[1,2,3,4,5,6,7,8,9,10]
console.log('筛选出的新数组：');
console.log(res);//[3,6,9]

三、重构map()方法

1.方法介绍

1.使用形式:array.map(function(currentValue,index,arr){函数内容}, thisValue)
2.作用:
	map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
	map() 方法按照原始数组元素顺序依次处理元素。 
3.注意点:
	map() 不会对空数组进行检测。
	map() 不会改变原始数组。

参数

方法的参数	参数简介
function(currentValue, index,arr)	该参数是一个回调函数，数组中的每个元素都会执行这个函数。参数介绍如下表。
thisValue	用于改变回调函数this的指向。

参数	描述
currentValue	必须。当前元素的值
index	可选。当前元素的索引值
arr	可选。当前元素属于的数组对象

返回值
返回一个数组。数组中的元素为原始数组元素调用函数处理后的值。

2.重构方法myMap()

简单思路：
1.定义原型方法 myMap()，并确定该方法需要传递两个参数；
2.方法体中，先判断调用方法的数组是否为空，是则直接返回undefined；
3.返回值为新数组，因此需要在方法中定义一个空数组供使用；
3.在方法体中，我们需要通过for语句遍历数组，并将数组元素作为回调函数参数调用其；
4.顺序遍历数组时，将经过回调函数（参数中，自定义的处理数组元素方式的函数）处理过的元素逐个保存到新数组中；
5.循环结束后，将新数组返回。

方法体:

Array.prototype.myMop = function(variable,obj) {//参数 isSatisfy:回调函数，即方法的条件   obj:供回调函数更改this指向的对象  
    //判断  当空数组调用时，不进行检测，并返回undefined
    if (this.length != 0) {
        //新数组  用于接收处理之后的数组元素
        var temp=[];
        // var j=0;
        for(var i=0;i<this.length;i++){
            //三目运算符  判断方法被调用时是否传第二个参数(obj)  
            //若obj存在，则将variable函数中的this指向obj对象再调用variable   否则直接调用variable处理元素。
            temp[i]=obj?variable.bind(obj)(this[i]):variable(this[i],i,this);
        }
        return temp;
    }
    else{
        return undefined;
    }
}

方法的使用:

//首先定义两个数组，供使用
var arr = [1,3,5,7,9,11];
var arr2 = ['张三','李四','王五','瑞克','玛姬'];

//方法体 参考上面代码

// 对数字数组的处理   求元素的2次方
var res = arr.myMop(function(currentValue, index,arr) {
    return currentValue*currentValue;
})
//打印结果
console.log(res);//[1, 9, 25, 49, 81, 121]

//对字符串数组的处理   在每个字符串前面加上 ‘我是’
var res2 = arr2.myMop(function(currentValue, index,arr) {
    return '我是'+currentValue;
});
//打印结果
console.log(res2);//['我是张三', '我是李四', '我是王五', '我是瑞克', '我是玛姬']

四、个人总结

• 通过自己对数组原型方法的重构，大大加深了我对数组原型迭代方法的理解。
• 在这个过程中，也忽略了不少细节的问题，比如原型的迭代方法不对空数组进行检测、函数中this的指向等。
• 经历重构的过程，让自我的动手能力、思考能力得到提升。