JavaScript 中的 .find() 和 .includes() 有什么区别？

Question

我正在尝试创建一个名为 addTrack 的方法，具有以下功能：

\n\n

\n
• 接受轨道参数
\n
• 使用 track\xe2\x80\x99s id 属性检查\n当前歌曲是否处于 playlistTracks 状态
\n

• 如果 id 是新的，则将歌曲添加到播放列表的末尾。

\n

• 设置播放列表的新状态。

\n

\n\n

如果我使用代码 #1 而不是代码 #2，会有什么区别？

\n\n

PlaylistTracks 在构造函数中定义如下：

\n\n

playlistTracks: [{ name: 'name1', artist: 'artist1', album: 'album1', id: 1 },\n        { name: 'name2', artist: 'artist2', album: 'album2', id: 2 },\n      ]\n

\n\n

代码#1

\n\n

addTrack(track){\nif (this.state.playlistTracks.includes(this.props.track.id)) {return;}\nelse {this.state.playlistTracks.push(track);\n  this.setState({playlistTracks:this.state.playlistTracks});\n}\n

\n\n

}

\n\n

代码#2

\n\n

addTrack(track) {\nif (this.state.playlistTracks.find(savedTrack => savedTrack.id===track.id) {return;}\nelse {return this.state.playlistTracks.push(track);}\nthis.setState(playlistTracks:this.state.playlistTracks)}\n

\n

Answer 1

array.includes如果该值存在或不存在，则仅返回 true 或 false

array.find将为您找到数组中的特定项目

例如

[1,2,3].includes(1) // returns true
[1,2,3].includes(4) // returns false

[1,2,3].find(i => i === 1) // returns 1
[1,2,3].find(i => i === 5) // returns undefined