用 includes() 檢查資料是否存在

我們在寫後台系統時

常常會遇到這種需求：

• 使用者是否有這個權限？
• 這個角色是否存在？
• 這個標籤是否已經被選取？

這時候就很適合使用 includes()

真實開發情境

假設登入後取得使用者權限：

const permissions = [
  'user:view',
  'user:create',
  'user:update'
];

現在需求是判斷使用者是否有 user:create 權限

翻成程式話語就是檢查陣列裡面有沒有 user:create

核心觀念

檢查某個值是否存在

語法：

array.includes(要找的值)

如果有找到：

true

找不到：

false

文件怎麼看

MDN 文件：

MDN Array.includes() 官方文件

文件會看到：

arr.includes(searchElement)

其實意思就是：

陣列.includes(要找的資料)

例如：

permissions.includes('user:create')

這裡的：

'user:create'

就是文件裡的 searchElement。

完整實作

const permissions = [
  'user:view',
  'user:create',
  'user:update'
];

const canCreate = permissions.includes('user:create');

console.log(canCreate);

結果：

true

如果找不存在的權限：

const canDelete = permissions.includes('user:delete');

console.log(canDelete);

結果：

false

常見卡點

很多人會拿 includes() 去找物件。

例如：

const users = [
  { id: 1, name: '小明' },
  { id: 2, name: '小美' }
];

users.includes({ id: 1, name: '小明' });

結果：

false

因為物件比的是記憶體位置，不是內容。

這種情況應該使用：

find()

重點整理

includes() 用來檢查資料是否存在

array.includes(value)

它會：

• 回傳 true 或 false
• 常用於權限判斷
• 常用於標籤選取
• 常用於角色驗證

我的理解與思考

以前遇到這種需求我會先寫 find()

甚至自己跑 for 迴圈。

後來發現 includes()

其實更直覺。

因為需求本身就在問

有沒有這個東西？