在 JavaScript 中获取数组头部（head）与尾部（tail）元素：30-seconds-of-code 实战指南

教程文档【免费下载链接】30-seconds-of-codeCoding articles to level up your development skills项目地址https://gitcode.com/gh_mirrors/30/30-seconds-of-code点击查看免费下载数组的**头部head**指其第一个元素尾部tail指除第一个元素外的其余部分——这是函数式编程与算法题中极为常见的操作。本文以 30-seconds-of-code 仓库中 array-head-tail.md 为主体系统讲解如何在不修改原数组的前提下用解构赋值、下标访问与Array.prototype.slice()三套方案安全、简洁地获取数组的首元素与剩余部分并覆盖空数组、单元素数组等边界情况。什么是数组的 head 与 tail在任意编程语言中head与tail都是对序列最直观的切分head 是序列的第一个元素tail 是序列去掉第一个元素后剩下的部分。例如对于数组[1, 2, 3]其 head 为1tail 为[2, 3]。这一对概念的价值在于它构成了许多递归算法与函数式工具如fold、map的基础——通过不断取 head 处理、对 tail 递归可以遍历整个序列。因此如何在 JavaScript 中干净地实现这两个操作是每个开发者都应掌握的基操。需要特别强调的是本文介绍的两种主方案解构赋值与slice()都是非破坏性的它们只产生新值不会修改原数组。这与shift()、pop()等原地修改数组的破坏性方法形成鲜明对比后者在使用时应格外谨慎。方式一利用解构赋值一次取到 head 与 tail获取 head 与 tail 最简单的方式是使用 ES6 引入的解构赋值destructuring assignment语法。借助数组解构可以同时把第一个元素解构到变量head并用剩余参数rest pattern...tail将余下元素收集为新的数组const arr [1, 2, 3]; const [head, ...tail] arr; // head 1, tail [2, 3]这段代码最值得注意的一点是它对空数组同样成立。当数组为空时head会得到undefined而tail则是一个空数组[]不会抛错const arr []; const [head, ...tail] arr; // head undefined, tail []从实现原理上看解构赋值本质上是基于迭代协议iterable protocol对数组元素进行按位抽取...tail收集所有剩余元素并组成一个新数组因此原数组arr保持不变。关于数组解构的更多细节如跳过索引、默认值、嵌套解构可以参考仓库中同主题的 destructuring-assignment.md其中对 Array destructuring 一节有更完整的讲解。适用场景当你需要同时使用 head 和 tail 时例如递归遍历数组、实现 reduce 式逻辑解构赋值是最简洁的写法。方式二单独获取数组的 head解构赋值固然方便但如果只需要 head 或 tail 其中之一你既可以使用解构赋值然后忽略不需要的变量也可以用更单点的方式。用下标访问获取第一个元素获取 head 本质就是读取数组索引0处的元素使用**括号表示法bracket notation**即可const head arr (arr arr.length ? arr[0] : undefined); head([1, 2, 3]); // 1 head([]); // undefined注意这里的函数对输入做了防御性检查先确认arr存在arr 再确认它非空arr.length。这一层判断的价值在于当传入null或undefined时直接访问arr[0]会抛出TypeError加上守卫后可安全返回undefined当传入空数组时arr[0]本身就会返回undefined守卫让行为保持一致且意图明确从源码结构看arr.length的检查使该实现天然兼容拥有length属性的类数组对象array-like objects。关于类数组的一点说明原文档特别提到加入length检查后该函数实际上可处理类数组值——即像字符串、arguments对象这样具有length属性但并非真正数组的结构。不过需要留意的是对字符串直接使用括号表示法虽能取到字符但更规范的替代是String.prototype.charAt()或Array.from()转换后再操作。这个检查并非必须但作为防御性编程习惯值得保留。方式三单独获取数组的 tail获取 tail 需要返回除第一个元素以外的所有元素。Array.prototype.slice()是完成这一任务的理想工具——只要指定起始索引为1就能拿到去掉首元素后的全部剩余元素const tail arr (arr arr.length 1 ? arr.slice(1) : []); tail([1, 2, 3]); // [2, 3] tail([1]); // [] tail([]); // []与 head 类似这里也加入了守卫判断要求值存在arr 且元素个数大于 1arr.length 1。当数组只有 1 个元素或为空时直接返回空数组[]保证返回值类型始终一致——这比返回undefined更利于后续链式调用。Array.prototype.slice()的语义需要准确理解slice(start, end)返回从start到end不含之间的元素组成的新数组原数组不被修改省略end时取到数组末尾slice(1)即从索引 1 到最后支持负索引如slice(-2)取最后两个元素与越界索引越界时自动收敛到有效边界返回浅拷贝这些特性在扩展场景中非常有用。边界情况一览四种典型输入的行为对照为了便于记忆与测试把上面两套独立函数在典型输入下的行为汇总如下输入head(arr)tail(arr)[1, 2, 3]1[2, 3][1]1[][]undefined[]null/undefinedundefined[]可见head 在无元素可取时返回undefinedtail 在不足两个元素时返回空数组两条函数在防御性与返回类型一致性上都做了妥善处理。扩展阅读从数组首尾获取或移除 n 个元素理解了 head/tail 的单元素版本后不妨将其推广到n 个元素的场景。仓库中同属js语言array标签的 first-last-n-elements.md 展示了如何用一行代码取前 n 个或后 n 个元素const firstN (arr, n 1) arr.slice(0, n); const lastN (arr, n 1) arr.slice(-n); const arr [a, b, c, d]; firstN(arr); // [a] firstN(arr, 2); // [a, b] firstN(arr, 5); // [a, b, c, d]越界时返回浅拷贝 lastN(arr); // [d] lastN(arr, 2); // [c, d] lastN(arr, 5); // [a, b, c, d]与之对称的是 remove-first-last-n-array-elements.md其中明确对比了破坏性方法shift()/pop()/splice()与非破坏性方法slice()的差异并给出drop与dropLast的slice实现const drop (arr, n 1) arr.slice(n); // 去掉前 n 个 const dropLast (arr, n 1) arr.slice(0, -n); // 去掉后 n 个 drop([1, 2, 3]); // [2, 3] dropLast([1, 2, 3]); // [1, 2]这些扩展实现与本文的 head/tail 一脉相承tail(arr)等价于drop(arr, 1)head(arr)等价于firstN(arr, 1)[0]可见slice()一族工具可以统一覆盖取首尾元素的几乎所有变体。为什么优先选择非破坏性实现在 JavaScript 中获取首尾元素存在多条路径但破坏性方法有明确代价Array.prototype.shift()会原地删除第一个元素并返回它导致原数组被修改后续代码若仍引用原数组容易产生隐蔽 BugArray.prototype.pop()同理原地删除最后一个元素Array.prototype.splice()同样会修改原数组。而解构赋值与slice()始终返回新值、保持原数组不变更符合函数式编程与不可变数据immutability的实践原则。若你的代码在 React 等强调不可变更新的场景中运行这一区别尤为重要——修改原数组可能绕过状态更新机制造成 UI 与数据不一致。源码位置与文档索引本文主体对应仓库中的 content/snippets/js/s/array-head-tail.md相关材料一并列出便于深入研读content/snippets/js/s/destructuring-assignment.md解构赋值语法详解数组解构、默认值、嵌套解构content/snippets/js/s/first-last-n-elements.md用slice()获取前/后 n 个元素content/snippets/js/s/remove-first-last-n-array-elements.md破坏性 vs 非破坏性移除首尾元素content/collections/js/array.yamljs语言下array标签集合的聚合入口本文与其他数组类 snippet 均收录于此content/redirects.yaml其中记录了/js/s/head、/js/s/tail、/js/s/array-head、/js/s/array-tail四个旧路径均以 301 重定向到/js/s/array-head-tail说明该文档在站点中承担了 head/tail 主题的唯一权威入口。小结获取数组的 head 与 tail 是 JavaScript 日常开发中的高频操作。核心要点可归纳为三条同时取 head 与 tail优先使用解构赋值const [head, ...tail] arr;空数组时得到head undefined、tail []只取 head用arr[0]配合存在性/非空守卫兼顾类数组与空值安全只取 tail用arr.slice(1)配合长度守卫保证返回空数组而非undefined。三套方案均不修改原数组配合slice()一族工具firstN/lastN/drop/dropLast足以应对从取首尾元素到取/删 n 个元素的绝大多数实际需求。赞分享教程文档【免费下载链接】30-seconds-of-codeCoding articles to level up your development skills项目地址https://gitcode.com/gh_mirrors/30/30-seconds-of-code点击查看免费下载相关推荐终极指南如何用Lodash的head、tail与last函数优雅处理数组首尾元素终极指南如何用Lodash的head、tail与last函数优雅处理数组首尾元素 在JavaScript开发中数组操作是日常任务的重要组成部分。无论是获取数前端后端旅行视频SEO化如何用Timeline Visualizer的标题模板让作品更容易被搜索到旅行视频SEO化如何用Timeline Visualizer的标题模板让作品更容易被搜索到 想让旅行视频被更多人搜到关键往往不在画质而在标题。Timeli教程文档解锁Wand游戏修改器全部高级功能5分钟免费激活终极指南解锁Wand游戏修改器全部高级功能5分钟免费激活终极指南 还在为Wand原WeMod游戏修改器的付费墙而烦恼吗Wand Enhancer为你提供了一个完教程文档上一篇Slang 生成式设计文档的审查实践03-semantic-check 审查报告的机制、发现与源码佐证下一篇Pyfa终极指南免费开源的EVE Online舰船配置神器创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考