讲师中心 微信公众号

工具推荐

视频效率加速
Laper
Laper

剧本策划到成片协作

立刻MV
立刻MV

低成本歌曲 MV、视频生成

AniShort
AniShort

AI短剧协同制作平台

剧云
剧云

中文短剧剧本制作平台

js 如何用takeRight获取数组的后n个元素

大宇大大_2651

大宇大大_2651

发布时间:2025-08-18 10:13:01

|

435人浏览过

|

来源于php中文网

原创

获取数组最后 n 个元素的推荐方法是使用 slice(-n) 或 _.takeright();1. 使用 array.prototype.slice(-n) 可直接获取末尾 n 个元素,若 n 大于数组长度则返回整个数组,若 n 为 0 或负数则返回空数组(但 slice(-0) 等同于 slice(0),返回整个数组);2. 使用 lodash 的 _.takeright(array, n) 语义更清晰,行为更符合直觉,n 为 0 或负数时明确返回空数组;选择取决于是否已引入 lodash 及对代码可读性的要求,原生 slice 无需依赖且性能佳,而 takeright 更利于表达意图且处理边界更一致。

js 如何用takeRight获取数组的后n个元素

在 JavaScript 中,如果你想获取一个数组的最后

n
个元素,最直接且推荐的方式是使用
Array.prototype.slice()
结合负数索引,或者,如果你习惯使用像 Lodash 这样的工具库,它的
_.takeRight()
方法能非常清晰地表达你的意图。

解决方案

要从 JavaScript 数组中获取末尾的

n
个元素,这里有两种常用的方法:

1. 使用原生 JavaScript 的

Array.prototype.slice()
方法:

这是最常见且无需额外依赖的方式。

slice()
方法可以接受一个负数作为起始索引,表示从数组末尾开始计算。

const myArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const n = 3; // 想要获取的最后3个元素

// 获取数组的最后 n 个元素
const lastNElements = myArray.slice(-n);
console.log(lastNElements); // 输出: [8, 9, 10]

// 如果 n 等于或大于数组长度,它会返回整个数组的副本
const allElements = myArray.slice(-15); // n=15,但数组只有10个元素
console.log(allElements); // 输出: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

// 如果 n 为 0 或负数,会返回空数组
const emptyResult = myArray.slice(0); // slice(0) 返回整个数组,但 slice(-0) 返回空数组
console.log(emptyResult); // 输出: [] (slice(-0) 的结果)
const anotherEmpty = myArray.slice(-Infinity); // slice(-Infinity) 返回整个数组
console.log(anotherEmpty); // 输出: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

这里需要澄清一下

slice(-0)
的行为,实际上
slice(0)
和
slice(-0)
都是返回整个数组的副本,因为
0
和
-0
在数值上等价,都表示从索引 0 开始。如果想要空数组,通常是
slice(0, 0)
或者
slice(anyIndex, anyIndex)
。

更正: 对于

slice(-0)
,它的行为实际上和
slice(0)
是一致的,都会返回整个数组的副本。因为
slice
的负数参数是相对于数组末尾的偏移量,
-0
依然是 0,表示从数组开头开始。如果
n
为 0,想要获取空数组,直接
[]
即可,或者
array.slice(array.length, array.length)
。

// 重新演示 n 为 0 的情况,如果要获取0个元素,通常是直接返回空数组或者不进行操作。
// slice(-0) 的行为和 slice(0) 相同,都会返回整个数组的副本。
const myArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const nZero = 0;
const lastZeroElements = myArray.slice(-nZero); // 实际上是 slice(-0),等同于 slice(0)
console.log(lastZeroElements); // 输出: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

// 如果明确需要空数组,且 n 为 0,可以这样处理:
const resultForZeroN = (nZero === 0) ? [] : myArray.slice(-nZero);
console.log(resultForZeroN); // 输出: []

2. 使用 Lodash 库的

_.takeRight()
方法:

如果你项目中已经引入了 Lodash,

_.takeRight()
是一个语义上更清晰的选择。它专门设计来获取数组的后
n
个元素。

import _ from 'lodash'; // 或者 const _ = require('lodash');

const myArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const n = 3;

// 获取数组的最后 n 个元素
const lastNElementsLodash = _.takeRight(myArray, n);
console.log(lastNElementsLodash); // 输出: [8, 9, 10]

