2016-09-17 119 views
-1

ers, 我在使用此算法时遇到了一些麻烦。Javascript筛选器返回两个对象

我正在使用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; 
    } 
} 
+1

请提供样品'state'。 –

回答

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));