replaceOrAppend

替换数组中匹配条件的第一个元素，如果没有找到匹配的元素则追加到数组末尾。

基础用法

import { replaceOrAppend } from 'radash'

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

const updatedUsers = replaceOrAppend(
  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 replaceOrAppend<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 { replaceOrAppend } from 'radash'

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

const updatedProducts = replaceOrAppend(
  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 { replaceOrAppend } from 'radash'

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

const updatedFruits = replaceOrAppend(
  fruits,
  'orange',
  fruit => fruit === 'grape' // 找不到grape
)
// ['apple', 'banana', 'cherry', 'orange'] // orange被追加到末尾

更新用户信息

import { replaceOrAppend } from 'radash'

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

const updatedUsers = replaceOrAppend(
  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' } // 邮箱已更新
// ]

处理数字数组

import { replaceOrAppend } from 'radash'

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

// 替换第一个偶数
const updatedNumbers = replaceOrAppend(
  numbers,
  10,
  num => num % 2 === 0
)
// [1, 10, 3, 4, 5] // 第一个偶数2被替换为10

// 替换不存在的元素
const newNumbers = replaceOrAppend(
  numbers,
  100,
  num => num === 999 // 找不到999
)
// [1, 2, 3, 4, 5, 100] // 100被追加到末尾

处理字符串数组

import { replaceOrAppend } from 'radash'

const words = ['hello', 'world', 'javascript']

const updatedWords = replaceOrAppend(
  words,
  'typescript',
  word => word === 'javascript'
)
// ['hello', 'world', 'typescript'] // javascript被替换为typescript

使用索引匹配

import { replaceOrAppend } from 'radash'

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

const updatedItems = replaceOrAppend(
  items,
  'x',
  (_, index) => index === 1 // 替换索引为1的元素
)
// ['a', 'x', 'c', 'd'] // 'b'被替换为'x'

注意事项

1. 保持原数组不变: replaceOrAppend 不会修改原数组，而是返回新的数组
2. 只替换第一个匹配: 如果有多个匹配的元素，只替换第一个
3. 追加到末尾: 如果没有找到匹配的元素，新元素会被追加到数组末尾
4. 性能: 时间复杂度为 O(n)，其中 n 是数组长度
5. 匹配函数: 匹配函数应该返回布尔值

与其他方法的区别

• map(): 会处理所有元素，而不是只替换第一个匹配的
• filter(): 只过滤元素，不能替换
• replaceOrAppend(): 专门用于替换或追加操作
• splice(): 会修改原数组，而 replaceOrAppend 返回新数组

实际应用场景

1. 用户管理: 更新用户信息
2. 商品管理: 更新商品价格或信息
3. 配置管理: 更新配置项
4. 表单处理: 更新表单数据
5. 缓存管理: 更新缓存项