JavaScript 新旧替换五：函数嵌套

[XXHolic]

目录

• 引子
• ES5 方式
• ES2015+ 方式
• 参考资料

引子

看了 Redux 的 applyMiddleware 方法的实现，里面函数嵌套的写法都用了新语法，就想关注一下函数嵌套一类新旧的不同。

上一篇 JavaScript 新旧替换四：继承。

ES5 方式

普通嵌套

  function find(value) {
    return {
      in: function(arr) {
        return {
          combine: function(obj) {
            var result = arr.indexOf(value);
            obj.index = result;
            return obj;
          }
        };
      }
    };
  }

  var data = find(6).in([1,2,3,4,5,6]).combine({});
  console.info(data); // {index: 5}

管道机制

管道机制（pipeline）是指前一个函数的输出是后一个函数的输入。

  const plus = a => a + 1;
  const minus = a => a - 2;
  const multi = a => a * 3;
  const div = a => a / 4;

  function pipeline() {
    for (var len = arguments.length, funcs = [], key = 0; key < len; key++) {
      funcs[key] = arguments[key];
    }

    return function(val) {
      var result = funcs.reduce(function(a, b) {
        return b(a);
      }, val);
      return result;
    };
  }

  var cal = pipeline(plus,minus,multi,div);
  var result = cal(5);
  console.info(result); // 3

ES2015+ 方式

普通嵌套

  const find = (value) => (
    {
      in: (arr) => (
        {
          combine: (obj) => {
            const result = arr.indexOf(value);
            obj.index = result;
            return obj;
          }
        }
      )
    }
  );

  const data = find2(6).in([1,2,3,4,5,6]).combine({});
  console.info(data); // {index: 5}

管道机制

  const plus = a => a + 1;
  const minus = a => a - 2;
  const multi = a => a * 3;
  const div = a => a / 4;

  const pipeline = (...funcs) => val => funcs.reduce(function(a,b) {
    return b(a);
  }, val);

  const cal = pipeline(plus,minus,multi,div);
  const result = cal(5);
  console.info(result); // 3

Back to top ⬆️

参考资料

• Redux
• ECMAScript Standard
• MDN Arrow_functions
• ECMAScript 6 function
• Babel Online

🗑️

以下是一些无关紧要的内容。

虽然《哪吒之魔童降世》还在电影院上线，但各大视频平台已经拿到版权，可以放映了，看了下播放量，还是有不少。

这部动画电影感觉是一个全新的故事，也是一个好听的故事。

帅气逼人的太乙真人