理解JavaScript中的逻辑非运算符

Question

const allItems = [
{id: 'apple', value: '🍎 apple'},
{id: 'orange', value: '🍊 orange'},
{id: 'grape', value: '🍇 grape'},
{id: 'pear', value: '🍐 pear'},
]
function App() {
const [items, setItems] = React.useState(allItems)
function addItem() {
const itemIds = items.map(i => i.id)
setItems([...items, allItems.find(i => !itemIds.includes(i.id))])

我是JS的新手，我一直在参加React研讨会。让我困惑的是这段代码的最后一行。我应该如何阅读！itemIds.includes(i.id(？也许知道在代码的后面有一个触发此函数的添加项按钮会有所帮助。只有当项目已经从项目中删除时，它才有效。

Answer 1

！运算符用作"；而不是"；。当您执行必须返回布尔值(true | false(的操作时，使用！将返回相反的结果。

在您的示例中，如果i.id在itemsIds中，则itemsIds.includes(i.id)将返回true。因此，如果i.id在itemsIds中，则!itemsIds.includes(i.id)将返回false。

仅供参考，您的函数addItem将向您的状态项添加项，但仅添加一次，因为您的setItems([...items, allItems.find(i => !itemIds.includes(i.id))])将添加所有不在项数组中的项。