JavaScript-数组高阶函数find的第二个参数

前言

记录自己的一次愚蠢行为，起因是在测试Array的find函数，find函数的第二个参数是thisArg，即执行回调时用作 this 的对象，当我兴高采烈的准备测试一下第二个参数的时候，预期的结果却一直与我想的不一样。

于是在CSDN上面查找find相关的用法，结果好像前几个的搜索结果也没有第二个参数的对应演示，换到stack overflow才知道我犯了一个低级错误。

测试代码

原始代码（有错）

// find测试
let obj = {
  name: 'GingerCat',
  age: 18,
};
let arr = [10, 52, 45, 12, 788, 99];
let result = arr.find(element => {
  console.log(this);// Window
  return element > 50;
}, obj);
console.log(result);

这里console.log(this)的结果一直是Window，但是我想要的结果是{name: 'GingerCat', age: 18}，我一直以为是自己使用find的姿势不正确，导致结果错误，翻了CSDN前几个回答并没有对第二个参数有演示，直到去stack overflow翻到这一篇：

Javascript Array.prototype.find second argument thisArg not working - Stack Overflow

原来，是因为我传入find的是箭头函数，而箭头函数是没有this的，所以我一直打印的是全局的this，也就是Window

修改后代码

// find测试
let obj = {
  name: 'GingerCat',
  age: 18,
};
let arr = [10, 52, 45, 12, 788, 99];
let result = arr.find(function (element) {
  console.log(this);// {name: 'GingerCat', age: 18}
  return element > 50;
}, obj);
console.log(result);

总结

JavaScript的细节很多，平时使用的时候仍然需要多加小心，不然一不小心就掉坑了