关于数组方法的重构,我认为最重要的是会用这些方法,只有知道要实现什么功能,才能开始去写。而且,这些方法的功能知道的
越是详细,重构的也就越标准,考虑到的问题就越多,最后趋于完美。
数组方法的使用,我前面几篇关于数组的讲得很清楚,想了解的同学可以看看。
下面代码中,我认为比较难理解的地方,基本都添加了注释,不甚理解的可以看看。
好了,不多说,看下面代码。
1.concat的重构
var arr=[1,2,3,4,5,6,7,8,9]; function concat1(array){ var arr1=[]; if(!array || !Array.isArray(array)) return arr1; //判断传参数组存在或者不是数组 for(var i=0;i<array.length;i++){ arr1.push(array[i]); } //遍历传参数组,复制到新数组中,由于形参只有一个,所以这里不涉及后面的实参 if(arguments.length===1) return arr1; //判断实参的个数 for(var j=1;j<arguments.length;j++){ //遍历通过形参传入参数的后面的实参 if(Array.isArray(arguments[j])){ //如果岑仔数组,遍历,复制,同上面 for(var l=0;l<arguments[j].length;l++){ arr1.push(arguments[j][l]); } }else{ arr1.push(arguments[j]); //如果没有数组,直接复制。 } } return arr1; //最后要返回新数组 } var s=concat1(arr,4,1,6,[7,89,95]); console.log(s); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 4, 1, 6, 7, 89, 95]
2.join的重构
function join1(array,seprator){ var str=""; if(!array || !Array.isArray(array)) return str; if(seprator===undefined) seprator=","; //没有输入分隔符,默认为逗号 seprator=String(seprator); //分隔符转换为字符串 for(var i=0;i<array.length;i++){ //遍历数组 if(i===array.length-1){ //判断是否是最后一个元素 str+=array[i]; //最后一个元素后面没有分隔符 }else{ str+=array[i]+seprator; } } return str; //返回字符串 } var s=join1(arr,"+"); console.log(s);
3.forEach 的重构
function forEach1(array,fn){ if(!array || !Array.isArray(array)) console.error("forEach1 is not function"); for(var i=0;i<array.length;i++){ fn(array[i],i,array); // 遍历传入的数组,把数组的元素、下标、数组传入回调函数 } //不返回任何东西 } var s=forEach1(arr,function(item,index,array){ console.log(item) })
4.map 的重构
function map1(array,fn){ if(!array || !Array.isArray(array)) console.error("forEach1 is not function"); var arr1=[]; for(var i=0;i<array.length;i++){ if(array[i]===undefined) continue; //遍历过程中遇到undefined,跳出去这一次循环,后面继续,所以用continue; arr1[i]=fn(array[i],i,array);//新数组的元素是回调函数中返回的结果 } for(var j=0;j<arr1.length;j++){ return arr1[j]===undefined? undefined : arr1; } //如果新数组元素之undefined,返回undefined,如果不是,返回新数组 } var s=map1(arr,function(item,index,array){ return item*2; }) console.log(s)
5.some 的重构
function some1(array,fn){ if(!array || !Array.isArray(array)) console.error("some1 is not function"); for(var i=0;i<array.length-1;i++){ if(array[i]===undefined) continue; if(fn(array[i],i,array)) return true; //如果回调函数返回的是true,则最后返回true } return false; //如果回调函数返回的是false,则最后返回false
}
var s=some1(arr,function(item,index,array){
return (item%2===0);
})
console.log(s)
6.filter的重构
function filter1(array,fn){ var arr1=[]; for (var i=0;i<array.length;i++){ if(array[i]===undefined) continue; if(fn(array[i],i,array)) arr1.push(array[i]); //如果这里用arr1[i]=array[i]; 结果是[empty,2,empty,4......] } //这是因为回调函数返回的是false true false true...,这样arr1的奇数位就是empty,但是用push,arr的奇数位就不会被复制。 return arr1; //这个注释可以用来区分map和filter的区别,map返回的是运算结果,所以用 arr1= } var s=filter1(arr,function(item,index,array){ return item%2===0; }) console.log(s)
7.reduce 的重构
function reduce1(array,fn,initValue){ var i=0; if(initValue===undefined){ i=1; initValue=array[0]; } for(;i<array.length;i++){ initValue=fn(initValue,array[i],i,array); } return initValue; } var s=reduce1(arr,function(value,item,index,array){ return value+item; }) console.log(s)
8.slice 的重构
function slice1(array,start,end){ var arr1=[]; if(!array || !Array.isArray(array)) return arr1; if(start===undefined) start=0; if(end===undefined) end=array.length; start=Number(start); end=Number(end); if(isNaN(start)) start=0; if(isNaN(end)) end=array.length; if(start<0) start=array.length+start; if(end<0) end=array.length+end; for(var i=start;i<end;i++){ arr1.push(array[i]); } return arr1; //返回新数组 } var s=slice1(arr,0,2); console.log(s); //0 1 截取的是长度,从开始到结尾的前一个 这是和splice的区别