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; }
仅供个人记录和学习,如有不当或需改进之处,请君指出,感谢万分!!!吸取经验,好好学习。

浙公网安备 33010602011771号