关于 JavaScript 中的箭头函数

Question

对箭头函数的工作原理感到困惑...在这个特定示例中：

class VillageState {
  constructor(place, parcels) {
    this.place = place;
    this.parcels = parcels;
  }

  move(destination) {
    if (!roadGraph[this.place].includes(destination)) {
      return this;
    } else {
      let parcels = this.parcels.map(p => {
        if (p.place != this.place) return p;
        return {place: destination, address: p.address};
      }).filter(p => p.place != p.address);
      return new VillageState(destination, parcels);
    }
  }
}

特别是

let parcels = this.parcels.map(p => {
        if (p.place != this.place) return p;
        return {place: destination, address: p.address};})

我能说的是 p 是这个箭头函数的参数，但是在这个例子中它会被什么变量替换？ move 方法中唯一的参数是 destination 但这不会取代 p...我无法理解它。

Answer 1

What I can tell is that p is the argument of this arrow function but it is going to be replaced for what variable in this example?

它不会被任何变量取代。 map 函数为数组中的每个条目调用一次回调。每次调用回调（箭头函数）时，它都会传入条目的值。这就是箭头函数在其 p 参数中接收的内容。

例如，假设 this.parcels 看起来像这样：

this.parcels = [
    {
        place: "a",
        description: "parcel a"
    },
    {
        place: "b",
        description: "parcel b"
    },
    {
        place: "c",
        description: "parcel c"
    }
];

对于那些 parcels，map 将调用箭头函数三次。 p 在第一次调用中将引用 { place: "a", description: "parcel a" } 对象。第二次调用中的 p 将引用 { place: "b", description: "parcel b" } 对象，第三次调用中的 p 将引用 { place: "c", description: "parcel c" } 对象。

arrow 函数与该示例中的传统函数的唯一不同之处在于它关闭了 this（以及 arguments 和 super）——您在该代码中想要的东西，因为它使用 this 来引用持有 parcels.

的对象

您指向的代码：

let parcels = this.parcels.map(p => {
    if (p.place != this.place) return p;
    return {place: destination, address: p.address};
})

...使用传统函数执行此代码的相同操作：

let _tmp = this; // *** Remember the value `this` has outside the function
let parcels = this.parcels.map(function(p) => {
    if (p.place != _tmp.place) return p;
//                 ^^^^−−−−−−−−−−−−−−−−−−−−−−−−−− use that value here
    return {place: destination, address: p.address};
})

Answer 2

回答

箭头函数没有内部上下文 (this)，因此当您需要从函数外部访问上下文时，它们非常有用。

在这种情况下，您在地图中使用箭头函数并从 class 访问上下文（因为 move 是 VillageState 上的一个方法，它也可以访问 this.place

为什么这么酷？好吧，如果您使用常规函数并尝试访问 this.place，您会得到一个 ReferenceError，因为在本地 this.

上没有定义 place 变量。

// dont do this at home
function mapFn(p) {
   /* This here is inside the mapFn and since this.place is not defined 
      we get a ReferenceError */
   if (p.place != this.place) return p;
   return {place: destination, address: p.address};
}

let parcels = this.parcels.map(mapFn)
/* Hopefully the syntax above isn't confussing: 
   * mapFn will be called by default with all the map() parameters
   * inside mapFn we only need p so that's the only name param used
*/

资源

要了解有关箭头函数的更多信息，我会查看 Impatient JS，这是一个非常深入的解释，因此它应该可以回答您的大部分问题。整个 'callable values' 章节非常有用。还有 MDN。

https://exploringjs.com/impatient-js/ch_callables.html#arrow-functions

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Answer 3

您似乎试图通过相当复杂的示例来理解 JS 中的 higher-order 函数。

首先，map方法是做什么的？它遍历数组并调用提供的回调函数对吗？！

[1, 2, 3].map(n => n + 1); // [2, 3, 4]

// Which is equalent to this:
[1, 2, 3].map(function(n) { return n + 1 })

// or this...
function increment(n) { return n + 1 };
[1, 2, 3].map(n => increment(n));

或者为了更好的解释，我建议观看这个视频以更清楚地了解 JS 中的数组方法和 higher-order 函数：JavaScript Higher Order Functions & Arrays!

然后你就可以更容易地推理你的具体例子:)

关于 JavaScript 中的箭头函数

About Arrow Functions in JavaScript

javascript

arrow-functions

回答

资源