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

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

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