尧图网页设计 
教程文档【免费下载链接】30-seconds-of-codeCoding articles to level up your development skills项目地址https://gitcode.com/gh_mirrors/30/30-seconds-of-code点击查看免费下载在处理对象数组时经常需要若已存在则替换、不存在则追加的幂等更新逻辑。本文基于 30 seconds of code 仓库中的 replace-or-append-array-value.md 片段完整讲解replaceOrAppend工具函数的实现原理、比较函数设计、浅拷贝与不可变更新策略并结合仓库源码给出可直接复制的实战代码与边界讨论。为什么需要替换或追加数组值在处理 JavaScript 数组时尤其是数组元素是对象的场景下常常会遇到这样的需求往数组里写入一条数据如果已存在按某个唯一标识判断就更新原位置的值如果不存在就在末尾追加。典型场景包括维护用户列表按id或name作为唯一键做幂等写入表单编辑后的数据落库避免同一行数据被重复添加实时推送数据的去重合并按业务主键合并新旧状态。从直觉上看这个需求并不复杂但实现时很容易踩坑直接对原数组做push或赋值操作会原地修改数组用indexOf判断对象是否相等又因为引用比较而失效。为此30 seconds of code 的 replace-or-append-array-value.md 给出了一种简洁、通用的实现本文将其展开并深入拆解。核心思路三步走的算法设计原文档给出的算法可以归纳为三步判定存在性使用Array.prototype.findIndex()配合一个比较函数compFn找到目标项在数组中的下标分支处理若下标为-1不存在用Array.prototype.push()追加到末尾否则用Array.prototype.splice()在原下标处替换返回新数组函数开头先用扩展运算符...创建原数组的浅拷贝所有修改都作用在拷贝上最后返回新数组保证原数组不被污染。完整实现与逐行解析以下是原文档中的完整实现位于 replace-or-append-array-value.mdconst replaceOrAppend (arr, val, compFn) { const res [...arr]; const i arr.findIndex(v compFn(v, val)); if (i -1) res.push(val); else res.splice(i, 1, val); return res; };逐行拆解如下代码作用与说明const res [...arr]用扩展运算符创建arr的浅拷贝后续修改不触碰原数组arr.findIndex(v compFn(v, val))遍历arr找到第一个使compFn(v, val)为真值的元素下标找不到时返回-1if (i -1) res.push(val)目标不存在将新值追加到拷贝数组末尾else res.splice(i, 1, val)目标存在从下标i处删除 1 个元素并插入val实现原位置替换return res返回新数组原数组保持不变函数签名(arr, val, compFn)的三个参数含义如下arr目标数组函数不会修改它val要替换或追加的新值可以是对象、原始值等任意类型compFn比较函数接收数组中的现有元素与新值两个参数compFn(v, val)返回真值表示这两个元素视为同一个。比较函数让对象也能按业务键匹配这是整个方案最灵活也最关键的部分。因为数组元素是对象时indexOf/includes走的是严格引用比较两个内容相同但引用不同的对象永远不会被判定为相等。而compFn允许我们自定义业务相等规则。以原文档的示例replace-or-append-array-value.md为例按name字段判断同一人const people [ { name: John, age: 30 }, { name: Jane, age: 28 }, ]; const jane { name: Jane, age: 29 }; // 名字相同 → 视为已存在应替换 const jack { name: Jack, age: 28 }; // 名字不同 → 不存在应追加 // 按 name 匹配Jane 已存在原地替换为 age: 29 replaceOrAppend(people, jane, (a, b) a.name b.name); // [ { name: John, age: 30 }, { name: Jane, age: 29 } ] // Jack 不存在追加到末尾 replaceOrAppend(people, jack, (a, b) a.name b.name); // [ // { name: John, age: 30 }, // { name: Jane, age: 28 }, // { name: Jack, age: 28 } // ]注意第二个示例的结果追加的是jack而数组中原有的Jane条目未被触碰这正是仅在存在时替换语义的体现。compFn的常见写法还有// 按 id 匹配 replaceOrAppend(users, newUser, (a, b) a.id b.id); // 多个字段联合匹配 replaceOrAppend(items, newItem, (a, b) a.code b.code a.type b.type ); // 忽略大小写的匹配 replaceOrAppend(names, BOB, (a, b) a.toLowerCase() b.toLowerCase() );不可变更新为什么先做浅拷贝原文档特别强调与其原地修改数组不如返回一个包含更新后元素的新数组。这里有几个关键考量避免副作用调用方持有的原数组引用不被破坏便于 React 等框架按引用比较判断状态变化、也便于函数式编程中保持数据不可变浅拷贝的边界[...arr]只复制数组第一层元素引用元素内部对象仍与源共享引用。本函数只做整体替换某个元素的操作不修改元素内部属性因此浅拷贝足够若需要深拷贝元素则要考虑structuredClone等深拷贝手段语义清晰函数名replaceOrAppend表达的是计算新数组的纯函数式行为返回值即结果可安全用于链式调用或作为 reducer 的一部分。该片段与 30 seconds of code 仓库的js/array集合定位一致——content/collections/js/array.yaml 将这类代码定义为ES6 辅助函数集合的一部分覆盖数组、对象、算法等主题强调短小、可复用、可直接复制进项目的工具函数风格。边界情况与易错点结合实现可以推导出以下几点值得注意findIndex只命中第一个匹配项若数组中有多个元素满足compFn只有第一个会被替换其余保持不变compFn是必需的省略或传空函数会导致永远找不到目标或全部误判所以调用方必须根据业务语义提供原始值数组同样适用例如按值相等的数组可传入(a, b) a b替换保持原位置splice(i, 1, val)不会改变数组顺序替换值占据原下标追加则总是发生在末尾原数组不被修改任何一次调用后arr的内容都与调用前一致这便于在测试中验证纯函数行为。仓库定位与使用建议该片段属于 30 seconds of code 仓库的 JavaScript 数组主题内容同目录下还有 array-includes-value.md、array-comparison.md、append-elements-to-array.md 等一批数组操作片段可按需组合使用。将该函数直接复制进项目工具库即可无需引入任何依赖// lib/array.js export const replaceOrAppend (arr, val, compFn) { const res [...arr]; const i arr.findIndex(v compFn(v, val)); if (i -1) res.push(val); else res.splice(i, 1, val); return res; };一句话总结findIndex负责定位、splice负责替换、push负责追加、扩展运算符负责隔离副作用四个原语组合出一行核心逻辑即可在任何需要幂等写入数组的场景中直接复用。赞分享教程文档【免费下载链接】30-seconds-of-codeCoding articles to level up your development skills项目地址https://gitcode.com/gh_mirrors/30/30-seconds-of-code点击查看免费下载相关推荐30 Seconds of Code 数组分组实战用 reduce 按函数或属性名实现 groupBy30 Seconds of Code 数组分组实战用 reduce 按函数或属性名实现 groupBy 导读 在 JavaScript 开发中把数组元素按照教程文档30 Seconds of Code 技巧用 isSorted 高效判断 JavaScript 数值数组的升序与降序30 Seconds of Code 技巧用 isSorted 高效判断 JavaScript 数值数组的升序与降序 在 JavaScript 开发中判断一教程文档30 seconds of code 实战用 JavaScript 将 hsl() 颜色字符串转换为数组或对象30 seconds of code 实战用 JavaScript 将 hsl 颜色字符串转换为数组或对象 本篇技术指南源自仓库 content/snippe教程文档创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 30 seconds of code 数组技巧：用 findIndex + splice + push 实现替换或追加数组值
教程文档【免费下载链接】30-seconds-of-codeCoding articles to level up your development skills项目地址https://gitcode.com/gh_mirrors/30/30-seconds-of-code点击查看免费下载在处理对象数组时经常需要若已存在则替换、不存在则追加的幂等更新逻辑。本文基于 30 seconds of code 仓库中的 replace-or-append-array-value.md 片段完整讲解replaceOrAppend工具函数的实现原理、比较函数设计、浅拷贝与不可变更新策略并结合仓库源码给出可直接复制的实战代码与边界讨论。为什么需要替换或追加数组值在处理 JavaScript 数组时尤其是数组元素是对象的场景下常常会遇到这样的需求往数组里写入一条数据如果已存在按某个唯一标识判断就更新原位置的值如果不存在就在末尾追加。典型场景包括维护用户列表按id或name作为唯一键做幂等写入表单编辑后的数据落库避免同一行数据被重复添加实时推送数据的去重合并按业务主键合并新旧状态。从直觉上看这个需求并不复杂但实现时很容易踩坑直接对原数组做push或赋值操作会原地修改数组用indexOf判断对象是否相等又因为引用比较而失效。为此30 seconds of code 的 replace-or-append-array-value.md 给出了一种简洁、通用的实现本文将其展开并深入拆解。核心思路三步走的算法设计原文档给出的算法可以归纳为三步判定存在性使用Array.prototype.findIndex()配合一个比较函数compFn找到目标项在数组中的下标分支处理若下标为-1不存在用Array.prototype.push()追加到末尾否则用Array.prototype.splice()在原下标处替换返回新数组函数开头先用扩展运算符...创建原数组的浅拷贝所有修改都作用在拷贝上最后返回新数组保证原数组不被污染。完整实现与逐行解析以下是原文档中的完整实现位于 replace-or-append-array-value.mdconst replaceOrAppend (arr, val, compFn) { const res [...arr]; const i arr.findIndex(v compFn(v, val)); if (i -1) res.push(val); else res.splice(i, 1, val); return res; };逐行拆解如下代码作用与说明const res [...arr]用扩展运算符创建arr的浅拷贝后续修改不触碰原数组arr.findIndex(v compFn(v, val))遍历arr找到第一个使compFn(v, val)为真值的元素下标找不到时返回-1if (i -1) res.push(val)目标不存在将新值追加到拷贝数组末尾else res.splice(i, 1, val)目标存在从下标i处删除 1 个元素并插入val实现原位置替换return res返回新数组原数组保持不变函数签名(arr, val, compFn)的三个参数含义如下arr目标数组函数不会修改它val要替换或追加的新值可以是对象、原始值等任意类型compFn比较函数接收数组中的现有元素与新值两个参数compFn(v, val)返回真值表示这两个元素视为同一个。比较函数让对象也能按业务键匹配这是整个方案最灵活也最关键的部分。因为数组元素是对象时indexOf/includes走的是严格引用比较两个内容相同但引用不同的对象永远不会被判定为相等。而compFn允许我们自定义业务相等规则。以原文档的示例replace-or-append-array-value.md为例按name字段判断同一人const people [ { name: John, age: 30 }, { name: Jane, age: 28 }, ]; const jane { name: Jane, age: 29 }; // 名字相同 → 视为已存在应替换 const jack { name: Jack, age: 28 }; // 名字不同 → 不存在应追加 // 按 name 匹配Jane 已存在原地替换为 age: 29 replaceOrAppend(people, jane, (a, b) a.name b.name); // [ { name: John, age: 30 }, { name: Jane, age: 29 } ] // Jack 不存在追加到末尾 replaceOrAppend(people, jack, (a, b) a.name b.name); // [ // { name: John, age: 30 }, // { name: Jane, age: 28 }, // { name: Jack, age: 28 } // ]注意第二个示例的结果追加的是jack而数组中原有的Jane条目未被触碰这正是仅在存在时替换语义的体现。compFn的常见写法还有// 按 id 匹配 replaceOrAppend(users, newUser, (a, b) a.id b.id); // 多个字段联合匹配 replaceOrAppend(items, newItem, (a, b) a.code b.code a.type b.type ); // 忽略大小写的匹配 replaceOrAppend(names, BOB, (a, b) a.toLowerCase() b.toLowerCase() );不可变更新为什么先做浅拷贝原文档特别强调与其原地修改数组不如返回一个包含更新后元素的新数组。这里有几个关键考量避免副作用调用方持有的原数组引用不被破坏便于 React 等框架按引用比较判断状态变化、也便于函数式编程中保持数据不可变浅拷贝的边界[...arr]只复制数组第一层元素引用元素内部对象仍与源共享引用。本函数只做整体替换某个元素的操作不修改元素内部属性因此浅拷贝足够若需要深拷贝元素则要考虑structuredClone等深拷贝手段语义清晰函数名replaceOrAppend表达的是计算新数组的纯函数式行为返回值即结果可安全用于链式调用或作为 reducer 的一部分。该片段与 30 seconds of code 仓库的js/array集合定位一致——content/collections/js/array.yaml 将这类代码定义为ES6 辅助函数集合的一部分覆盖数组、对象、算法等主题强调短小、可复用、可直接复制进项目的工具函数风格。边界情况与易错点结合实现可以推导出以下几点值得注意findIndex只命中第一个匹配项若数组中有多个元素满足compFn只有第一个会被替换其余保持不变compFn是必需的省略或传空函数会导致永远找不到目标或全部误判所以调用方必须根据业务语义提供原始值数组同样适用例如按值相等的数组可传入(a, b) a b替换保持原位置splice(i, 1, val)不会改变数组顺序替换值占据原下标追加则总是发生在末尾原数组不被修改任何一次调用后arr的内容都与调用前一致这便于在测试中验证纯函数行为。仓库定位与使用建议该片段属于 30 seconds of code 仓库的 JavaScript 数组主题内容同目录下还有 array-includes-value.md、array-comparison.md、append-elements-to-array.md 等一批数组操作片段可按需组合使用。将该函数直接复制进项目工具库即可无需引入任何依赖// lib/array.js export const replaceOrAppend (arr, val, compFn) { const res [...arr]; const i arr.findIndex(v compFn(v, val)); if (i -1) res.push(val); else res.splice(i, 1, val); return res; };一句话总结findIndex负责定位、splice负责替换、push负责追加、扩展运算符负责隔离副作用四个原语组合出一行核心逻辑即可在任何需要幂等写入数组的场景中直接复用。赞分享教程文档【免费下载链接】30-seconds-of-codeCoding articles to level up your development skills项目地址https://gitcode.com/gh_mirrors/30/30-seconds-of-code点击查看免费下载相关推荐30 Seconds of Code 数组分组实战用 reduce 按函数或属性名实现 groupBy30 Seconds of Code 数组分组实战用 reduce 按函数或属性名实现 groupBy 导读 在 JavaScript 开发中把数组元素按照教程文档30 Seconds of Code 技巧用 isSorted 高效判断 JavaScript 数值数组的升序与降序30 Seconds of Code 技巧用 isSorted 高效判断 JavaScript 数值数组的升序与降序 在 JavaScript 开发中判断一教程文档30 seconds of code 实战用 JavaScript 将 hsl() 颜色字符串转换为数组或对象30 seconds of code 实战用 JavaScript 将 hsl 颜色字符串转换为数组或对象 本篇技术指南源自仓库 content/snippe教程文档创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考