zoukankan      html  css  js  c++  java
  • [Ramda] Lens in Depth

    In this post, we are going to see how to use Ramda Lens.

    For example, we have data:

    const {log} = require('./lib/log');
    const R = require('ramda');
    
    const band = {
        name: 'K.M.F.D.M',
        members: {
            current: [
                {name: 'Sascha Konictzko', plays: ['vocals', 'synth', 'guitar', 'bass']},
                {name: 'Lucia Cifarelli', plays: ['vocals', 'synth']},
                {name: 'Jules Hodgson', plays: ['guitar', 'bass', 'synth']},
                {name: 'Steve While', plays: ['guitar']}
            ],
            past: [
                {name: 'Raymond Watts', plays: ['vocals', 'synth']},
                {name: 'En Esch', plays: ['vocals', 'drums', 'guitar', 'synth']},
                {name: 'Gunter', plays: ['guitar', 'synth']}
            ]
        }
    };

    R.lens:

    R.lens takes a getter and a setter: 

    const name = R.lens(R.prop('name'), R.assoc('name'));
    log(R.view(name, band)); // K.M.F.D.M
    log(R.set(name, 'M.D.F.M.K', band));

    R.lensProp: 

    There is a shorter way to do getter/setter partten:

    const name = R.lensProp('name');
    const makeLower = a => a.toLowerCase();
    log('over lensProp: ', R.over(name, makeLower, band)); // name: "k.m.f.d.m"
    log('over compose: ', R.compose(R.view(name), R.over(name, makeLower))(band)); // name: "k.m.f.d.m"

    R.lensPath:

    const currentMemebers = R.lensPath(['members', 'current']);
    log('view path', R.view(currentMemebers, band))

    We can also combine two lens together:

    const name = R.lensProp('name');
    const currentMemebers = R.lensPath(['members', 'current']);
    //log('view path', R.view(currentMemebers, band))
    const makeLower = a => a.toLowerCase();
    // Use two lens together
    const lowerName = R.over(name, makeLower);
    const lowerMembers = R.over(currentMemebers, R.map(lowerName));
    console.log('new lower name', lowerMembers(band));

    R.lensIndex:

    const first = R.lensIndex(0)
    const getFistCurrentMember = R.compose(
        R.view(first),
        R.view(currentMemebers)
    )
    console.log(getFistCurrentMember(band)) // { name: 'Sascha Konictzko', plays: [ 'vocals', 'synth', 'guitar', 'bass' ] }

    Actually there is a better way to do this: by using R.compose(), one thing to notice is that, when working with lens, compose should go from left to right, instead of right to left. This is because how lens works in code.

    In our example:

    const band = {
        name: 'K.M.F.D.M',
        members: {
            current: [
                {name: 'Sascha Konictzko', plays: ['vocals', 'synth', 'guitar', 'bass']},
                {name: 'Lucia Cifarelli', plays: ['vocals', 'synth']},
                {name: 'Jules Hodgson', plays: ['guitar', 'bass', 'synth']},
                {name: 'Steve While', plays: ['guitar']}
            ],
            past: [
                {name: 'Raymond Watts', plays: ['vocals', 'synth']},
                {name: 'En Esch', plays: ['vocals', 'drums', 'guitar', 'synth']},
                {name: 'Gunter', plays: ['guitar', 'synth']}
            ]
        }
    };

    We should get 'members' first then 'current' first member:

    const currentMemebers = R.lensPath(['members', 'current']);
    const first = R.lensIndex(0)
    const firstCurrentMember = R.compose(
        currentMemebers, first
    )
    console.log(R.view(firstCurrentMember, band))

    You can think this is similar to Javascript Stack when using R.compose(lens1, len2).


    Example: 

    Using the same data from previous example:

    const band = {
        name: 'K.M.F.D.M',
        members: {
            current: [
                {name: 'Sascha Konictzko', plays: ['vocals', 'synth', 'guitar', 'bass']},
                {name: 'Lucia Cifarelli', plays: ['vocals', 'synth']},
                {name: 'Jules Hodgson', plays: ['guitar', 'bass', 'synth']},
                {name: 'Steve While', plays: ['guitar']}
            ],
            past: [
                {name: 'Raymond Watts', plays: ['vocals', 'synth']},
                {name: 'En Esch', plays: ['vocals', 'drums', 'guitar', 'synth']},
                {name: 'Gunter', plays: ['guitar', 'synth']}
            ]
        }
    };

    Requirements:

    /**
     * 1. Lowercase the name
     * 2. Omit the plays from the past
     * 3. Lowercase the current name
     * 4. Create 'all' under members combine 'current' & 'past'
     * 5. Pick get name and to lowercase for 'members.all'
     */

     Final results should be:

     /**
      * {
      "name": "k.m.f.d.m",
      "members": {
        "current": [
          {
            "name": "sascha konictzko",
            "plays": [
              "vocals",
              "synth",
              "guitar",
              "bass"
            ]
          },
          {
            "name": "lucia cifarelli",
            "plays": [
              "vocals",
              "synth"
            ]
          },
          {
            "name": "jules hodgson",
            "plays": [
              "guitar",
              "bass",
              "synth"
            ]
          },
          {
            "name": "steve while",
            "plays": [
              "guitar"
            ]
          }
        ],
        "past": [
          {
            "name": "Raymond Watts"
          },
          {
            "name": "En Esch"
          },
          {
            "name": "Gunter"
          }
        ],
        "all": [
          "sascha konictzko",
          "lucia cifarelli",
          "jules hodgson",
          "steve while",
          "raymond watts",
          "en esch",
          "gunter"
        ]
      }
    }
      */

     -----

    Answer:

    const R = require('ramda');
    
    const band = {
        name: 'K.M.F.D.M',
        members: {
            current: [
                {name: 'Sascha Konictzko', plays: ['vocals', 'synth', 'guitar', 'bass']},
                {name: 'Lucia Cifarelli', plays: ['vocals', 'synth']},
                {name: 'Jules Hodgson', plays: ['guitar', 'bass', 'synth']},
                {name: 'Steve While', plays: ['guitar']}
            ],
            past: [
                {name: 'Raymond Watts', plays: ['vocals', 'synth']},
                {name: 'En Esch', plays: ['vocals', 'drums', 'guitar', 'synth']},
                {name: 'Gunter', plays: ['guitar', 'synth']}
            ]
        }
    };
    
    /**
     * 1. Lowercase the name
     * 2. Omit the plays from the past
     * 3. Lowercase the current name
     */
     // makeLower :: s -> s
     const makeLower = s => s.toLowerCase();
     // lowerName :: obj a -> obj b
     const lowerName  = R.compose(makeLower, R.prop('name'));
     const name = R.lensProp('name');
     const pastMemebers = R.lensPath(['members', 'past']);
     const currentMemebers = R.lensPath(['members', 'current']);
    
     // Mapping over NAME lens, make string to lowercase
     const lowerBandName = R.over(
         name, makeLower
     );
     // Mapping over 'memebers.past' Lens, omit 'plays' prop
     const omitPastPlays = R.over(
         pastMemebers, R.map(R.omit(['plays']))
     );
     // Mapping over 'members.current' Lens, for each 'name' prop, make string to lowercase
     const lowerCurrentMemebersName = R.over(
         currentMemebers, R.map(
             R.over(name, makeLower)
         )
     );
    
     /**
      * 4. Create 'all' under members combine 'current' & 'past'
      * 5. Pick get name and to lowercase for 'members.all'
      */
     const allMemebers = R.lensPath(['members', 'all']);
     // lensConcat :: (Lens t, Lens s) -> a -> [b]
     const lensConcat = (targetLen, srcLen) => data =>
            R.over(targetLen, R.concat(R.view(srcLen, data)))(data);
    
    // A set of tranforms over prop 'members.all'
    // Set 'all' to []
    // concat 'past' to 'all'
    // concat 'current' to 'all'
    // pick name and conver to lowercase
    const createAllMembers = [
        R.over(allMemebers, R.map(lowerName)),
        lensConcat(allMemebers, currentMemebers),
        lensConcat(allMemebers, pastMemebers),
        R.set(allMemebers, [])
     ];
    
     const mods = [
        ...createAllMembers,
        lowerCurrentMemebersName,
        omitPastPlays,
        lowerBandName,
     ]
     const transform = R.compose(
        ...mods
     );
     const res = transform(band);
  • 相关阅读:
    TCP的状态 (SYN, FIN, ACK, PSH, RST, URG)
    理论基础+实战控制台程序实现AutoFac注入
    C# class 浅拷贝 与 深拷贝
    给定一个矩阵 A, 返回 A 的转置矩阵。
    [弹出消息] C#ShowMessageBox帮助类
    [弹出消息] C#MessageBox帮助类 (转载)
    [XML] C#XMLProcess操作Xml文档的帮助类 (转载)
    [XML] C# XmlHelper操作Xml文档的帮助类 (转载)
    [XML] resources的Xml配置文件 (转载)
    [XML] Resource帮助类
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10425203.html
Copyright © 2011-2022 走看看