使用一行 if 语句减少和传播函数背后的逻辑

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.ithere

Answer 1

它正在将数组缩减为其唯一值。您可以将其解读为：

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

请参阅 mdn reduce 文档。

Answer 2

尝试通过评论进行解释，希望对您有所帮助。

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

使用一行 if 语句减少和传播函数背后的逻辑

Logic behind reduce and spread function using one line if statement

javascript

spread-syntax