带有箭头函数回调的Array.prototype.filter（）参数？ （无此绑定）

Question

Edit: This has been incorrectly marked as dupe (see discussion in comments) the solution to this specific problem is provided by article author here

Inspired by https://hackernoon.com/rethinking-javascript-death-of-the-for-loop-c431564c84a8 I've been refactoring some old code.

Running into problems with passing arguments using Array.prototype.filter since the second parameter of Array.prototype.filter(callback, thisArg) binds the “this”-object in the callback but arrow functions don't bind “this”.

In my example I'm getting the keys from an associative array (yeah I know, technically not available in js) by using “Object.keys()”, then filtering that array by a property of their object in the associative array “this[item].property”, but that fails since this binding isn't available.

So, embracing arrow functions, how does one pass parameters to callback in filter()?

 const arr = { a: { property: true, otherProp: false }, b: { property: true, otherProp: false }, }, hasProperty = item => this[item].property, getMatchingKeys = object => Object.keys(object).filter(hasProperty, object); getMatchingKeys(arr); 

Answer 1

You can use Object.entries . It provides both the key and the value, so that you don't need the reference to the object itself:

 const arr = { a: { property: true, otherProp: false }, b: { property: true, otherProp: false }, c: { property: false, // to be excluded otherProp: true }, }, hasProperty = ([key, value]) => value.property, first = ([key]) => key, getMatchingKeys = object => Object.entries(object).filter(hasProperty).map(first); console.log(getMatchingKeys(arr)); 

 .as-console-wrapper { max-height: 100% !important; top: 0; } 

You could also use bind -- not to bind this , but a first argument:

 const arr = { a: { property: true, otherProp: false }, b: { property: true, otherProp: false }, c: { property: false, // to be excluded otherProp: true }, }, hasProperty = (object, key) => object[key].property, getMatchingKeys = object => Object.keys(object).filter(hasProperty.bind(null, arr)); console.log(getMatchingKeys(arr)); 

 .as-console-wrapper { max-height: 100% !important; top: 0; } 

See also some other options in my answer to another question .

Answer 2

The author of the article provided an answer in the comments , provided here for reference:

const arr = {
  a: {
    property: true,
    otherProp: false,
  },
  b: {
    property: true,
    otherProp: false,
  },
}
const hasProperty = object => item => object[item].property
const getMatchingKeys = object => Object.keys(object).filter(hasProperty(arr))
getMatchingKeys(arr) // = ['a', 'b']

Further reading, provided by @bergi in comments of original post (buried deep, posted here for greater visibility):

1. jQuery pass more parameters into callback
2. How do I pass an extra parameter to the callback function in Javascript .filter() method?