ES5中，Array新增API（上）之forEach、filter、map、reduce

朱雀 2022-07-15 05:47 142阅读 0赞

#### bug修复 ####

1。修复了多个兼容性写法的bug（尽量和原生保持一致）；
    2。扩展了数组（让数组中有空元素）；

# demo #

https://github.com/qq20004604/some_demo/tree/master/ES5%E4%B8%AD%EF%BC%8CArray%E7%9A%849%E4%B8%AA%E6%96%B0%E5%A2%9EAPI

# forEach #

原型：

//标准
    forEach(callback[,thisArg])
    
    //简单示例
    Array.forEach(function(item, index, array){
        //回调函数内容
    }, args);

简单说明：

item指遍历数组的当前元素，index指当前元素的索引，array指数组本身，默认情况下this指向Window对象
    
    当存在第二个参数args时，this指向args。

兼容性扩展（对不支持ES5的进行扩展）（下面的兼容性扩展，是根据别人的然后拿来再优化的）：

if (!Array.prototype.forEach) {
        Array.prototype.forEach = function (callback, thisArg) {
            for (var i = 0; i < this.length; i++) {
                //当thisArg为undefined时，JS引擎会将window作为其调用者
                if (this[i])
                    callback.call(thisArg, this[i], i, this);
            }
        }
    }

# filter #

原型：

//标准
    filter(callback[,thisArg])
    
    //简单示例
    Array.filter(function(item, index, array){
        //回调函数内容
    }, args);

简单说明：

3个参数同forEach，args也同forEach，唯一不同的是，函数有回调函数里有return返回值。
    
    简单来说，该方法返回值是一个数组。
    初始时，这个数组是空数组，该方法会通过回调函数遍历整个数组（指Array这个），
    假如当前的元素返回值为true（或者可以隐式转换为true的，比如一个长度大于0的字符串），
    那么会将当前元素添加到被返回的数组中。
    
    例如：[1, 2, 3]，
    回调函数的return是item > 1, 
    当第一个元素1时，1>1为false，因此不会添加到返回的数组中，
    而2和3 >1显然是true，因此会被添加到数组中。最终，返回值是[2,3]。
    
    具体可以见demo。

兼容性扩展：

if (!Array.prototype.filter) {
        Array.prototype.filter = function (callback, thisArg) {
            var temp = [];
            for (var i = 0; i < this.length; i++) {
                if (this[i]) {
                    if (callback.call(thisArg, this[i], i, this)) {
                        //如果callback返回true,则该元素符合过滤条件，将元素压入temp中
                        temp.push(this[i]);
                    }
                }
            }
            return temp;
        }
    }

# map #

原型：

//标准
    map(callback[,thisArg])
    
    //简单示例
    Array.map(function(item, index, array){
        //回调函数内容
    }, args);

简单说明：

3个参数同forEach，args也同forEach，唯一不同的是，函数有回调函数里有return返回值。
    
    简单来说，该方法的返回值也是一个数组（类filter）；
    和filter的区别在于，filter是将原数组元素，选择性加入到新数组中。
    map是将原数组的每个元素，进行处理后，放到新数组中。
    
    例如：[1,2,3]作为原数组，map回调函数内的代码为：
    return item + 10;
    那么就相当于将1+10放到数组中，然后将2+10放到数组中，再将3+10放到数组中。
    结果为：[11, 12, 13]
    
    当然，也可以写更复杂的逻辑，比如if(item>3)时+10，然后else if(item>2)时+5，否则else -10
    那么结果就是[-9, 7, 13]
    
    见DEMO

兼容性扩展：

if (!Array.prototype.map) {
        Array.prototype.map = function (callback, thisArg) {
            var temp = [];
            for (var i = 0; i < this.length; i++) {
                if (this[i]) {
                    var newItem = callback.call(thisArg, this[i], i, this);
                    temp[i] = newItem//将callback返回的新元素压入temp中
                }
            }
            return temp;
        }
    }

# reduce #

原型：

//标准
    reduce(callback[,initialValue])
    
    //简单示例
    arr.reduce(function (previousValue, item, index, Array) {
        return xxx;    //xxx表示省略
    });

简单说明：

首先看回调函数，他有四个参数，
    item是当前元素，别的地方写的是currentValue表示当前值，为了方便理解，我这里写item和上面统一风格
    index是当前元素的索引；
    Array是整个数组（可以通过这个修改源数组）；
    上面3个都很好理解。
    
    第一个参数previousValue是核心。他表示上一次执行回调函数时的返回值。
    例如，有数组[1, 2, 3, 4]
    当我遍历到第二个元素时，回调函数的previousValue的值是1，item的值为2，
    return我写为：return previousValue + item
    那么当遍历到第三个元素时，回调函数的previousValue的值则为3（因为1+2），item的值为3
    当遍历到第四个元素时，previous的值则为6（因为3+3），
    最终reduce的返回值为10（因为6+4）
    
    那么问题来了，为什么没提到遍历第一个元素？
    原因是，当reduce没有第二个参数时，遍历从数组的第二个元素开始，
    第一次执行回调函数的previousValue的值是数组第一个元素的值
    
    当reduce存在第二个参数时（哪怕是null或者undefined），遍历都将从第一个元素开始；
    第一次执行回调函数时（遍历第一个元素），previousValue的值是第二个参数的值，而item是第一个元素的值
    
    所以在使用的时候需要注意，如果需要执行和数组元素个数一样次数的回调函数，那么必须设置reduce的第二个参数；
    如果不设置，那么回到函数次数执行的次数，将比数组元素个数少1。
    
    具体参见demo，我写了3种情况
    第一种是将数组的值相加；
    第二种是将数组的值相乘；
    第三种是将数组的值从reduce给的第二个参数中减去。
    事实上，还可以写第四种，比如说，将数组的值先相乘，然后加上一个数字，再用其结果和下个数组元素。
    即return previousValue * item + 5;这样的，具体写什么，应该根据实际需求来。

数组中有空元素时，不会报错。
    例如：var arr = [1, 2, 3, 4, , 6, 7];
    他会自动跳过4和6中间的元素。
    但下面的兼容性扩展会，

兼容性扩展：

if (!Array.prototype.reduce) {
        Array.prototype.reduce = function (callback, initialValue) {
            var previousValue = initialValue || this[0];//如果不指定intialValue,则默认为数组的第一个元素
            //如果不指定initialValue（即第二个参数），i从1（第二个元素）开始遍历，否则就从0（第一个元素）开始遍历
            for (var i = initialValue ? 0 : 1; i < this.length; i++) {
                //previousValue 累加每一次返回的结果
                if (this[i])
                    previousValue = callback(previousValue, this[i], i, this.toString());
            }
            return previousValue;
        }
    }