Javascript函数式编程之简单的操作符实现(一)

前提

由于最近在学习响应式编程rxjs库，发现学习rxjs的关键是学会使用各种操作符来操作集合,由于rxjs将操作符抽象封装成为可重用、可组合的构建块，所以需要我们掌握每个操作符的原理，才能更好的应用他们，今天就介绍几个常见的方法原理实现

map实现

    Array.prototype.map=function(callback,context){
        const result=[];
        this.forEach(function(item,index,this){
            this.result.push(callback.call(context,item,index,this))
        })
        return result;
    }
复制代码

filter实现

 Array.prototype.filter=function(callback){
    const result=[];
    this.forEach(function(item,index){
        if(callback(item,index)){
            result.push(item)
        }
    });
  return result;
}
复制代码

concatAll实现(将数组扁平化)

    Array.prototype.concatAll = function() {
        var result = [];
        this.forEach((array) => {
            result.push.apply(result, array);
        });
        return result;
    };
复制代码

concatMap实现

 Array.prototype.concatMap=function(callback){
    return this.map(item=>{
        return callback(item);
    }).concatAll()
}
复制代码

reduce实现

Array.prototype.reduce=function(callback,init){
    let index,result;
    if(this.length === 0){
        return this
    }else{
        if(arguments.length ===1){
          index = 1;
          result = this[0]
        }else if(arguments.length ===2){
          index = 0;
          result = init;
       }else{
         throw "无效的参数"
       }
   while(index<this.length){
        result = callback(result, this[index])
	    index++;
    }
  }
  return [result]
}  
复制代码

zip实现

    Array.zip = function(left, right, callback) {
    	var results = [];
    	for(let i = 0; i < Math.min(left.length, right.length); i++) {
    		results.push(callback(left[i],right[i]));
    	}
    	return results;
    };
复制代码

想一想

var movieLists = [
	{
		name: "Instant Queue",
		videos : [
			{
				"id": 70111470,
				"title": "Die Hard",
				"boxarts": [
					 { 
					    width: 150, 
					    height: 200, 
					    url: "http://cdn-0.nflximg.com/images/2891/DieHard150.jpg"
					 },
					{ 
					    width: 200, 
					    height: 200, 
					    url: "http://cdn-0.nflximg.com/images/2891/DieHard200.jpg" 
					}
				],
				"url": "http://api.netflix.com/catalog/titles/movies/70111470",
				"rating": 4.0,
				"bookmark": []
			},
			{
				"id": 654356453,
				"title": "Bad Boys",
				"boxarts": [
					{ 
					    width: 200, 
					    height: 200, 
					    url: "http://cdn-0.nflximg.com/images/2891/BadBoys200.jpg" },
					{ 
					    width: 150, height: 200, url: "http://cdn-0.nflximg.com/images/2891/BadBoys150.jpg" }

				],
				"url": "http://api.netflix.com/catalog/titles/movies/70111470",
				"rating": 5.0,
				"bookmark": [{ id: 432534, time: 65876586 }]
			}
		]
	},
	{
		name: "New Releases",
		videos: [
			{
				"id": 65432445,
				"title": "The Chamber",
				"boxarts": [
					{ width: 150, height: 200, url: "http://cdn-0.nflximg.com/images/2891/TheChamber150.jpg" },
					{ width: 200, height: 200, url: "http://cdn-0.nflximg.com/images/2891/TheChamber200.jpg" }
				],
				"url": "http://api.netflix.com/catalog/titles/movies/70111470",
				"rating": 4.0,
				"bookmark": []
			},
			{
				"id": 675465,
				"title": "Fracture",
				"boxarts": [
					{ 
					    width: 200, 
					    height: 200, 
					    url: "http://cdn-0.nflximg.com/images/2891/Fracture200.jpg" 
					},
					{ 
					    width: 150, 
					    height: 200, 
					    url: "http://cdn-0.nflximg.com/images/2891/Fracture150.jpg" 
					},
					{ 
					    width: 300, 
					    height: 200, 
					    url: "http://cdn-0.nflximg.com/images/2891/Fracture300.jpg" 
					}
				],
				"url": "http://api.netflix.com/catalog/titles/movies/70111470",
				"rating": 5.0,
				"bookmark": [{ id: 432534, time: 65876586 }]
			}
		]
	}
];

//如果只用以上的方法组合将上面的数组输出以下内容，你能想出几种组合方案呢

/*
[
	{
	    "id": 675465,
	    "title":"Fracture",
	    "boxart":"http://cdn-0.nflximg.com/images/2891/Fracture150.jpg" 
	},
	{
	    "id": 65432445,
	    "title": "TheChamber",
	    "boxart":"http://cdn-0.nflximg.com/images/2891/TheChamber150.jpg" 
	},
	{
	    "id": 654356453,
	    "title": "Bad Boys",
	    "boxart":"http://cdn-0.nflximg.com/images/2891/BadBoys150.jpg" 
	},
	{   
	    "id": 70111470,
	    "title": "Die Hard",
	    "boxart":"http://cdn-0.nflximg.com/images/2891/DieHard150.jpg"
	}
]
*/

复制代码

推荐

JAVASCRIPT函数式编程系列练习题，如果打不开记得翻墙偶

转载于:https://juejin.im/post/5cdff9896fb9a07f0c46510c