// 行为与 slice 类似,如果 n 大于数组长度,返回整个数组
const allElementsLodash = _.takeRight(myArray, 15);
console.log(allElementsLodash); // 输出: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

// 如果 n 为 0 或负数,返回空数组
const emptyResultLodash = _.takeRight(myArray, 0);
console.log(emptyResultLodash); // 输出: []
const anotherEmptyLodash = _.takeRight(myArray, -5);
console.log(anotherEmptyLodash); // 输出: []

slice(-n)
和
_.takeRight()
,我该怎么选?

我常常思考,当我们需要数组末尾的元素时,是直接用原生

slice
呢,还是引入
takeRight
这样的工具函数?说实话,刚开始接触
takeRight
的时候,我有点疑惑,这不就是
slice(-n)
嘛?但后来发现,它确实有自己的哲学,尤其是在团队协作和代码意图表达上。

slice(-n)
是原生方法,性能上通常没得说,而且不需要额外引入库,这是它的巨大优势。它灵活,能处理各种切片需求。但它的“灵活”有时也意味着需要一点心智负担去理解负数索引的含义,以及当
n
超过数组长度时,它会默默地返回整个数组。对于一些初学者,或者在快速阅读代码时,
slice(-n)
可能不如
takeRight
那样一眼就知道“哦,这是在取右边的元素”。

_.takeRight()
则更像是为特定目的而生的。它的命名就明确告诉了你它的功能:从右边“拿走”元素。这种语义上的清晰度在大型项目中非常有价值,它减少了理解成本,让代码意图不言自明。而且,Lodash 这样的库通常会帮你处理好各种边界情况,比如
n
为 0 或负数时返回空数组,这比
slice
在处理
n=0
时的行为(返回整个数组)要更符合直觉。如果你的项目已经使用了 Lodash,那么用
_.takeRight()
简直是顺理成章。如果没用,为了一个
takeRight
而引入整个 Lodash,那可能就有点大材小用了。所以,选择哪个,更多是看你的项目上下文、团队规范以及你对代码可读性与依赖管理的权衡。

takeRight
在实际项目中的应用场景有哪些?

takeRight
(无论是 Lodash 版本还是
slice(-n)
的语义化表达)在实际开发中出镜率可不低,它解决的都是“最新数据”或者“历史记录末端”这类问题。

Springboot Vue Builder
Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流,适用于新建全栈项目或完整脚手架请求,触发后依次调用 product‑spec‑builder(需求调研)等模块。

下载

一个很典型的场景是日志或消息流展示。想象一个聊天应用,你只想显示最新的 10 条消息,或者一个系统日志面板,你只想看到最近的 20 条操作记录。这时候,日志数组或者消息数组通常是按时间顺序递增的,那么获取

takeRight(logArray, 10)
就能轻松拿到最新的 10 条。

再比如分页功能,特别是那种“加载更多”或者“无限滚动”的场景。虽然多数分页是取前面 N 条,但有时候也会有取最后 N 条的逻辑,比如在一个时间轴上展示最近的事件。

还有就是数据预览或摘要。如果有一个非常大的数据集,你可能只想给用户展示最后几条数据作为预览,比如“最近上传的 5 张图片”或者“最新加入的 3 位用户”。这都是

takeRight
的用武之地。

在一些状态管理的场景,比如实现一个简单的撤销(undo)功能,你可能维护一个操作历史栈。当用户点击撤销时,你需要获取最近一次操作,并将其从栈中移除。虽然

pop()
更直接,但如果需要预览最近的几次操作,或者在不修改原数组的情况下获取最近的 N 个操作记录,
takeRight
就很合适。它让代码意图清晰,尤其是在处理数组不变性(immutability)时,它返回一个新数组,不会影响原始数据,这在 React/Vue 等框架中是推荐的做法。

除了
takeRight
,还有哪些获取数组尾部元素的变体或替代方案?

当然,除了

slice(-n)
和
_.takeRight()
,还有一些方法可以达到类似目的,但它们各有特点,适用场景也不同。

一个常见的替代方案是结合

Array.prototype.length
和
Array.prototype.slice()
。你可以先计算出起始索引:
array.length - n
。

const myArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const n = 3;
const startIndex = Math.max(0, myArray.length - n); // 确保起始索引不会是负数
const lastElementsAlt = myArray.slice(startIndex);
console.log(lastElementsAlt); // 输出: [8, 9, 10]

