Question

我是JavaScript的新手，来自Python。我很难理解“ rect”的来源以及如何在下面的脚本（我从tracking.js中获取）中传递它：任何帮助将不胜感激，我相信这个问题也可能会有所帮助其他任何来自Python的东西。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>tracking.js - first tracking</title>
  <script src="../build/tracking-min.js"></script>
</head>
<body>
  <video id="myVideo" width="400" height="300" preload autoplay loop muted></video>
  <script>
  var colors = new tracking.ColorTracker(['magenta', 'cyan', 'yellow']);

  colors.on('track', function(event) {
    if (event.data.length === 0) {
      // No colors were detected in this frame.
    } else {
      event.data.forEach(function(rect) {
        console.log(rect.x, rect.y, rect.height, rect.width, rect.color);
      });
    }
  });

  tracking.track('#myVideo', colors);
  </script>
</body>
</html>

Answer 1

当您在数组上调用forEach时，forEach中的代码会调用该函数，以“为数组中的每个”条目传递该函数，并将该条目传递给该函数（以及几个其他事情）。因此rect是数组中每个条目的顺序。

内部，forEach省略了一些细节，

function forEach(callback) {
    // Here, `this` is the array `forEach` was called on
    for (let index = 0, len = this.length; index < len; ++index) {
        callback(this[index], index, this);
//               ^^^^^^^^^^^--- this is received by your callback as `rect`
    }
}

（为清楚起见，我遗漏的主要细节之一是forEach的{{1}}，并使用特定的thisArg值调用callback。）

记录每个步骤的实时示例

this

function pseudoForEach(callback) {
    console.log("Start of pseudoForEach");
    for (let index = 0, len = this.length; index < len; ++index) {
        console.log(
            "Calling callback with: this[index] = " + this[index] +
            ", index = " + index + ", and this = (the array)"
        );
        callback(this[index], index, this);
    }
    console.log("End of pseudoForEach");
}

Object.defineProperty(Array.prototype, "pseudoForEach", {
    value: pseudoForEach,
    configurable: true,
    writable: true
});

var a = ["one", "two", "three"];
console.log("About to call pseudoForEach");
a.pseudoForEach(function(rect) {
    console.log("In callback, rect = " + rect);
});
console.log("Done with pseudoForEach call");

第二个Jaromanda X's recommendation，MDN是获取JavaScript信息（以及HTML和CSS）的好资源。

Answer 2

rect变量代表数组event.data中的一项。

在数组（.forEach()上调用event.data方法时，此方法在内部迭代数组的每个项目，并在每次迭代期间将当前数组的项目传递给回调函数您提供的情况是函数：

function(rect) {
        console.log(rect.x, rect.y, rect.height, rect.width, rect.color);
}

因此，rect是event.data当前迭代的当前项目。希望有帮助！

Answer 3

'rect'是通过forEach迭代返回的项目的名称。您可以随心所欲地调用它，恰好有人叫它rect。

您可以随便叫它

arr.forEach(name ()=> console.log(name))
arr.forEach(yourDogsName ()=> yourDogsName.height)

JavaScript函数参数-初学者问题

3 个答案: