如何在 Javascript 中用 reduce() 方法模拟 join() 方法？

Question

我想创建一个与 join() 方法功能相同的函数，但我不知道我做错了什么。

const join = (arr, separator) => {
  return arr.reduce((separator, el) => el + separator, separator);
};
console.log(join([1, 2, 3], '-'));

它 returns 321- 而不是 1-2-3

Answer 1

只需要一点点调整：

const join = (arr, separator) => {
  return arr.reduce((acc, el) => acc + separator + el);
};
console.log(join([1, 2, 3], '-'));

Answer 2

给你

const join = (arr, separator) => {
  return arr.reduce((r, v) => r+= v + separator, "").slice(0,-1);
};
console.log(join([1, 2, 3], '-'));

Answer 3

这应该没问题。

const join = (arr, separator) => {
  return arr.reduce((prev, curr, i) => prev + (i != 0 ? '-' : '') + curr, '')
}

console.log(join([1, 2, 3], '-'));

不要忘记检查索引是否为零，您不希望分隔符出现在第一个元素之前。

Answer 4

Reduce 从左到右工作，但参数的排序和命名可能会导致混淆。

reduce 回调有两个参数，第一个参数是 'accumulated value'，第二个是数组的当前元素。这里的 'accumulated value' 将是您连接的字符串，因此您需要以正确的顺序构建它，以第一个数组元素而不是分隔符本身开始字符串。

因此，要完成此操作，请避免为 reduce 调用使用默认值，而是 return 连接的字符串（到目前为止）加上分隔符加上当前元素。确保也以某种方式处理空数组的情况。

const join = (arr, separator) => {
  if (!arr.length) return "";
  return arr.reduce((joined, el) => joined + separator + el);
};
console.log(join([1, 2, 3], '-'));

Answer 5

这是一个示例，其中我向 exampleJoin 函数添加了一些日志记录，因此您可以看到它在做什么。然后最下面还有一个final join方法就是你要找的最后一个

const exampleJoin = (arr, separator) => {
  return arr.reduce((acc, el ) => {
    console.log(`string so far: '${acc}', Current element: '${el}'`)
  return acc + el + separator
  }, '');
};

const ret = exampleJoin([1, 2, 3], '-')
console.log(`ret value: ${ret}`)
console.log(`ret value after slice ${ret.slice(0,-1)}`)

const join = (arr, separator) => {
  return arr.reduce((acc, el ) => acc + el + separator, '').slice(0,-1);
};

console.log(join([1, 2, 3], '-'));

acc 是到目前为止的累加值，el 是当前正在处理的元素，空字符串是累加器 acc 的初始值。 slice 就是去掉尾部的分隔符，这个方法会引入。

如何在 Javascript 中用 reduce() 方法模拟 join() 方法？

How can I simulate join() method with reduce() method in Javascript?

javascript

reduce

join