如何解决关于JavaScript中的箭头功能

对箭头功能的工作方式感到困惑...在此特定示例中：

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 ...我听不懂。

解决方法

答案

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

在这种情况下，您将在地图内使用箭头功能，并从类中访问上下文（因为move是VillageState上的一种方法，因此它也可以访问this.place

为什么这个很酷？好吧，如果您使用常规函数并尝试访问this.place，则会收到ReferenceError，因为在本地this上没有定义位置变量。

// 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
*/

资源

要了解有关箭头功能的更多信息，我将检查不耐烦的JS，这是一个非常深入的说明，因此它应该回答您的大多数问题。整个“可调用的值”一章非常有用。也是MDN。

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

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

我可以说的是p是此箭头函数的参数，但是在此示例中它将被替换为什么变量？

它不会被任何变量替换。 map函数为数组中的每个条目调用一次其回调。每次调用回调（箭头函数）时，它都会传入条目的值。这就是arrow函数在其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};
})

似乎您想通过相当复杂的示例来理解JS中的高阶函数。

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

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

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

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

或者为了得到更好的解释，我建议您观看该视频以更清楚地了解JS中的数组方法和高阶函数：JavaScript Higher Order Functions & Arrays！

然后，您可以更轻松地为您的具体示例进行推理：）

关于JavaScript中的箭头功能

如何解决关于JavaScript中的箭头功能

解决方法

答案

资源

相关推荐