使用一行if语句的reduce和spread函数背后的逻辑

Question

我在理解这个 reduce 示例的 if 语句时遇到问题：

const colors = ['red', 'red', 'green', 'blue', 'green', 'yellow'];
console.log(colors);

const distinctColors = colors.reduce(
    (distinct, color) =>
        (distinct.indexOf(color) !== -1) ? 
            distinct : 
            [...distinct, color], []
)

console.log(distinctColors)

我试图理解伪代码中的 if 语句，并阅读这个示例，我一直看到如下：

If the color found in the distinct array (which is empty)
  return empty array
else
  return contents of array and color added to an empty array

我是关闭还是关闭？

测试 repl.it here

Answer 1

它将数组缩减为唯一值。你可以这样理解：

将distinct 设置为一个空数组（要减少的第二个参数）。对于colors 中的每个color，如果color 在distinct 中（!== -1 的索引），则将distinct 更新为distinct（无操作）（第一个三元分支），否则如果color 不在distinct 中，将distinct 更新为distinct + color（第二个三元分支）。

请参阅 mdn reduce 文档。

Answer 2

尝试用cmets解释，希望对你有帮助。

const colors = ['red', 'red', 'green', 'blue', 'green', 'yellow'];
console.log(colors);

const distinctColors = colors.reduce(
    (distinct, color) =>
        (distinct.indexOf(color) !== -1) ? 
        // ----------------^ Turnary to test for presence of current color in the accum []
            distinct : 
        // ----^ It DOES exist, so return the current Accum array    
            [...distinct, color], []
            // ---^ Is DOES NOT exist, return a new array of Accum + Color
            // --------------------^ This initialises a new empty array into the accumulator
)

console.log(distinctColors)

只是添加了这个作为参考，使用一个集合来做这个更有效。

const colors = ['red', 'red', 'green', 'blue', 'green', 'yellow'];
console.log(colors);

const distinctColors = [...new Set(colors)];

console.log(distinctColors)

这是关于 Set 的 MDN 文档。 Javascript Set