如何将额外的参数传递给 JS Array.forEach()

Question

只是想分享一个小技巧，我学会了将变量传递到 JS Array.forEach() 方法的范围内。

我遇到过需要使用 forEach 循环来构建数据集的情况。但我也需要访问当前范围内的变量（我需要能够在循环中引用this）。

这是我当时的情况：

var dataset = {
    data: [],
    backgroundColor:[],
};

items.forEach(function (item) {

    dataset.data.push(item.age);

    if (item.age < 2) {
        dataset.bgColor.push(this.green);
    } else if (item.age < 5) {
        dataset.bgColor.push(this.yellow);
    } else {
        dataset.bgColor.push(this.red);
    }

}, this);


this.refreshGraph(dataset);

无法从循环内访问数据集。那么我们如何在迭代时访问它呢？

我还没有看到这个堆栈溢出解决方案，它不适合我能找到的任何问题。

回答如下：

Answer 1

如果您有超出某些数据范围的函数但需要访问它，您可以使用一个柯里化函数，该函数将该数据集作为第一个参数，并且仍然可以在整个过程中正常使用this：

//curried function that uses `dataset` and `this` but it is not 
//in the context where the iteration happens 
function makeLoopCallback(dataset) {
  return function(item) {
    dataset.data.push(item.age);

    if (item.age < 2) {
        dataset.bgColor.push(this.green);
    } else if (item.age < 5) {
        dataset.bgColor.push(this.yellow);
    } else {
        dataset.bgColor.push(this.red);
    }
  }
}

//object to serve as `this` context for a function
var obj = {
  green: "Green",
  yellow: "Yellow",
  red: "Red",
  doSomething: function(items) {
    var data = {
        data: [],
        bgColor:[],
    };
  
    items.forEach(makeLoopCallback(data), this);
  
    return data;
  }
}

//set up some dummy data
var input = [ { age: 1 }, { age: 2 }, { age: 3 }, { age: 4 }, { age: 5 }, { age: 6 } ];

//call the function
console.log(obj.doSomething(input))

另一种方法是使用Array#reduce 而不是Array#forEach 与一个直接接受两个参数的函数。由于.reduce 无法设置this 上下文，您可以使用Function#bind 来设置：

//external function that uses `dataset` and `this` but it is not 
//in the context where the iteration happens
function external(dataset, item) {
    dataset.data.push(item.age);

    if (item.age < 2) {
      dataset.bgColor.push(this.green);
    } else if (item.age < 5) {
      dataset.bgColor.push(this.yellow);
    } else {
      dataset.bgColor.push(this.red);
    }

    return dataset;
}

//object to serve as `this` context for a function
var obj = {
  green: "Green",
  yellow: "Yellow",
  red: "Red",
  doSomething: function(items) {
    var data = {
        data: [],
        bgColor:[],
    };

    return items.reduce(external.bind(this), data);
  }
}

//set up some dummy data
var input = [ { age: 1 }, { age: 2 }, { age: 3 }, { age: 4 }, { age: 5 }, { age: 6 } ];

//call the function
console.log(obj.doSomething(input))

Answer 2

具有 es6 的能力 如果您将使用箭头函数，则 this 将取自

items.forEach(item => {
// You can use this as out of the forEach scope
});

From MDN Web Docs:

箭头函数没有自己的 this。的这个值 使用封闭词法范围；箭头功能遵循正常 变量查找规则。所以在搜索这个不是 存在于当前范围内，箭头函数最终会找到 this 从它的封闭范围。

另一个很好的解释： https://hackernoon.com/javascript-es6-arrow-functions-and-lexical-this-f2a3e2a5e8c4

Answer 3

解决方案是将 JSON 对象作为 this 参数传递。

所以在我们之前：

Array.forEach(function(){}, this) 
// "this" is just an object ^^^^ just like anything else in JavaScript

现在我们有了：

Array.forEach(function(){}, {_self: this, dataset: dataset}) 

// you can access _self and dataset just as if they were in scope

现在您可以在使用匿名函数进行迭代时更改数据:)

完整示例：

var dataset = {
    data: [],
    backgroundColor:[],
};

items.forEach(function (item) {

    dataset.data.push(item.age);

    if (item.age < 2) {
        dataset.bgColor.push(_self.green);
    } else if (item.age < 5) {
        dataset.bgColor.push(_self.yellow);
    } else {
        dataset.bgColor.push(_self.red);
    }
}, { _self: this , dataset: dataset});

Answer 4

Array.prototype.forEach(callbackFun, ?this)

您可以将dataset 作为此参数传递给forEach

var dataset = {
data: [],
backgroundColor:[],
};

items.forEach(function (item) {

this.dataset.data.push(item.age);

if (item.age < 2) {
    this.dataset.bgColor.push(this.tempThis.green);
} else if (item.age < 5) {
    this.dataset.bgColor.push(this.tempThis.yellow);
} else {
    this.dataset.bgColor.push(this.tempThis.red);
}

}, {tempThis:this,dataset:dataset});


this.refreshGraph(dataset);