zoukankan      html  css  js  c++  java
  • [Javascript Crocks] Understand the Maybe Data Type

    In this lesson, we’ll get started with the Maybe type. We’ll look at the underlying Just and Nothing types and create a simple utility function to create a Maybe from a value. Then we’ll see how we can apply functions to values and skip invocation for values that might cause errors or unexpected results.

    Most of time, we will meet this kind of problem in our code:

    const {inc} = require('./utils');
    
    const res = inc(2); // 3
    const res1 = inc('2'); // 21
    const res2 = inc(undefined); // NaN

    We expect the function 'inc' can help to increase the value by 1, but if we pass the string type of undefined, we won't get the result we want.

    Of course, you can update your inc function like that:

    // from
    const inc = n => n + 1;
    
    // to
    const inc = n => typeof n === 'number' ? n + 1: 0;
    
    module.exports = {
        inc
    };

    But it only works if you have full control of your code, if you are using a thrid-party lib, then it doesn't work.

    Install:

    npm i -S crocks

    By import Maybe from crocks lib:

    const Maybe = require('crocks/Maybe');

    You two APIs to use:

    Maybe.Just(2) // Just 2 
    Maybe.Nothing() // Nothing

    Update our code:

    // utils.js
    const inc = n => n + 1;
    
    module.exports = {
        inc
    };
    
    
    // index.js
    const {inc} = require('./utils');
    const Maybe = require('crocks/Maybe');
    
    const safeNum = n => typeof n === 'number' ? Maybe.Just(n) : Maybe.Nothing();
    const input = safeNum(2); // Just 3
    // const input = safeNum('2'); // Nothing
    // const input = safeNum(undefined); // Nothing
    const result = input
        .map(inc);
    
    console.log(result); // Just 3

    Now we get 'Just 3' as a result, but we want the actual value and also apply a default value 0:

    const safeNum = n => typeof n === 'number' ? Maybe.Just(n) : Maybe.Nothing();
    const input = safeNum(2); // 3
    // const input = safeNum('2'); // 0
    // const input = safeNum(undefined); // 0
    
    const result = input
        .map(inc)
        .option(0) // unwrap the value and give a default value;
    
    console.log(result); 
  • 相关阅读:
    cropperjs图片裁剪工具、NProgress进度条
    Chrome浏览器上安装Vue Devtools
    原生JS---数组去重总结
    原生JS--获取DOM节点
    call,apply,bind初识
    原生JS--数组循环总结
    01-vue项目之滚动加载数据
    原生JS---解构赋值
    克隆数组的几种方式?
    原生JS设置、删除、获取Cookie
  • 原文地址:https://www.cnblogs.com/Answer1215/p/9022702.html
Copyright © 2011-2022 走看看