有人可以解釋一下 reduce 方法在這個 Functional JavaScript 挑戰中是如何工作的嗎？

Question

根據 reduce.. 的文檔

reduce() 方法對累加器和數組的每個值（從左到右）應用 function 以將其減少為單個值。

這是任務：

給定一個字符串數組，使用 Array#reduce 創建一個 object，其中包含每個字符串在數組中出現的次數。 直接返回object（不需要console.log）。

例子

 var inputWords = ['Apple', 'Banana', 'Apple', 'Durian', 'Durian', 'Durian']

 console.log(countWords(inputWords))

   // =>
    // {
    //   Apple: 2,
    //   Banana: 1,
    //   Durian: 3
    // }

這是解決方案：

function countWords(inputWords){
  return inputWords.reduce(function(wordCount, currentValue){
    if (!wordCount[currentValue]){
      wordCount[currentValue] = 1;
    } else {
      wordCount[currentValue] = wordCount[currentValue] + 1;
    }
    return wordCount;
  },{});
}

module.exports = countWords;

數組中的每個索引不是一個“字符串”嗎？ object 是如何創建的？ 我知道迭代器是如何實現的，但是有人可以解釋發生了什么嗎？

Answer 1

函數的每次調用都會傳遞最后的結果wordCount和數組的當前元素。 reduce的第二個參數傳遞wordCount的初始值，在這種情況下，該值是一個空的對象常量。

Reduce將為每個元素調用函數。 對於每個呼叫， wordCount都會更新並返回，並在下一個呼叫中作為wordCount傳遞。 在函數中更新wordCount不會在下次調用時影響wordCount ，返回的值將是在下次調用時設置為wordCount的值 。

每次通過時的外觀如下（將值和變量從示例中縮短為適合）：

index | curVal | wordCount                        | (returned)
----------------------------------------------------------------------------
0     | 'App'  | { }                              | {'App':1}    
1     | 'Ban'  | { 'App': 1 }                     | {'App':1,'Ban':1}   
2     | 'App'  | { 'App': 1, 'Ban': 1 }           | {'App':2,'Ban':1}   
3     | 'Dur'  | { 'App': 2, 'Ban': 1 }           | {'App':2,'Ban':1,'Dur':1 }
4     | 'Dur'  | { 'App': 2, 'Ban': 1, 'Dur': 1 } | {'App':2,'Ban':1,'Dur':2 }
5     | 'Dur'  | { 'App': 2, 'Ban': 1, 'Dur': 2 } | {'App':2,'Ban':1,'Dur':3 }

返回的值為{ 'Apple': 2, 'Banana': 1, 'Durian': 3 }

Answer 2

reduce函數有兩個參數：

1. 回調（previousValue，currentValue，currentIndex，數組）
2. 初始值

從回調函數返回的任何值都將傳遞到wordCount位置的回調函數中。

在此示例中，... currentValue使用對象文字（ reduce函數的第二個參數）初始化。

之后，它每次都會返回更新的對象文字，從而建立其狀態。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

查看正在建立狀態的一個好方法是將console.log放在回調函數的末尾。

簽出此JSFiddle （並查看Debugger控制台）。

Answer 3

 function countWords(arr) {
     const yourObject = new Object();
     let value = inputWords.reduce((a,val,index) => {
          if(index==1){
               yourObject[a]=1;
          }
          if (val in yourObject){
               yourObject[val]=++yourObject[val];
          }else{
               yourObject[val]=1;
          }
           });
     return yourObject;

Answer 4

傳遞給reduce的第二個參數是“ initialValue”，而您傳遞的是{}（空對象的實例）。 在每次調用函數時，“ wordCount”將是此對象。 在JavaScript中，您可以使用括號/字符串表示法引用對象的屬性，如下所示：

someObject["someProperty"] = 2;
// ...is the same as
someObject.someProperty = 2;

因此，如果您要看一下函數的第一次和第三次迭代，它們將看起來像這樣：

if (!wordCount["Apple"]){
  // On first iteration, wordCount.Apple will be undefined, so set to 1
  wordCount["Apple"] = 1;
  // Object is now { Apple: 1 }
} else {
  // On 3rd iteration, wordCount.Apple will already be 1, so we'll increment to 2
  wordCount["Apple"] = wordCount["Apple"] + 1;
  // Object is now { Apple: 2, Banana: 1 }
}
return wordCount;