Javascript - 通过reduce方法计算数组元素直到出现特定值不会给出正确的输出

Question

const arr = [5,6,0,7,8];
const sum = (arr,num) => arr.reduce((total)=>(num==0 ? total : total+num), 0) 
console.log(sum(arr, 0))

请检查我怎样才能使它工作。犯了一些错误，但不知道具体是什么。输出是函数而不是结果。

Answer 1

这在.reduce 中执行起来很尴尬，因为它通过了整个 数组。如果我们做一个简单的实现，你会发现问题：

const arr = [5,6,0,7,8];
const sum = (arr,num) => arr.reduce((total, x)=>(num==x ? total : total+x), 0) 
console.log(sum(arr, 0))

我们现在正确地进行检查 - 当x 为零（num 的值）时，num==x 将返回 true。然而，结果是错误的，因为它只返回trueonce，但任何其他迭代仍然是true。这是相同的事情，更多的日志记录描述了过程的每个步骤：

const arr = [5,6,0,7,8];
const sum = (arr,num) => arr.reduce((total, x)=> {
  const boolCheck = num==x;
  const result = boolCheck ? total : total+x;
  console.log(
`total: ${total}
num: ${num}
x: ${x}
boolCheck: ${boolCheck}
result: ${result}`);

    return result;
  }, 0) 
console.log(sum(arr, 0))

因此，您需要添加一些在迭代之间持续存在的标志，这样它就不会丢失。

一种选择是在reduce 回调中更改一个外部标志：

const arr = [5,6,0,7,8];
const sum = (arr,num) => {
  let finished = false;
  return arr.reduce((total, x) => {
    if(x === num)
      finished = true;
      
    return finished ? total : total+x;
  }, 0)
}
console.log(sum(arr, 0))

或者，您可以在 reduce 回调内部使用该标志，并在调用之间传递它。它最终以相同的方式工作，但使回调函数变得纯粹。以一些非正统的结构为代价：

const arr = [5,6,0,7,8];
const sum = (arr,num) => {
  return arr.reduce(({total, finished}, x) => {
    if(x === num)
      finished = true;

    total = finished ? total : total+x;

    return {total, finished};
  }, {total: 0, finished: false})
  .total
}
console.log(sum(arr, 0))

如果您想使用reduce，但您可以使用其他方法，那么您可以使用Array#indexOf 查找值的第一个实例，并使用Array#slice 查找包含目标值之前的任何值的数组价值：

const arr = [5,6,0,7,8];
const sum = (arr,num) => {
  const endIndex = arr.indexOf(num);
  
  return arr.slice(0, endIndex)
    .reduce((total, x)=> total+x, 0)
}
console.log(sum(arr, 0))

或作为一个链式表达式：

const arr = [5,6,0,7,8];
const sum = (arr,num) => arr
  .slice(0, arr.indexOf(num))
  .reduce((total, x)=> total+x, 0);

console.log(sum(arr, 0))

其他库可能有一个 takeUntil 或 takeWhile 操作，这更接近您想要的 - 它为您提供一个数组从开始直到给定的值或条件。然后你可以减少它的结果。

这是一个使用Lodash#takeWhile的示例

通过这里使用链接，Lodash 会做惰性求值，所以它只会遍历一次数组，而不是扫描一次找到结束索引并再次遍历数组进行求和。

const arr = [5,6,0,7,8];
const sum = (arr,num) => _(arr)
  .takeWhile(x => x !== num)
  .reduce((total, x)=>total+x, 0)

console.log(sum(arr, 0))

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script>

请注意，如果您正在使用 Lodash，那么您不妨使用_.sum()。我上面不是为了说明通用 takeUntil/takeWhile 的外观。

const arr = [5, 6, 0, 7, 8];
const sum = (arr, num) => _(arr)
  .takeWhile(x => x !== num)
  .sum()

console.log(sum(arr, 0))

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script>

Answer 2

由于您需要在数组的中途停止对值求和，这可能最简单地使用 for 循环实现：

const arr = [5, 6, 0, 7, 8];
const num = 0;

let sum = 0;
for (let i = 0; i < arr.length; i++) {
  if (arr[i] == num) break;
  sum += arr[i];
}
console.log(sum);

如果你想使用reduce，你需要保留一个标志，表明你是否看到了num的值，这样你就可以停止从数组中添加值：

const arr = [5, 6, 0, 7, 8];

const sum = (arr, num) => {
  let seen = false;
  return arr.reduce((c, v) => {
    if (seen || v == num) {
      seen = true;
      return c;
    }
    return c + v;
  }, 0);
}

console.log(sum(arr, 0));
console.log(sum(arr, 8));

Answer 3

这样称呼它：

console.log(sum(arr, 0)());

Answer 4

你需要括号来执行函数()

sum(arr, 0)

如果没有括号，则将函数的引用存储在变量中