數組方法深刻擴展（遍歷forEach，filter，reduce等）

注：先寫入數據API，並在html中建立了5個li,接下來的數組方法都是經過這個數組來應用，並經過模擬每一個方法來明白其實現的原理。

<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
複製代碼

// 自定義數組api
    var personInfoArr = [
        {name:'王小明',age:'15',sex:'male'},
        {name:'王大明',age:'24',sex:'female'},
        {name:'李寧',age:'19',sex:'female'},
        {name:'李華',age:'20',sex:'male'},
        {name:'劉明',age:'31',sex:'male'}
    ]
    var liArray = document.getElementsByTagName('li');
複製代碼

除了forEach方法，只表示單純的遍歷，其餘方法都是在遍歷的基礎上有多了新的功能，好比篩選、判斷等。

1.forEach()

forEach 遍歷 只有數組能夠用 forEach 函數裏 有兩個參數，第一個匿名函數，第二個參數規定當前數組的this指向，可寫可不寫，默認是指向window 匿名函數中有三個參數，依次是ele,index,self ele,數組裏的當前一條數據 index數組中當前第幾個元素 self 數組自己

//獲取數組中每一個元素裏的名字 ，放到li裏
 	personInfoArr.myforEach(function(ele, index){
        this[index].innerText =  ele.name;
    },liArray)
複製代碼

仿寫：

詳解： __arr是調用這個函數方法的數組 this指向調用本身的元素，param是第二個參數，規定this的指向 arguments能調用 以前必定要寫出數組的length屬性來 arguments[1]是這個數組自己的第二個元素

Array.prototype.myForEach = function(func){
    	var _arr = this,len = _arr.length,param2 = arguments[1] || window;
    	for(var i = 0; i < len; i ++){
    		func.apply(param2,[_arr[i],i,_arr])
    	}
    }
複製代碼

2.filter() 過濾

數組的篩選 條件的過濾 都用這個方法 function->ele,index,self this 須要有返回值 返回true/false 爲新數組存在/不存在的數據 不會改變原數組 filter() => []

篩選性別是male的數據

var newArr = personArr.filter(function(ele, index, self){
		console.log(ele, index, self, this);
		// return true; //直接return true表示所有返回原數組的數據
		// if(ele.sex == 'm'){
		// 	return true;
		// }
		//簡化
		return ele.sex == 'male';
	},{name:'xiao'})
複製代碼

仿寫:

Array.prototype.myFilter = function(func){
		var _arr = this, len = this.length, param2 = arguments[1] || window, newArr = [];
		for(var i = 0; i < len; i ++){
			 func.apply(param2, [_arr[i], i, _arr]) ? newArr.push(_arr[i]) : "";
		}
		return newArr;
	}
   
複製代碼

驗證：篩選性別是female的數據。

var newArr = personArr.myFilter(function(ele, index, self){
    	return ele.sex == 'female';
    })
複製代碼

3.map()

map方法是映射 x -> y 集中化操做 改變新數組 原數組也會改變 會返回新數組 ，參數同上。 function ele index self this

newarr = personArr.map(function(ele,index,self){
	 	// console.log(ele,index,self)
	 	ele.name = ele.name + 10; 
	 	return ele;
	 },{name:'xiao'})

複製代碼

而後將newarr數組裏的數據改變，會發現原數組也會相應改變。

console.log(newarr.name);
	 console.log(personArr.name);
	 newarr[0].name = 'abc';
複製代碼

仿寫

Array.prototype.myMap = function(func){
	 	var _arr = this, len = this.length, param2 = arguments[1] || window, newArr = [];
	 	for(var i = 0; i < len; i ++){
	 		newArr.push(func.apply(param2,[_arr[i], i ,_arr]));
	 	}
	 	return newArr;
	 }
複製代碼

驗證：

var newarr = personArr.myMap(function(ele,index,self){
	 	console.log(ele, index, self);
	 	return ele;
	 })
     newarr[0].name = 'abc';
     console.log(personArr[0].name);
複製代碼

4.every

every方法，遍歷每個元素是否符合某個規則，而後返回true、false 有點像邏輯與。注：數組總體都須要符合一個規則纔會判斷true

判斷數組中每一個人的年齡是否大於十、大於20；

var flag = personArr.every(function(ele,index,self){
	 	// return ele.age > 10;
	 	return ele.age > 20;
	 })
	 console.log(flag);
複製代碼

仿寫

flag 默認爲true,若數組中有一個不符合條件就返回false

