javascript - 如何以功能方式实现数组连接？

Question

我有一个用条件分隔符连接对象数组的函数。

function getSegmentsLabel(segments) {
    var separator = '-';

    var segmentsLabel = '';
    var nextSeparator = '';
    _.forEach(segments, function(segment) {
        segmentsLabel += nextSeparator + segment.label;
        nextSeparator = segment.separatorUsed ? separator : ' ';
    });
    return segmentsLabel;
}

用法:

var segments = [
    {label: 'First', separatorUsed: true},
    {label: 'Second', separatorUsed: false},
    {label: 'Third', separatorUsed: true},
    {label: 'Forth', separatorUsed: true}
];

getSegmentsLabel(segments); // Result: "First-Second Third-Forth"

上面的 getSegmentsLabel 函数如何在不改变变量的情况下以纯函数的方式编写？我们可以使用 lodash 函数。

Answer 1

递归

或者代替 map/reduce/join，你可以使用直接递归——这里的好处是我们不需要多次迭代集合来计算结果——哦，程序真的很小，所以很容易理解

小心 javascript 中的堆栈溢出；相关:How do I replace while loops with a functional programming alternative without tail call optimization?

var segments = [
  {label: 'First', separatorUsed: true},
  {label: 'Second', separatorUsed: false},
  {label: 'Third', separatorUsed: true},
  {label: 'Forth', separatorUsed: true}
];

const main = ([x,...xs]) =>
  x === undefined
    ? ''
    : xs.length === 0
      ? x.label
      : x.label + (x.separatorUsed ? '-' : ' ') + main (xs)
      
console.log (main (segments))
// First-Second Third-Forth

---

函数式编程

我们函数的最后一个实现非常具体 - 函数式编程不仅仅是关于使用 map 和 reduce，它是关于制作有意义的抽象和编写通用过程可以易于重复使用

此示例有意与您的原始代码截然不同，希望它能让您以不同的方式思考程序——如果您对此感兴趣，作为本文的后续内容，您可以开始阅读有关 monoids 的内容.

通过以这种方式编写我们的程序，我们已经在可以在任何其他程序中使用的通用文本模块中表达了“带有条件分隔符的可连接文本片段”的想法——编写者可以创建使用 Text.make 的文本单元并使用 Text.concat

组合它们

这个程序的另一个优点是分隔符是参数控制的

// type Text :: { text :: String, separator :: String }
const Text =
  {
    // Text.make :: (String × String?) -> Text
    make: (text, separator = '') =>
      ({ type: 'text', text, separator }),
      
    // Text.empty :: Text
    empty: () =>
      Text.make (''),
      
    // Text.isEmpty :: Text -> Boolean
    isEmpty: l =>
      l.text === '',
      
    // Text.concat :: (Text × Text) -> Text
    concat: (x,y) =>
      Text.isEmpty (y)
        ? x
        : Text.make (x.text + x.separator + y.text, y.separator),
    
    // Text.concatAll :: [Text] -> Text
    concatAll: ts =>
      ts.reduce (Text.concat, Text.empty ())  
  }

// main :: [Text] -> String
const main = xs =>
  Text.concatAll (xs) .text
  
// data :: [Text]
const data =
  [ Text.make ('First', '-'), Text.make ('Second', ' '), Text.make ('Third', '-'), Text.make ('Fourth', '-') ]
  
console.log (main (data))
// First-Second Third-Fourth