如何以功能方式实现数组连接?

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 中的堆栈溢出; 相关：如何在没有尾调用优化的情况下将 while 循环替换为函数式编程替代方案？

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，而是关于进行有意义的抽象和编写可以轻松重用的通用过程

这个例子故意与你的原始代码非常不同，希望它能让你以不同的方式思考程序——如果你对这个东西感兴趣，作为这篇文章的后续，你可以开始阅读幺半群。

通过以这种方式编写我们的程序，我们已经在一个通用的文本模块中表示了"带有条件分隔符的可连接文本片段"的想法，该模块可用于任何其他程序 - 编写器可以使用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

Answer 2

您可以使用map()方法返回新数组，然后join()从该数组中获取字符串。

var segments = [
{label: 'First', separatorUsed: true},
{label: 'Second', separatorUsed: false},
{label: 'Third', separatorUsed: true},
{label: 'Forth', separatorUsed: true}
];
function getSegmentsLabel(segments) {
return segments.map(function(e, i) {
return e.label + (i != segments.length - 1 ? (e.separatorUsed ? '-' : ' ') : '')
}).join('')
}
console.log(getSegmentsLabel(segments));

Answer 3

您可以使用数组作为分隔符，并决定末尾的字符串是否使用破折号或不分隔符。

const separators = [' ', '', '-'];
var getSegmentsLabel = array => array
.map(({ label, separatorUsed }, i, a) =>
label + separators[2 * separatorUsed - (i + 1 === a.length)])
.join('');
var segments = [{ label: 'First', separatorUsed: true }, { label: 'Second', separatorUsed: false }, { label: 'Third', separatorUsed: true }, { label: 'Forth', separatorUsed: true }];
console.log(getSegmentsLabel(segments));

Answer 4

在这里我分离出函数：

// buildSeparatedStr returns a function that can be used
// in the reducer, employing a template literal as the returned value
const buildSeparatedStr = (sep) => (p, c, i, a) => {
const separator = !c.separatorUsed || i === a.length - 1 ? ' ' : sep;
return `${p}${c.label}${separator}`;
}
// Accept an array and the buildSeparatedStr function
const getSegmentsLabel = (arr, fn) => arr.reduce(fn, '');
// Pass in the array, and the buildSeparatedStr function with
// the separator
const str = getSegmentsLabel(segments, buildSeparatedStr('-'));

演示

Answer 5

在这种情况下，最好使用reduceRight而不是map：

const segments = [
{label: 'First',  separatorUsed: true},
{label: 'Second', separatorUsed: false},
{label: 'Third',  separatorUsed: true},
{label: 'Forth',  separatorUsed: true}
];
const getSegmentsLabel = segments =>
segments.slice(0, -1).reduceRight((segmentsLabel, {label, separatorUsed}) =>
label + (separatorUsed ? "-" : " ") + segmentsLabel,
segments[segments.length - 1].label);
console.log(JSON.stringify(getSegmentsLabel(segments)));

如您所见，最好从右到左遍历数组。

---

这是该程序的更有效版本，尽管它使用突变：

const segments = [
{label: 'First',  separatorUsed: true},
{label: 'Second', separatorUsed: false},
{label: 'Third',  separatorUsed: true},
{label: 'Forth',  separatorUsed: true}
];
const reduceRight = (xs, step, base) => {
const x = xs.pop(), result = xs.reduceRight(step, base(x));
return xs.push(x), result;
};
const getSegmentsLabel = segments =>
reduceRight(segments, (segmentsLabel, {label, separatorUsed}) =>
label + (separatorUsed ? "-" : " ") + segmentsLabel,
({label}) => label);
console.log(JSON.stringify(getSegmentsLabel(segments)));

它不是纯粹的功能，但如果我们将reduceRight视为黑盒，那么您可以以纯功能的方式定义getSegmentsLabel。

Answer 6

const segments = [
{label: 'First',  separatorUsed: true},
{label: 'Second', separatorUsed: false},
{label: 'Third',  separatorUsed: true},
{label: 'Forth',  separatorUsed: true}
];
const segmentsLabel = segments.reduce((label, segment, i, arr) => {
const separator = (i === arr.length - 1) ? '' : (segment.separatorUsed) ? '-' : ' ';
return label + segment.label + separator;
}, '');
console.log(segmentsLabel);