Array.prototype.myEvery = function(func){
	 	var _arr = this, len = this.length, param2 = arguments[1] || window, flag = true;
	 	for(var i = 0; i < len; i ++){
	 		if(!func.apply(param2, [_arr[i], i, _arr])){
	 			return false;
	 		}
	 	}
	 	return flag;
	 }
複製代碼

驗證：

var flag = personArr.myEvery(function(ele,index,self){
	 	return ele.age > 10;
	 })
	 console.log(flag);
複製代碼

5.some()

返回true、false 有點像邏輯或 數組中只要有一個符合某個規則，就能夠返回true

檢查數組中是否有人的年齡等於15.

var flag =  personArr.some(function(ele,index,self){
	 	// console.log(ele,index,self,this);
	 	return ele.age = 15;
	 },{name:'xiao'})
複製代碼

仿寫

flag 默認爲false,若數組中有一個不符合條件就返回true

Array.prototype.mySome = function(func){
		var _arr = this, len = this.length, param2 = arguments[1] || window, flag = false;
		for(var i = 0; i < len; i ++){
			if(func.apply(param2, [_arr[i], i, _arr])){
				return true;
			}
		}
		return flag;
	}
複製代碼

驗證:檢查數組中是否有年齡大於15歲的。

var flag =  personArr.mySome(function(ele,index,self){
	 	// console.log(ele,index,self,this);
	 	return ele.age > 15;
	 },{name:'xiao'})
複製代碼

6.reduce //會返回一個值

function 裏有四個形參，分別是：prevValue之前值,curValue當前值(ele),index,self 第二個參數initialValue 初始化值 而且沒有this指向。

注：prevValue[color=#f3423d]第一次是函數的第二個參數[/color]，即定義好的initialValue，[color=#f3423d]第二次以及後面的每一次就都是return的返回值[/color]。

給數組裏每一個人的名字後面依次加1個1，2個1,3個1...

var initialValue = {name:'xiao'}
	 var lastValue = personArr.reduce(function(prevValue, curValue, index, self){
	 	//console.log(prevValue,curValue,index,self,this);
	 	prevValue.name += 1;
	 	return prevValue;
	 },initialValue,{dom:'dom'})
複製代碼

仿寫並增長this指向功能

Array.prototype.myReduce = function(func,initialValue){
	 	var _arr = this, len = this.length, param2 = arguments[2] || window;
	 	for(var i = 0; i < len; i ++){
	 		initialValue = func.apply(param2, [initialValue, _arr[i], i, _arr]);
	 	}
	 	return initialValue;
	 }
	 
複製代碼

驗證：增長了第三個參數，規定this指向。

var initialValue = {name:'xiao'};
	var lastValue = personArr.myReduce(function(prevValue, curValue, index, self){
	 	console.log(prevValue,curValue,index,self,this);
	 	prevValue.name += 1;
	 	return prevValue;
	},initialValue,{dom:'dom'})
複製代碼

reduce方法應用：將下面的cookie變成對象，方便取數據

var cookieStr = "BAIDUID=312BD18E9C1EA1A44A500D7CF28BC5E4:FG1; BIDUPSID=312BD18E9C1EA1A44A500D7CF28BC5E4; PSTM=1540015938; BD_UPN=12314753; cflag=15%3A3; BD_HOME=1; H_PS_PSSID=1455_21117_20697_27400_27408; delPer=0; BD_CK_SAM=1; PSINO=2; sugstore=0; H_PS_645EC=3123Y6%2FHn1JvhHTyU9ByrygMWKesHJ197aJE0a7mBGKmX2M5RycvphNiimY; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598";
複製代碼

function parseCookie(str){
	 	var arrCookie = str.split(';');//用；將字符串拆分紅數組
	 	var cookieObj = {};//空數組
	 	// console.log(arrCookie);
	 	arrCookie[0].split('=');//再將每一個元素用=號拆分
	 	// console.log(arrCookie[0].split('='));
	 	arrCookie.reduce(function(prevValue, curValue, index, self){
	 		// console.log(prevValue, curValue);
	 		// console.log(prevValue, curValue.split('='))//用=號拆成數組
	 		var curArr = curValue.split('=');
	 		//console.log(cookieObj, curArr, curArr[0], curArr[1]);
	 		cookieObj[curArr[0]] = curArr[1];
	 		return prevValue;
	 	}, cookieObj)
	 	return cookieObj;
	 }
	 var cookieObj = parseCookie(cookieStr);
	 console.log(cookieObj);
複製代碼

還有reduceRight方法，做用與reduce方法相同，只是從右開始遍歷數組，這裏就不介紹了。