揭开数组方法中第二参数的神秘面纱

这里主要是针对JavaScript中常用的数组遍历方法来说。

常用的数组遍历方法

forEach(),map(),fiftle(),find(),findIndex(),some(),every() 他们各自的基本功能想必大家都已烂熟于心，它们的第一个参数都是一个回调函数且为必需项，函数有三个参数分别是value(当前元素),index(当前元素索引),array(当前数组)，而它的第二参数可选，解释如下图所示：

emmmm上面把这个参数的功能写的很详细，但笔者具体还是不知道这是干什么用的，所以就去实验了一番，把它可能出现的应用场景拿出来给大家参考，并希望能带来更多应用场景的启发。

以forEach()函数为例

在我们写组件的时候通常会想要调用其他函数对自己底下的数据进行一些操作，比如这样：

class App extends React.Component {

  handle = (value) => {
    const arr = [{ id: 1, name: '张三' }].forEach(function (value, index, arr) {
      console.log('add',  this.handleEdit(value.id))
    });
  }

  handleEdit = (value) => {
    return value - 2        //也可能是更复杂的操作
  }

  render() {

    return (
      <span onClick={this.handle}>减法</span>
    )
  }
}

这时点击‘减法’会报一个错误'TypeError: Cannot read property 'handleEdit' of undefined，这是因为我们现在处于forEach的第一参数的函数当中，无法获取外界的方法，此时打印this，也只是undefined，这时就要用到我们的第二参数辣

    const arr = [{ id: 1, name: '张三' }].forEach(function (value, index, arr) {
      console.log('this',this)      // this value => { return value - 2; }
      console.log('add', this(value.id)) // add -1 
    },this.handleEdit);

OK，成功了。

当然还有一种简单粗暴的方法，将forEach()的第一个参数写成箭头函数就可以了，道理都是一样的，改变了this的指向（可能这就是第二参数不受关心的原因吧）。

写一个曾经数组方法上踩过的坑

map()方法无法进行数组筛选！

 const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9].map((v) => {
            if (v !== 1) {
                return v
            }
        })
 console.log('arr', arr)  //  arr [undefined, 2, 3, 4, 5, 6, 7, 8, 9]

map()操作，你传进去多少个，返回来还是多少个，就算你在里面设置了限制，它也会用underfined代替那个数的位置。

最后：

笔者是一个前端萌新，第一次写技术类的文，如果有什么错误或是建议，欢迎大家在评论区留言斧正，感激不尽。