toggle

在數組中切換元素的存在狀態。如果元素存在則移除，如果不存在則添加。

基礎用法

import { toggle } from 'radash'

const fruits = ['apple', 'banana', 'cherry']

const updated = toggle(fruits, 'banana')
// ['apple', 'cherry'] (banana被移除)

const updated2 = toggle(fruits, 'orange')
// ['apple', 'banana', 'cherry', 'orange'] (orange被添加)

語法

function toggle<T>(
  array: readonly T[],
  item: T
): T[]

參數

• array (readonly T[]): 要操作的數組
• item (T): 要切換的元素

返回值

返回一個新數組，包含切換後的元素。

示例

基本切換

import { toggle } from 'radash'

const tags = ['javascript', 'react', 'typescript']

// 移除存在的元素
const withoutReact = toggle(tags, 'react')
// ['javascript', 'typescript']

// 添加不存在的元素
const withVue = toggle(tags, 'vue')
// ['javascript', 'react', 'typescript', 'vue']

切換數字

import { toggle } from 'radash'

const numbers = [1, 2, 3, 4, 5]

const withoutThree = toggle(numbers, 3)
// [1, 2, 4, 5]

const withSix = toggle(numbers, 6)
// [1, 2, 3, 4, 5, 6]

切換對象

import { toggle } from 'radash'

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
]

const userToToggle = { id: 2, name: 'Bob' }

const updated = toggle(users, userToToggle)
// [{ id: 1, name: 'Alice' }] (Bob被移除)

const newUser = { id: 3, name: 'Charlie' }
const withNewUser = toggle(users, newUser)
// [
//   { id: 1, name: 'Alice' },
//   { id: 2, name: 'Bob' },
//   { id: 3, name: 'Charlie' }
// ]

切換布爾值

import { toggle } from 'radash'

const flags = [true, false, true]

const withoutTrue = toggle(flags, true)
// [false, true] (第一個true被移除)

const withFalse = toggle(flags, false)
// [true, false, true, false] (false被添加)

在狀態管理中使用

import { toggle } from 'radash'

interface Todo {
  id: number
  text: string
  completed: boolean
}

class TodoManager {
  private todos: Todo[] = []

  toggleTodo(todoId: number) {
    const todo = this.todos.find(t => t.id === todoId)
    if (todo) {
      this.todos = toggle(this.todos, todo)
    }
  }

  addTodo(text: string) {
    const newTodo: Todo = {
      id: Date.now(),
      text,
      completed: false
    }
    this.todos = toggle(this.todos, newTodo)
  }

  getTodos() {
    return this.todos
  }
}

const manager = new TodoManager()
manager.addTodo('Learn React')
manager.addTodo('Build app')
manager.toggleTodo(manager.getTodos()[0].id) // 移除第一個todo

處理標簽系統

import { toggle } from 'radash'

class TagManager {
  private selectedTags: string[] = []

  toggleTag(tag: string) {
    this.selectedTags = toggle(this.selectedTags, tag)
  }

  getSelectedTags() {
    return this.selectedTags
  }

  hasTag(tag: string) {
    return this.selectedTags.includes(tag)
  }
}

const tagManager = new TagManager()
tagManager.toggleTag('javascript')
tagManager.toggleTag('react')
tagManager.toggleTag('javascript') // 移除javascript

console.log(tagManager.getSelectedTags()) // ['react']

處理權限系統

import { toggle } from 'radash'

interface Permission {
  id: string
  name: string
  description: string
}

class PermissionManager {
  private userPermissions: Permission[] = []

  togglePermission(permission: Permission) {
    this.userPermissions = toggle(this.userPermissions, permission)
  }

  hasPermission(permissionId: string): boolean {
    return this.userPermissions.some(p => p.id === permissionId)
  }

  getPermissions() {
    return this.userPermissions
  }
}

const permissionManager = new PermissionManager()
const readPermission: Permission = { id: 'read', name: 'Read', description: 'Read access' }
const writePermission: Permission = { id: 'write', name: 'Write', description: 'Write access' }

permissionManager.togglePermission(readPermission)
permissionManager.togglePermission(writePermission)
permissionManager.togglePermission(readPermission) // 移除read權限

console.log(permissionManager.getPermissions()) // [writePermission]

處理收藏功能

import { toggle } from 'radash'

interface Bookmark {
  id: string
  url: string
  title: string
  timestamp: number
}

class BookmarkManager {
  private bookmarks: Bookmark[] = []

  toggleBookmark(bookmark: Bookmark) {
    this.bookmarks = toggle(this.bookmarks, bookmark)
  }

  isBookmarked(url: string): boolean {
    return this.bookmarks.some(b => b.url === url)
  }

  getBookmarks() {
    return this.bookmarks
  }
}

const bookmarkManager = new BookmarkManager()
const bookmark: Bookmark = {
  id: '1',
  url: 'https://example.com',
  title: 'Example',
  timestamp: Date.now()
}

bookmarkManager.toggleBookmark(bookmark) // 添加書簽
bookmarkManager.toggleBookmark(bookmark) // 移除書簽

處理購物車

import { toggle } from 'radash'

interface CartItem {
  id: string
  name: string
  price: number
  quantity: number
}

class ShoppingCart {
  private items: CartItem[] = []

  toggleItem(item: CartItem) {
    this.items = toggle(this.items, item)
  }

  getItems() {
    return this.items
  }

  getTotal() {
    return this.items.reduce((sum, item) => sum + (item.price * item.quantity), 0)
  }
}

const cart = new ShoppingCart()
const laptop: CartItem = { id: '1', name: 'Laptop', price: 999, quantity: 1 }
const phone: CartItem = { id: '2', name: 'Phone', price: 599, quantity: 1 }

cart.toggleItem(laptop) // 添加筆記本
cart.toggleItem(phone)  // 添加手機
cart.toggleItem(laptop) // 移除筆記本

console.log(cart.getItems()) // [phone]
console.log(cart.getTotal()) // 599

處理過濾器

import { toggle } from 'radash'

class FilterManager {
  private activeFilters: string[] = []

  toggleFilter(filter: string) {
    this.activeFilters = toggle(this.activeFilters, filter)
  }

  isFilterActive(filter: string): boolean {
    return this.activeFilters.includes(filter)
  }

  getActiveFilters() {
    return this.activeFilters
  }

  clearFilters() {
    this.activeFilters = []
  }
}

const filterManager = new FilterManager()
filterManager.toggleFilter('category:electronics')
filterManager.toggleFilter('price:under-100')
filterManager.toggleFilter('category:electronics') // 移除電子分類

console.log(filterManager.getActiveFilters()) // ['price:under-100']

處理多選列表

import { toggle } from 'radash'

class MultiSelectList {
  private selectedItems: any[] = []

  toggleItem(item: any) {
    this.selectedItems = toggle(this.selectedItems, item)
  }

  getSelectedItems() {
    return this.selectedItems
  }

  isSelected(item: any): boolean {
    return this.selectedItems.includes(item)
  }

  selectAll(items: any[]) {
    this.selectedItems = [...items]
  }

  clearSelection() {
    this.selectedItems = []
  }
}

const multiSelect = new MultiSelectList()
const options = ['Option 1', 'Option 2', 'Option 3', 'Option 4']

multiSelect.toggleItem('Option 1')
multiSelect.toggleItem('Option 2')
multiSelect.toggleItem('Option 1') // 取消選擇Option 1

console.log(multiSelect.getSelectedItems()) // ['Option 2']

注意事項

1. 保持原數組不變: toggle 不會修改原數組，而是返回新的數組
2. 引用比較: 使用嚴格相等（===）來比較元素
3. 對象比較: 對於對象，需要相同的引用才能移除
4. 性能: 時間復雜度為 O(n)，其中 n 是數組長度
5. 重復元素: 如果有多個相同的元素，只移除第一個

與其他方法的區別

• push() + filter(): 需要手動檢查元素是否存在
• toggle(): radash提供的簡潔的切換方法
• includes() + 條件操作: 需要更多的代碼來實現相同功能

實際應用場景

1. 標簽系統: 添加/移除標簽
2. 權限管理: 授予/撤銷權限
3. 收藏功能: 添加/移除收藏
4. 購物車: 添加/移除商品
5. 多選列表: 選擇/取消選擇項目