注：先写入数据API，并在html中创建了5个li,接下来的数组方法都是通过这个数组来应用，并通过模拟每个方法来明白其实现的原理。

   <ul><li></li><li></li><li></li><li></li><li></li></ul>
复制代码

 // 自定义数组apivar 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

判断数组中每个人的年龄是否大于10、大于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方法相同，只是从右开始遍历数组，这里就不介绍了。