数组高阶方法的复习与实现

forEach方法

forEach方法的使用

forEach方法：作用循环遍历数组，接收两个参数,没有返回值。

第一个是一个回调函数；里面可以接收三个参数；第一个参数是数组里的元素，第二个是元素的索引，第三个是数组本身第二个参数是第一个函数this指向，不填默认指向window let arr = [1,2,3]; let obj = {a:1}; arr.forEach(function(item,index,arr){ console.log(item,index,arr,this) },obj) //打印结果：1 0 [1,2,3] {a:1} // 2 1 [1,2,3] {a:1} // 3 2 [1,2,3] {a:1}

forEach方法的实现

Array.prototype.myForEach = function (callback, _this = window) { let len = this.length; // let _this = arguments[1]==undefined?'window':arguments[1]; for (let i = 0; i < len; i++) { callback.call(_this,this[i],i,this); } }

filter方法

filter方法的使用

filter方法：作用是对数组基于遍历进行过滤筛选，接收两个参数，返回一个新数组

第一个是一个回调函数；里面可以接收三个参数；第一个参数是数组里的元素，第二个是元素的索引，第三个是数组本身第二个参数是第一个函数this指向，不填默认指向window筛选通过回调函数返回true和false进行筛选，不填筛选条件，默认返回undefined为false,新数组为[] let arr = [1,2,3,4,5]; let arr1 = [ { name:'a', age:1 }, { name:'b', age:2 }, { name:'c', age:3 } ] let newArr = arr.filter(function(item,index,arr){ return item>2; }) console.log(newArr)//[3,4,5] let newArr1 = arr.filter(function(item,index,arr){ return item.age!==2; }) console.log(newArr1)//[{name:'a',age:1},{name:'c',age:3}]

filter方法的实现

Array.prototype.myFilter = function (cb, _this = window) { let len = this.length; let newArr = []; for (let i = 0; i < this.length; i++) { //cb.apply(_this, [this[i], i, this]) == true ? newArr.push(this[i]) : ''; cb.apply(_this.[this[i],i,this])&&newArr.push(this[i]); } return newArr; }

map方法

map方法的使用

map方法：作用是对数组基于遍历进行映射，接收两个参数，返回一个新数组

第一个是一个回调函数；里面可以接收三个参数；第一个参数是数组里的元素，第二个是元素的索引，第三个是数组本身第二个参数是第一个函数this指向，不填默认指向window let arr = [1, 2, 3, 4, 5] let a = arr.map(function (item, index, arr) { return item + 10; }) console.log(a, arr)//[11,12,13,14,15] [1,2,3,4,5] let arr1 = [ { age: 1, name: 'xx' }, { age: 2, name: 'ss' } ]; let b = arr1.map(function(item,index,arr){ return {age:item.age+10} }) console.log(b)//[{age:11},{age:12}]

map方法的实现

Array.prototype.myMap = function (cb, _this = window) { let len = this.length; let newArr = []; for (let i = 0; i < len; i++) { newArr.push(cb.apply(_this,[this[i],i,this])); } return newArr }

every方法

every方法的使用

every方法：作用是对数组基于遍历进行判断，返回一个布尔值,数组全部满足条件返回true,否则返回false，接收两个参数

第一个是一个回调函数；里面可以接收三个参数；第一个参数是数组里的元素，第二个是元素的索引，第三个是数组本身第二个参数是第一个函数this指向，不填默认指向window let arr = [1,2,3,4,5]; let obj = {}; let flag = arr.every(function(item){ console.log(this) return item>0 },obj) let flag1 = arr.every(function(){ return item>3 }) console.log(flag,flag1)//true false

every方法的实现

Array.prototype.myEvery = function(cb,_this=window){ let len = this.length; let flag = true; for(let i = 0; i < len; i++){ if(!cb.call(_this,this[i],i,this)){ flag = false; break; } } return flag; }

some方法

some方法的使用

some方法：作用是对数组基于遍历进行判断，返回一个布尔值,数组只要有一个满足条件就返回true,否则返回false，接收两个参数

第一个是一个回调函数；里面可以接收三个参数；第一个参数是数组里的元素，第二个是元素的索引，第三个是数组本身第二个参数是第一个函数this指向，不填默认指向window let arr = [1,2,3,4,5]; let obj = {}; let flag = arr.some(function(item){ console.log(item) return item>2 }) let flag1 = arr.some(function(item){ console.log(item,this) return item>5 }) console.log(flag,flag1) //true false

some方法的实现

Array.prototype.mySome = function (cb, _this = window) { let len = this.length; let flag = false; for (let i = 0; i < len; i++) { if (cb.call(_this, this[i], i, this)) { flag = true; break; } } return flag; }

reduce方法

reduce方法的使用

reduce方法：作用是对数组中所有元素调用指定回调函数，返回一个累计结果值,接收两个参数

第一个参数是一个回调函数；里面可以接收4个参数；第一个是初始值，第2个参数是数组里的元素，第3个是元素的索引，第4个是数组本身第二个参数填写了将作为回调函数的第一个值的初始值 let arr = [2,3,4]; let num = 1; arr.reduce(function(prevValue,currentValue,currentIndex,arr){ console.log(prevValue,currentValue,currentIndex) },num) //打印 // 1 2 0 [2,3,4] // undefined 3 1 [2,3,4] // undefined 4 2 [2,3,4] //传入num会作为第一次循环的prevValue,如果不传入num第二个参数，则prevValue会取数组第一项2，currentValue为3，currentIndex为1； //基本用法 数组累加 let sum = arr.reduce(function(prev,current){ return prev+current; }) console.log(sum)//9

reduce方法的实现

Array.prototype.myReduce = function (cb, initValue, _this = window) { let len = this.length; let prevValue = initValue; for (let i = 0; i < len; i++) { prevValue = cb.apply(_this, [prevValue, this[i], i, this]); // console.log(prevValue) } return prevValue; } let arr = [2,3,4]; let b = arr.myReduce((pre,cur)=>pre+cur,1); console.log(b) //10