JavaScript数组filter方法传入thisArg参数不生效问题求助

你的代码问题出在回调函数使用了箭头函数：

• 箭头函数没有独立的this绑定，它的this继承自定义时所在的外层作用域，任何动态修改this的方式（包括Array.filter的thisArg参数、call/apply/bind方法）都无法更改箭头函数的this指向
• Array.filter的thisArg参数仅对普通函数类型的回调生效，普通函数的this可以被thisArg自定义覆盖

将回调函数改为普通函数即可正常获取thisArg传入的参数：

musics = [
  {
    name: 'stinks like unwashed adolescent',
    tags: ['teen', 'energetic', 'excelent']
  },
  {
    name: 'After beethovens 4th',
    tags: ['older', 'moving', 'excelent']
  },
  {
    name: 'wap',
    tags: ['hip-hop', 'pounding', 'excelent']
  }
]

// 改成普通函数声明
const filterTags = function(element, index, arr) {
   console.log(this.tag)
   return element.tags.includes(this.tag)
}
console.log(musics.filter(filterTags, {tag:'teen'}))

运行后会正确输出tag为teen的第一条音乐数据。

如果你不想使用普通函数，也可以直接在外层作用域定义筛选变量，不需要依赖thisArg传参：

const targetTag = 'teen'
const filterTags = element => element.tags.includes(targetTag)
console.log(musics.filter(filterTags))

该写法更简洁，也符合箭头函数的使用场景。

内容的提问来源于stack exchange，提问作者ChristianU