Javascript篩選器返回兩個對象

Question

ers， 我在使用此算法時遇到了一些麻煩。

我正在使用Redux，但我認爲這不是真的與此問題相關。基本上這個代碼中的console.log語句只返回一個對象，就像它應該那樣，但函數A返回兩個對象的數組（即使是沒有通過函數C中的測試的對象）

I將這些功能分成三部分，看看能否幫助我解決這個問題，但我還是無法弄清楚。

有什麼建議嗎？

const A = (state) => { 
    // looks through an array and passes down a resource 
    return state.resources.locked.filter((resource) => { 
    return B(state, resource); 
    }) 
}; 
// looks through an array and passes down a building 
const B = (state, resource) => { 
    return state.bonfire.allStructures.filter((building) => { 
    return C(building, resource); 
    }) 
}; 
// checks if building name and resource requirment are the same, and if building is unlocked 
// then returns only that one 
const C = (building, resource) => { 
    if (building.unlocked && building.name == resource.requires.structure) { 
     console.log(resource); 
     return resource; 
    } 
} 

Answer 1

當使用filter，一定要明白，你傳遞給它的回調函數應返回指示特定元素是否需要或不被過濾布爾值。

但在你的情況下，B不會返回一個布爾值，而是一個數組。即使該數組爲空（表示沒有資源匹配），filter也不會將此值視爲錯誤，因此相應的資源仍會在由A返回的數組中發生。

快速修復：獲取由B返回的數組長度，然後返回該數組。零將被視爲錯誤：

const A = (state) => { 
 
    // looks through an array and passes down a resource 
 
    return state.resources.locked.filter((resource) => { 
 
    return B(state, resource).length; /// <---- length! 
 
    }) 
 
}; 
 
// looks through an array and passes down a building 
 
const B = (state, resource) => { 
 
    return state.bonfire.allStructures.filter((building) => { 
 
    return C(building, resource); 
 
    }) 
 
}; 
 
// checks if building name and resource requirement are the same, and if building 
 
// is unlocked and then returns only that one 
 
const C = (building, resource) => { 
 
    if (building.unlocked && building.name == resource.requires.structure) { 
 
     return resource; 
 
    } 
 
} 
 

 
// Sample data. Only x matches. 
 
var state = { 
 
    resources: { 
 
     locked: [{ // resource 
 
      requires: { 
 
       structure: 'x' 
 
      } 
 
     }, { // resource 
 
      requires: { 
 
       structure: 'y' 
 
      } 
 
     }] 
 
    }, 
 
    bonfire: { 
 
     allStructures: [{ // building 
 
      unlocked: true, 
 
      name: 'x' 
 
     }, { // building 
 
      unlocked: true, 
 
      name: 'z' 
 
     }] 
 
    } 
 
}; 
 

 
console.log(A(state));

但更好的是在每一個地方，他們預期的地方，真正迴歸布爾值。所以C應該只是返回條件的結果，並且B可以使用some而不是filter，它不僅返回布爾值，而且一旦找到匹配就停止查找。在A中，您現在可以擁有原始代碼，因爲您真的想要A返回數據（不是布爾值）。

還要注意的是，你可以使用快捷符號爲箭頭的功能，只有具有被計算的表達式：

// looks through an array and passes down a resource 
 
const A = state => state.resources.locked.filter(resource => B(state, resource)); 
 
// looks through an array and passes down a building 
 
    // Use .some instead of .filter: it returns a boolean 
 
const B = (state, resource) => 
 
    state.bonfire.allStructures.some(building => C(building, resource)); 
 
// checks if building name and resource requirment are the same, and if building 
 
// is unlocked and then returns only that one 
 
    // Return boolean 
 
const C = (building, resource) => building.unlocked 
 
           && building.name == resource.requires.structure; 
 
// Sample data. Only x matches. 
 
var state = { 
 
    resources: { 
 
     locked: [{ // resource 
 
      requires: { 
 
       structure: 'x' 
 
      } 
 
     }, { // resource 
 
      requires: { 
 
       structure: 'y' 
 
      } 
 
     }] 
 
    }, 
 
    bonfire: { 
 
     allStructures: [{ // building 
 
      unlocked: true, 
 
      name: 'x' 
 
     }, { // building 
 
      unlocked: true, 
 
      name: 'z' 
 
     }] 
 
    } 
 
}; 
 
console.log(A(state));