这种方式虽然稍微复杂一点,但它的好处是明确地使用正数索引,对于不熟悉

slice
负数索引行为的开发者来说,可能更容易理解。特别是在需要严格控制边界,或者
n
可能导致负索引时,
Math.max(0, ...)
确保了安全。

另一个值得一提但通常不推荐用于“获取”的,是

Array.prototype.splice()
。
splice()
也能从数组中移除元素并返回被移除的元素,但它会修改原数组。如果你只是想获取,而不是移除,那么
splice
就不是一个好选择。

const myArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const n = 3;
// 警告:splice 会修改原数组!
// const removedElements = myArray.splice(myArray.length - n, n);
// console.log(removedElements); // 输出: [8, 9, 10]
// console.log(myArray);      // 输出: [1, 2, 3, 4, 5, 6, 7] - 原数组被修改了

所以,除非你的目的就是从数组末尾“剪掉”并获取这些元素,否则不要用

splice
。

对于仅仅需要获取最后一个元素的情况,

Array.prototype.pop()
是最简洁的,但它同样会修改原数组。

const myArray = [1, 2, 3, 4, 5];
const lastElement = myArray.pop(); // 5
console.log(lastElement);
console.log(myArray); // [1, 2, 3, 4]

如果你只需要获取最后一个元素而不修改数组,那么

myArray[myArray.length - 1]
才是正确且高效的选择。

在极少数情况下,为了极致的性能优化(比如处理千万级别的数据,且不希望引入额外函数调用栈),可能会考虑手动循环。但这在现代 JavaScript 开发中已经非常少见了,因为

slice
和
takeRight
的性能已经足够好,且可读性远超循环。

总的来说,当你需要获取数组尾部元素时,

slice(-n)
是原生且高效的首选。如果你偏爱函数式编程风格,或者项目中已引入 Lodash,
_.takeRight()
提供了更清晰的语义和统一的 API 体验。理解这些方法的细微差别,能帮助你写出更健壮、更易读的代码。

热门AI工具

更多
小橡皮AI

一款AI工具,主要用于小橡皮一键去AI味,将机器味重的内容改得更有活人感,防止因为 AI 内容被平台打上 AI 标签,以及限流,适合需要提升相关任务效率的用户。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

函子Zion

一款支持AI搭建、可视化编辑和多端发布的全栈无代码开发平台。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

Flowith
Flowith Hot

Flowith是一款基于画布和智能体工作流的 AI 协作工作空间。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

相关专题

更多
堆和栈的区别
堆和栈的区别

堆和栈的区别:1、内存分配方式不同;2、大小不同;3、数据访问方式不同;4、数据的生命周期。本专题为大家提供堆和栈的区别的相关的文章、下载、课程内容,供大家免费下载体验。

7067

2023.07.18

堆和栈区别
堆和栈区别

堆(Heap)和栈(Stack)是计算机中两种常见的内存分配机制。它们在内存管理的方式、分配方式以及使用场景上有很大的区别。本文将详细介绍堆和栈的特点、区别以及各自的使用场景。php中文网给大家带来了相关的教程以及文章欢迎大家前来学习阅读。

2888

2023.08.10

length函数用法
length函数用法

length函数用于返回指定字符串的字符数或字节数。可以用于计算字符串的长度,以便在查询和处理字符串数据时进行操作和判断。 需要注意的是length函数计算的是字符串的字符数,而不是字节数。对于多字节字符集,一个字符可能由多个字节组成。因此,length函数在计算字符串长度时会将多字节字符作为一个字符来计算。更多关于length函数的用法,大家可以阅读本专题下面的文章。

2007

2023.09.19

go语言 数组和切片
go语言 数组和切片

本专题整合了go语言数组和切片的区别与含义,阅读专题下面的文章了解更多详细内容。

2192

2025.09.03

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

5036

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

1455

2023.07.28

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

1938

2023.08.03

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

10563

2023.08.17

Go-Zero API开发使用教程
Go-Zero API开发使用教程

本专题聚焦Go-Zero的API开发,拆解.api描述文件的语法结构、路由与分组定义、参数绑定与校验规则,说明统一响应体、JWT鉴权、跨域与接口文档生成的落地方式,并给出网关聚合与接口测试的实践建议。

100

2026.11.12

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app快速上手
uni-app快速上手

共0课时 | 0人学习

Vue 教程
Vue 教程

共42课时 | 17.5万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 2.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn