replace

替換數組中匹配條件的第一個元素。

基礎用法

import { replace } from 'radash'

const users = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 35 }
]

const updatedUsers = replace(
  users,
  { id: 2, name: 'Bob', age: 31 }, // 新數據
  user => user.id === 2 // 匹配條件
)
// [
//   { id: 1, name: 'Alice', age: 25 },
//   { id: 2, name: 'Bob', age: 31 }, // 已更新
//   { id: 3, name: 'Charlie', age: 35 }
// ]

語法

function replace<T>(
  array: readonly T[],
  item: T,
  matcher: (item: T, index: number, array: readonly T[]) => boolean
): T[]

參數

• array (readonly T[]): 要操作的數組
• item (T): 要替換的新元素
• matcher (function): 用於匹配元素的函數
  • item (T): 當前元素
  • index (number): 當前元素的索引
  • array (readonly T[]): 原數組

返回值

返回一個新數組，包含替換後的元素。如果沒有找到匹配的元素，返回原數組。

示例

替換現有元素

import { replace } from 'radash'

const products = [
  { id: 1, name: 'Laptop', price: 999 },
  { id: 2, name: 'Phone', price: 599 },
  { id: 3, name: 'Tablet', price: 399 }
]

const updatedProducts = replace(
  products,
  { id: 2, name: 'Phone', price: 549 }, // 降價了
  product => product.id === 2
)
// [
//   { id: 1, name: 'Laptop', price: 999 },
//   { id: 2, name: 'Phone', price: 549 }, // 已更新
//   { id: 3, name: 'Tablet', price: 399 }
// ]

替換簡單值

import { replace } from 'radash'

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

const updatedNumbers = replace(numbers, 10, num => num === 3)
// [1, 2, 10, 4, 5] // 3被替換為10

const words = ['hello', 'world', 'javascript']
const updatedWords = replace(words, 'typescript', word => word === 'javascript')
// ['hello', 'world', 'typescript'] // javascript被替換為typescript

使用索引匹配

import { replace } from 'radash'

const items = ['a', 'b', 'c', 'd']

const updatedItems = replace(items, 'x', (_, index) => index === 1)
// ['a', 'x', 'c', 'd'] // 索引1的元素被替換為'x'

替換不存在的元素

import { replace } from 'radash'

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

const updatedFruits = replace(fruits, 'orange', fruit => fruit === 'grape')
// ['apple', 'banana', 'cherry'] // 沒有找到grape，返回原數組

替換對象數組中的元素

import { replace } from 'radash'

const users = [
  { id: 1, name: 'Alice', email: 'alice@example.com' },
  { id: 2, name: 'Bob', email: 'bob@example.com' },
  { id: 3, name: 'Charlie', email: 'charlie@example.com' }
]

const updatedUsers = replace(
  users,
  { id: 2, name: 'Bob', email: 'bob.new@example.com' },
  user => user.id === 2
)
// [
//   { id: 1, name: 'Alice', email: 'alice@example.com' },
//   { id: 2, name: 'Bob', email: 'bob.new@example.com' }, // 郵箱已更新
//   { id: 3, name: 'Charlie', email: 'charlie@example.com' }
// ]

替換嵌套對象

import { replace } from 'radash'

const config = {
  settings: {
    theme: 'dark',
    language: 'en',
    notifications: true
  },
  users: [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' }
  ]
}

const updatedConfig = replace(
  config.users,
  { id: 2, name: 'Bob Updated' },
  user => user.id === 2
)
// 替換了users數組中的Bob對象

處理條件替換

import { replace } from 'radash'

const scores = [85, 92, 78, 96, 88]

// 替換第一個低於80的分數
const updatedScores = replace(scores, 80, score => score < 80)
// [85, 92, 80, 96, 88] // 78被替換為80

// 替換第一個偶數
const numbers = [1, 3, 4, 7, 9]
const updatedNumbers = replace(numbers, 0, num => num % 2 === 0)
// [1, 3, 0, 7, 9] // 4被替換為0

在狀態管理中使用

import { replace } from 'radash'

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

const todos: Todo[] = [
  { id: 1, text: 'Learn React', completed: false },
  { id: 2, text: 'Build app', completed: false },
  { id: 3, text: 'Deploy', completed: false }
]

// 標記任務為完成
const toggleTodo = (todoId: number) => {
  return replace(todos, 
    { id: todoId, text: 'Learn React', completed: true },
    todo => todo.id === todoId
  )
}

const updatedTodos = toggleTodo(1)
// 第一個任務被標記為完成

處理數組中的重復元素

import { replace } from 'radash'

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

// 替換第一個'apple'
const updatedItems = replace(items, 'orange', item => item === 'apple')
// ['orange', 'banana', 'apple', 'cherry'] // 只替換第一個apple

注意事項

1. 保持原數組不變: replace 不會修改原數組，而是返回新的數組
2. 只替換第一個匹配: 如果有多個匹配的元素，只替換第一個
3. 未找到匹配: 如果沒有找到匹配的元素，返回原數組
4. 性能: 時間復雜度為 O(n)，其中 n 是數組長度
5. 匹配函數: 匹配函數應該返回布爾值

與其他方法的區別

• map(): 會處理所有元素，而不是只替換第一個匹配的
• filter(): 只過濾元素，不能替換
• replace(): 專門用於替換操作
• splice(): 會修改原數組，而 replace 返回新數組
• replaceOrAppend(): 如果沒找到匹配會追加，而 replace 只替換

實際應用場景

1. 用戶管理: 更新用戶信息
2. 商品管理: 更新商品價格或信息
3. 配置管理: 更新配置項
4. 表單處理: 更新表單數據
5. 狀態管理: 在React等框架中更新狀態