zoukankan      html  css  js  c++  java
  • [Javascript] Functor Basic Intro

    Well, this stuff will be a little bit strange if you deal with it first time.

    Container Object:

    •   Just a wrapper / contianer for values
    •   No Method
    •       No Nouns
    var _Container = function(val){
      this.val = val;
    }
    
    var Container = function(x){
      return new _Container(x);
    }
    
    console.log(Container(3)) // _Container( {val: 3})

    Every time we use Container, it will just add the value to the Container object and assign value to prop val.

    map function on Container:

    This map is not the map what you think it is.... 

    The map you think is the method on the Array.

    Here the map is the one get into the Container, grep the value, then apply function on this value. The return value is still Container.

    _Container.prototype.map = function(f){
      return Container(f(this.val))
    }
    var res = Container("flamethrower").map(function(s){ return _.capitalize(s) })
    console.log(res) //_Container( {val: "Flamethrower"} )

    So in the example, map function goes into the Container, get the value "flamethrower", and apply the function '_.capitialize' to the value and return the new value to the Container.

    Or you can write like this:

    var capitalize = _.capitalize;
    var res = Container("flamethrower").map(capitalize);

    More examples:

    Container([1,2,3]).map(reverse).map(first)
    //=> Container(3)
    
    
    Container("flamethrower").map(length).map(add(1))
    //=> Container(13)

    So "Container"... what you feel about it? It is nothing... you don't need to care about it. Just every time you call map on it, the return value will still inside the Container, so that you can chain map on it.

    Curry map:

    Define a global map function, which use Ramda curry method:

    var map = R.curry(function(f, obj) {
      return obj.map(f) 
    })

    Later we will pass Container as obj, and on our Container, we already defined map function, so we can use here as 'obj.map'.

    So, again, here 'obj.map' --> Means, goes into the obj, grep the value and apply function f.

    So now what we can do:

    Container(3).map(add(1)) // Container(4)
    
    map(add(1), Container(3)) // Container(4), or map(add(1))(Container(3)), since map is curry method

    More exmaples:

    map(R.compose(R.head, R.reverse), Container("dog"))
    //=> Container(“g”)

    So all what we have seen so far, we give a name call "Functor".

    Functor

    “An object or data structure you can map over”

     function: map

    // Exercise 1
    // ==========
    // Use _.add(x,y) and map(f,x) to make a function that increments a value inside a functor
    console.log("--------Start exercise 1--------")
    //map(): Go inside the object and run the function on the value of the object
    //map(): Here map is curry function, so take the function as first arguement and object as second arguement.
    //map(_.add(1), Identity(2)) --> Identity(3)
    var ex1 = map(_.add(1));
    
    
    assertDeepEqual(Identity(3), ex1(Identity(2)))
    console.log("exercise 1...ok!")
    
    
    
    
    
    // Exercise 2
    // ==========
    // Use _.head to get the first element of the list
    var xs = Identity(['do', 'ray', 'me', 'fa', 'so', 'la', 'ti', 'do'])
    console.log("--------Start exercise 2--------")
    
    
    var ex2 = map(_.head)
    
    
    assertDeepEqual(Identity('do'), ex2(xs))
    console.log("exercise 2...ok!")
  • 相关阅读:
    微信中打开 input file 在安卓设备上没有拍照功能
    vue跳转页面在个别手机返回首页index问题
    高德地图在vue-cli中的引用
    express接受图片
    几种在js中循环数组的方法
    vue 组件小例子 this.$parent
    vue.js与后台{{}}冲突的解决办法
    vue弹出框动画
    jq模仿下拉菜单select
    Java字节数组和16进制字符串的互相转化
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5844297.html
Copyright © 2011-2022 走看看