map、forEach、reduce、filter、indexOf、some、every的兼容写法

浏览器IE9+才支持 map、foreach、reduce、filter、indexOf、some、every这些数组方法,那么当浏览器不支持时,我们该如何兼容?

1、forEach

Array.prototype.myForEach = function(fn,context) {
    context = context || window;//如果不传第二个参数,回调函数里面的this指向全局
    if(Array.prototype.forEach) return this.forEach(fn,context);
    for(var i=0;i<this.length;i++){
        fn.call(context,this[i],i,this)
    }    
}

2、map

Array.prototype.myMap = function(fn,context) {
    context = context || window;//1、如果不传第二个参数,回调函数里面的this指向全局
    if(Array.prototype.map) return this.map(fn,context);//2、如果浏览器支持map,就直接使用map方法
    var arr = [];
    for(var i=0;i<this.length;i++){//3、遍历原数组,执行回调函数,映射到新数组
        arr[i] = fn.call(context,this[i],i,this)
    }
    return arr;
}

3、reduce

var data = [1, 2, 3, 4];
Array.prototype.myReduce = function(fn,num) {
    var arr = this,
        i = 0,
        initialValue;
    initialValue = (num === undefined)? arr.shift():num;//如果未提供初始值,则将使用数组中的第一个元素。
    if(Array.prototype.reduce)return this.reduce(fn,initialValue)
    while(arr.length !== 0){
        var a = arr.shift();
        initialValue = fn.call(null,initialValue,a,i,arr)
        i++;
    }
    return initialValue;
}
var b = data.myReduce(function (total,num) {
  return total * num;
});
console.log(b);//24

不足:希望大佬们帮忙指正
var b = data.myReduce(function (total,num) {
   return total * num;
},'1');//24,理论上应该输出NaN

4、filter

var data = [0,1, 2, 3, 4],obj = {'key':1}
Array.prototype.myFilter = function(fn,context) {
    context = context || window;//1、如果不传第二个参数,回调函数里面的this指向全局
    if(Array.prototype.filter) return this.filter(fn,context);//2、如果浏览器支持map,就直接使用map方法
    var arr = [];
    for(var i=0;i<this.length;i++){//3、遍历原数组,执行回调函数。
        var c = fn.call(context,this[i],i,this);//查看数组元素是否符合条件,如果符合,返回true,否则返回false
        if(c)arr.push(this[i])
    }
    return arr;
}
var b = data.myFilter(function (v) {
    console.log(this);
    return v > 0;
},obj);
console.log(b);//[1,2,3,4]

5、indexOf

Array.prototype.indexOf = function(searchElement, fromIndex) {
    var k,
        O = this,
        len = O.length,
        n = fromIndex || 0;
    if (len === 0) return -1;//数组长度为0,证明肯定不存在,返回-1。
    if (n >= len) return -1;//开始搜索的索引值大于或等于数组长度,证明肯定不存在,返回-1。
    //如果参数中提供的索引值是一个负值,则将其作为数组末尾的一个抵消,即-1表示从最后一个元素开始查找。
    //如果抵消后的索引值仍小于0,则整个数组都将会被查询。
    k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
    while (k < len) {
        if (k in O && O[k] === searchElement) return k;
        k++;
    }
    return -1;
};

6、some

var data = [0,1, 2, 3, 4],obj = {'key':1}
Array.prototype.myFilter = function(fn,context) {
    context = context || window;//1、如果不传第二个参数,回调函数里面的this指向全局
    if(Array.prototype.filter) return this.filter(fn,context);//2、如果浏览器支持map,就直接使用map方法
    var arr = [];
    for(var i=0;i<this.length;i++){//3、遍历原数组,执行回调函数。
        if(fn.call(context,this[i],i,this))arr.push(this[i]);//查看数组元素是否符合条件,如果符合,返回true,否则返回false
    }
    return arr;
}
var b = data.myFilter(function (v) {
    return v > 0;
},obj);
console.log(b);//[1,2,3,4]

7、every

Array.prototype.myEvery = function(fn,context){
    var context = context||window;
    var newArr = [],arr = this;
    if(Array.prototype.every)return this.every(fn,context)
    for(var i=0;i<arr.length;i++){
        if(!fn.call(context,arr[i],i,arr))return false;
    }
    return true;
}

仅供个人记录和学习,如有不当或需改进之处,请君指出,感谢万分!!!吸取经验,好好学习。

posted @ 2018-08-29 14:49  Westbrook维  阅读(515)  评论(0)    收藏  举报