使用 slice() 方法可创建不包含末尾n个元素的新数组，且不修改原数组；2. 使用 splice() 可直接修改原数组，移除末尾n个元素并返回被移除的元素；3. 若项目已引入 lodash，则可使用 _.dropright() 实现更语义化、简洁的操作；4. filter() 和 reduce() 也可实现该功能，但 filter 更具可读性；5. 处理大型数组时，slice、filter、reduce 和 lodash 方法时间复杂度均为 o(n)，空间复杂度为 o(n)，而 splice 原地修改，空间复杂度较低；6. 一般推荐优先使用 slice() 或 _.dropright() 以保证代码可读性和不可变性，仅在性能瓶颈且需节省内存时考虑 splice()。
在JavaScript里，如果你想把数组末尾的N个元素去掉，
dropRight
这个方法并不是原生自带的。它通常是像Lodash这类实用工具库提供的功能。所以，要实现这个效果，我们得要么引入外部库，要么就用JS原生的数组方法自己动手来做。最直接的方式，通常是利用
slice()
方法来创建一个不包含末尾N个元素的新数组。
解决方案
要移除JavaScript数组的后N个元素，有几种常见的做法，每种都有其适用场景。
1. 使用
Array.prototype.slice()
(推荐用于创建新数组)
这是最常用也最推荐的方法，因为它不会修改原数组，而是返回一个新数组。这符合函数式编程中“不可变性”的原则，在很多现代JS开发中是首选。
const originalArray = [1, 2, 3, 4, 5, 6, 7];const n = 3; // 移除最后3个元素// slice(start, end) 会从 start 索引开始，到 end 索引（不包含）结束，截取新数组// 如果 end 是负数，则表示从数组末尾向前数const newArray = originalArray.slice(0, originalArray.length - n);console.log(newArray); // 输出: [1, 2, 3, 4]console.log(originalArray); // 输出: [1, 2, 3, 4, 5, 6, 7] (原数组未变)
需要注意的是，如果
n
大于或等于数组的长度，
slice(0, originalArray.length - n)
会返回一个空数组，这通常是符合预期的行为。
2. 使用
Array.prototype.splice()
(用于修改原数组)
如果你希望直接在原数组上操作，而不是创建一个新数组，
splice()
是一个选择。但它会改变原数组，并且返回被移除的元素。
const originalArrayMutable = [10, 20, 30, 40, 50, 60, 70];const nToSplice = 2; // 移除最后2个元素// splice(start, deleteCount)// start: 从哪个索引开始修改// deleteCount: 要删除多少个元素// 这里，我们从 `数组长度 - n` 的位置开始，删除 `n` 个元素const removedElements = originalArrayMutable.splice(originalArrayMutable.length - nToSplice, nToSplice);console.log(originalArrayMutable); // 输出: [10, 20, 30, 40, 50] (原数组已被修改)console.log(removedElements); // 输出: [60, 70] (被移除的元素)
使用
splice
时要特别小心，因为它有副作用。在大型项目中，不经意间修改了共享的数据结构可能会导致难以追踪的问题。
3. 使用 Lodash 的
_.dropRight()
如果你的项目已经引入了Lodash库，那么
_.dropRight()
就是最符合你标题需求的方法，它提供了非常直观的API。
首先，确保你的项目安装并引入了Lodash：
npm install lodash
或
yarn add lodash
// 如果是Node.js环境// const _ = require('lodash');// 如果是ES模块环境import _ from 'lodash';const lodashArray = ['a', 'b', 'c', 'd', 'e'];const nLodash = 2; // 移除最后2个元素const droppedArray = _.dropRight(lodashArray, nLodash);console.log(droppedArray); // 输出: ['a', 'b', 'c']console.log(lodashArray); // 输出: ['a', 'b', 'c', 'd', 'e'] (原数组未变，_.dropRight 也是返回新数组)
Lodash 的
_.dropRight
内部实现可能也是基于
slice
或类似的优化，但它提供了一致且易于理解的接口，尤其是在处理更复杂的集合操作时，Lodash的优势会更明显。
为什么Lodash的
dropRight
dropRight
在原生JavaScript中找不到？
这其实是一个关于库和原生API设计哲学的问题。JavaScript的核心API设计倾向于提供基础、原子性的操作，比如
slice
（切片）、
splice
（修改）、
push
（添加）、
pop
（移除末尾）等。这些方法非常灵活，可以组合起来实现各种复杂的功能。
而像Lodash这样的工具库，它们的出现是为了弥补原生API在某些高层级、特定场景下的便利性不足。
dropRight
就是一个很好的例子：它封装了“移除末尾N个元素”这个常见需求，提供了一个更具描述性、更符合人类直觉的函数名。你可以直接说“丢弃右边N个”，而不需要去思考“从索引0开始切片到数组长度减N”。
对我个人来说，我通常会先考虑原生方法。如果一个需求用原生方法写起来既简洁又清晰，那我不会为了它特意引入一个库。但如果原生实现会变得冗长、容易出错，或者项目已经广泛使用了Lodash（或其他类似库，如Ramda），那么使用库提供的封装函数无疑能提高代码的可读性和开发效率。 Lodash的优势在于它提供了大量经过优化和测试的工具函数，减少了我们编写样板代码的时间，也统一了团队的代码风格。但为了一两个函数就引入整个库，有时候也得权衡一下包体积和性能开销。
除了
slice()
slice()
和
splice()
，还有哪些思路可以实现类似效果？
虽然
slice()
和
splice()
是最直接也最常用的方法，但在JavaScript中实现“移除数组后N个元素”的效果，还有一些其他思路，有些可能更偏向函数式编程，有些则更基础。
1. 使用
Array.prototype.filter()
filter()
方法会创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。我们可以根据元素的索引来决定是否保留它。
const data = [10, 20, 30, 40, 50, 60];const dropCount = 2;const filteredArray = data.filter((_, index) => index < data.length - dropCount);console.log(filteredArray); // 输出: [10, 20, 30, 40]
这种方式非常声明式，可读性很好，因为它明确表达了“过滤掉那些索引大于等于
data.length - dropCount
的元素”。在我的日常工作中，如果我需要基于某种条件（包括索引）来创建一个新数组，
filter
经常是我的首选，因为它表达意图非常清晰。
2. 使用
Array.prototype.reduce()
reduce()
方法对数组中的每个元素执行一个由您提供的
reducer
函数，将其结果汇总为单个返回值。虽然它不是最直观的，但理论上可以实现任何数组转换。
const items = ['apple', 'banana', 'cherry', 'date', 'elderberry'];const numToRemove = 2;const reducedArray = items.reduce((accumulator, currentValue, currentIndex, array) => { if (currentIndex < array.length - numToRemove) { accumulator.push(currentValue); } return accumulator;}, []); // 初始值是一个空数组console.log(reducedArray); // 输出: ['apple', 'banana', 'cherry']
reduce
的写法相对冗长，对于这种简单的“截断”操作来说，显得有些“杀鸡用牛刀”。但如果你需要在遍历数组的同时做一些更复杂的聚合或转换，并且同时决定是否包含某个元素，
reduce
的灵活性就体现出来了。
3. 传统
for
循环
最基础的方法，通过循环遍历数组，将不需要移除的元素逐一添加到新数组中。
const original = [1, 2, 3, 4, 5];const count = 2;const result = [];for (let i = 0; i < original.length - count; i++) { result.push(original[i]);}console.log(result); // 输出: [1, 2, 3]
这种方法虽然看起来“老土”，但在某些对性能有极致要求或需要避免额外函数调用开销的场景下（尽管在现代JS引擎中，这些差异通常微乎其微），它可能仍然是一个可行的选择。它的优点是直接、易懂，且没有隐式的函数调用开销。
选择哪种方法，很大程度上取决于你对代码可读性、不可变性要求以及个人或团队编码风格的偏好。我个人倾向于
slice
或
filter
，因为它们在保持代码简洁的同时，也强调了数据不可变性，这在复杂的应用中能有效减少bug。
在处理大型数组时，性能考量和选择策略是什么？
当我们谈论处理大型数组（比如几十万甚至上百万个元素）时，性能问题就会变得比较敏感。移除数组末尾的N个元素，虽然看起来简单，但不同的实现方式在时间和空间复杂度上会有差异。
时间复杂度 (Time Complexity):
slice()
:
O(N)
。因为它需要遍历原数组（从头到尾或者到某个点），并创建一个新的数组来存储截取的部分。即使只是截取一部分，也需要复制这些元素。
splice()
:
O(N)
。虽然它修改原数组，但如果移除的元素不在数组末尾，或者移除后需要移动大量后续元素来填补空缺，其内部操作依然需要遍历和移动元素。对于移除末尾元素，它可能比移除中间元素效率略高，因为它不需要移动后续元素，但仍然需要处理被移除的元素。
filter()
:
O(N)
。它会遍历整个数组，并为每个元素执行回调函数，然后创建一个新的数组。
reduce()
:
O(N)
。同样，它会遍历整个数组，并为每个元素执行回调函数，累积结果。Lodash
_.dropRight()
: 通常也是
O(N)
。Lodash的实现会针对不同情况进行优化，但核心操作依然是遍历和复制。
从时间复杂度上看，这些方法基本都是线性的，这意味着数组越大，操作所需的时间就越长。对于移除末尾元素这种特定场景，它们之间的常数因子差异可能很小，通常不会成为瓶颈。
空间复杂度 (Space Complexity):
slice()
:
O(N)
。因为它会创建一个新的数组来存储结果。如果原数组很大，新数组也会占用相应的内存。
filter()
:
O(N)
。同样会创建新数组。
reduce()
:
O(N)
。如果累加器是一个新数组，也会占用新数组的内存。Lodash
_.dropRight()
:
O(N)
。因为它也返回新数组。
splice()
:
O(1)
(在理想情况下)。
splice
的一个主要优势是它可以原地修改数组，这意味着它不需要额外的内存来存储整个新数组。然而，它会返回一个包含被移除元素的新数组，这个数组的内存开销是
O(N)
（N是被移除的元素数量）。如果
n
很大，这部分开销也值得注意。
选择策略：
优先考虑可读性和不变性： 对于大多数Web应用和Node.js服务，数组通常不会大到几十万上百万的级别。在这种情况下，代码的可读性、维护性和数据不变性（避免副作用）远比微小的性能差异更重要。因此，
slice()
或
filter()
常常是首选，它们返回新数组，保持原数组不变，这有助于避免难以调试的副作用。需要原地修改时： 如果你确实需要修改原数组，并且能够清晰地管理这种副作用（例如，数组是局部变量，不会被其他部分共享），那么
splice()
是唯一原生且高效的选择。但请务必谨慎使用。已引入Lodash： 如果你的项目已经在使用Lodash，那么
_.dropRight()
是最简洁、最符合语义的方案。Lodash的函数通常都经过了性能优化，你无需担心其内部实现。极端性能场景： 只有在通过性能分析工具（如Chrome DevTools的Performance面板）确认数组操作确实是性能瓶颈时，才需要考虑更底层的优化。例如，手动
for
循环并控制新数组的预分配，或者考虑使用类型化数组（Typed Arrays）等更接近底层的结构。但这种情况在日常开发中非常罕见。
总的来说，对于“移除数组末尾N个元素”的需求，我的建议是：如果不需要修改原数组，并且注重代码清晰度，
slice()
是最直接且高效的。如果项目已用Lodash，
_.dropRight()
则是最佳实践。只有在极少数对内存或执行时间有严苛要求的场景下，才需要深入研究
splice()
的具体行为或考虑更底层的循环优化。
以上就是js 怎样用dropRight移除数组的后n个元素的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1516273.html
微信扫一扫 
支付宝扫一扫 
