Question

我在这里比较新鲜，尝试开始将=>用于函数，并且在此代码中不太了解函数的内部。它确实有效，是我自己编写的，但只是想完全了解其方式和原因。

还有其他形式可以用不同的“形状”编写完全相同的代码吗？

我了解第一个函数如何提取到：

function deleteNote(NoteID) {
 ...
}

但是无法弄清楚内部是如何工作的。

const deleteNote = noteID => {
        setNote(existingNotes => { return existingNotes.filter((note) => note.id !== noteID);
        })
}

结果很好，只想弄清楚发生了什么...：）

Answer 1

简而言之，所有这些都可以翻译为：

const deleteNote = function(noteId) {
  setNote(function(existingNotes) {
    return existingNotes.filter(function(note) { 
      return note.id !== noteID;
    });
  });
};

如果将=>之后的部分用大括号{}括起来，则需要return语句来返回内容，例如：

setNote(existingNotes => {
  return ...;
})

如果不将其用大括号括起来，则箭头后面的内容将返回，例如：

 existingNotes.filter((note) => note.id !== noteID);

看看this short article。

Answer 2

为补充长者的答案，习惯箭头功能的另一种简便方法是将调用分解为单独的命名函数（这是我们通常使用的函数）。

例如：

existingNotes.filter((note) => note.id !== noteID);

也可以被视为：

function noteDifferent(note) {
  return (note.id !== noteID);
}

existingNotes.filter(noteDifferent);

Array.filter(fn)希望将回调函数'fn'作为参数，并在这种情况下将元素note发送到所述函数。

如何提取“ =>”到功能模型

2 个答案: