JavaScript列表获取指定范围值的N种方法

 更新时间:2026年05月25日 08:26:24   作者:detayun  
在日常开发中,我们经常需要从数组中提取指定范围的值,本文为大家总结了一下 JS 中获取数组指定范围值的所有方法,文中的示例代码讲解详细,有需要的小伙伴可以了解下

前言

在日常开发中,我们经常需要从数组中提取指定范围的值。比如获取最近7天的数据、提取表格中D列到F列的内容、截取数组中间一段做分析等等。

看似简单的需求,其实有 N 种实现方式!今天就来总结一下 JS 中获取数组指定范围值的所有方法,从最老的语法到最新的 ES2023 特性,一网打尽!💪

方法一览

序号方法是否修改原数组兼容性推荐度代码量
1slice(start, end)❌ 不修改✅ IE9+⭐⭐⭐⭐⭐1行
2splice(start, count)✅ 修改✅ IE4+⭐⭐⭐1行
3for + if 手动截取❌ 不修改✅ IE6+⭐⭐⭐⭐5行
4filter() + 索引❌ 不修改✅ ES5+⭐⭐⭐1行
5reduce() 累积❌ 不修改✅ ES5+⭐⭐2行
6at() + 循环(ES2022)❌ 不修改✅ ES2022+⭐⭐⭐⭐1行

方法详解

方法1:slice(start, end)⭐⭐⭐⭐⭐ 最推荐

这是 最常用、最简洁 的方法,左闭右开,不会修改原数组!

const list = [10, 20, 30, 40, 50, 60, 70];

// ✅ 提取索引 2 到 5(不包含5)
const sub1 = list.slice(2, 5);
console.log(sub1); // [30, 40, 50]

// ✅ 提取索引 3 到末尾
const sub2 = list.slice(3);
console.log(sub2); // [40, 50, 60, 70]

// ✅ 使用负数索引(从末尾开始)
const sub3 = list.slice(-4, -1);
console.log(sub3); // [40, 50, 60]

// ✅ 提取最后一个元素(等同于 at(-1))
const sub4 = list.slice(-1);
console.log(sub4[0]); // 70

关键规则

规则说明示例
slice(start, end)左闭右开,包含 start,不包含 endslice(2,5) → 索引 2,3,4
slice(start)从 start 到末尾slice(3) → 索引 3,4,5…
slice(-3)倒数第3个到末尾slice(-3) → 最后3个
slice(-4,-1)倒数第4个到倒数第1个(不含)→ 倒数第4,3,2个
start >= end返回空数组slice(5,2)[]

底层原理slice() 是浅拷贝,对于嵌套数组/对象,内部引用仍指向原数据。

方法2:splice(start, count)⭐⭐⭐ 会修改原数组!

splice()删除并返回指定范围的元素,原数组会被修改

const list = [10, 20, 30, 40, 50];

// ✅ 从索引1开始,删除3个元素
const removed = list.splice(1, 3);
console.log(removed); // [20, 30, 40]
console.log(list);    // [10, 50]  ⚠️ 原数组被改了!

适用场景:需要同时删除并获取元素时使用。

方法用途是否修改原数组
slice(start, end)提取范围(只读)❌ 不修改
splice(start, count)删除范围(可写)✅ 修改

方法3:for+if手动截取 ⭐⭐⭐⭐ 兼容老浏览器

如果需要复杂条件判断(比如排除空行),用手动循环最灵活!

const list = [10, 20, 30, 40, 50, 60, 70];
const result = [];

// ✅ 提取索引 2 到 5 的元素
for (let i = 2; i < 5; i++) {
  result.push(list[i]);
}
console.log(result); // [30, 40, 50]

// ✅ 提取索引 3 到末尾
for (let i = 3; i < list.length; i++) {
  result.push(list[i]);
}
console.log(result); // [40, 50, 60, 70]

实战案例:排除空行数据(JS宏场景)

// 读取表格数据,排除空行
function getTableData(sheetData) {
  let results = [];
  // 从第1行开始(跳过表头)
  for (let i = 1; i < sheetData.length; i++) {
    let rowData = sheetData[i].slice(0, 3); // 提取前3列
    // 正则判断是否全是空白字符
    if (!/^[\s]*$/.test(rowData.join(''))) {
      results.push(rowData);
    }
  }
  return results.length > 0 ? results : "";
}

正则 /^[\s]*$/ 解析:^ 开头,[\s]* 零个或多个空白字符,$ 结尾 → 整行都是空白

方法4:filter()+ 索引判断 ⭐⭐⭐ 函数式风格

const list = [10, 20, 30, 40, 50, 60, 70];

// ✅ 提取索引 2 到 5 的元素
const sub = list.filter((_, index) => index >= 2 && index < 5);
console.log(sub); // [30, 40, 50]

// ✅ 提取倒数3个元素
const last3 = list.filter((_, index) => index >= list.length - 3);
console.log(last3); // [50, 60, 70]

优点:代码简洁,函数式风格

缺点:性能略差(需要遍历整个数组)

方法5:reduce()累积 ⭐⭐ 函数式编程

const list = [10, 20, 30, 40, 50, 60, 70];

// ✅ 提取索引 2 到 5 的元素
const sub = list.reduce((acc, cur, i) => {
  if (i >= 2 && i < 5) acc.push(cur);
  return acc;
}, []);
console.log(sub); // [30, 40, 50]

优点:函数式编程,适合链式调用

缺点:代码复杂,性能一般

方法6:at()+ 循环(ES2022)⭐⭐⭐⭐ 语义最清晰

ES2022 新增的 at() 支持负数索引,语义最清晰!

const list = [10, 20, 30, 40, 50, 60, 70];

// ✅ 提取最后3个元素
const last3 = [list.at(-3), list.at(-2), list.at(-1)];
console.log(last3); // [50, 60, 70]

// ✅ 通用函数:提取任意范围
function getRange(arr, start, end) {
  const result = [];
  for (let i = start; i < end; i++) {
    result.push(arr.at(i));
  }
  return result;
}
console.log(getRange(list, 2, 5)); // [30, 40, 50]
方法正序索引逆序索引示例
arr[i]arr[0]❌ 不支持arr[0] → 10
arr.at(i)arr.at(0)arr.at(-1)arr.at(-1) → 70

性能对比(100万次循环)

方法耗时性能排名推荐度
slice(start, end)~15ms🥇 第1名⭐⭐⭐⭐⭐
for + push~18ms🥈 第2名⭐⭐⭐⭐
at() + 循环~20ms🥉 第3名⭐⭐⭐⭐
filter()~80ms第4名⭐⭐⭐
reduce()~120ms第5名⭐⭐
splice()~25ms第6名(但会修改)⭐⭐⭐

结论slice() 性能最好,for 循环紧随其后,函数式方法稍慢但代码优雅!

安全写法(防止越界)

const list = [10, 20, 30];

// ❌ 不安全:end 超出范围会返回到末尾,但 start 超出会返回空数组
const sub1 = list.slice(5, 10); // []

// ✅ 安全写法:限制范围
function safeSlice(arr, start, end) {
  start = Math.max(0, start);
  end = Math.min(arr.length, end);
  return arr.slice(start, end);
}

console.log(safeSlice(list, 1, 10)); // [20, 30]

实战场景

场景1:获取最近7天数据

const prices = [10.5, 20.3, 15.8, 12.1, 18.9, 22.5, 19.8, 25.3, 28.7, 30.2];

// ✅ 提取最近7天
const last7 = prices.slice(-7);
console.log(last7); // [18.9, 22.5, 19.8, 25.3, 28.7, 30.2]

场景2:提取表格指定列(JS宏)

// 提取 D列 到 F列(索引3到6,左闭右开)
const fangwei = [3, 6];
const colData = sheetData[i].slice(fangwei[0], fangwei[1]);
// D列索引=3, F列索引=5, slice(3,6) → 索引3,4,5 → D,E,F列

场景3:排除空行后提取范围

const rawData = [
  [10, 20, 30],
  [],           // 空行
  [40, 50, 60],
  null,         // 空行
  [70, 80, 90]
];

const filtered = rawData.filter(row => row && row.length > 0);
const result = filtered.slice(1, 3); // 提取第2到第3行
console.log(result); // [[40, 50, 60]]

封装通用函数

/**
 * 获取数组指定范围的值
 * @param {Array} arr - 原数组
 * @param {Number} start - 起始索引(支持负数)
 * @param {Number} end - 结束索引(不包含,支持负数,可省略)
 * @returns {Array} 范围内的值
 */
function getRange(arr, start, end) {
  if (end === undefined) {
    return arr.slice(start); // 从 start 到末尾
  }
  return arr.slice(start, end);
}

// 使用示例
const list = [10, 20, 30, 40, 50, 60, 70];

console.log(getRange(list, 2, 5));    // [30, 40, 50]
console.log(getRange(list, -3));      // [50, 60, 70]
console.log(getRange(list, -4, -1));  // [40, 50, 60]

最终推荐

场景推荐方法代码
通用场景(首选)slice(start, end)arr.slice(2, 5)
现代项目(ES2022+)at() + 循环arr.at(i)
兼容老浏览器for + push手动循环
需要删除原数据splice(start, count)arr.splice(2, 3)
函数式风格filter()arr.filter((_,i)=>i>=2&&i<5)
不推荐reverse()[0]会修改原数组

总结表格(6种方法)

序号方法修改原数组兼容性性能推荐指数
1slice(start, end)IE9+🥇⭐⭐⭐⭐⭐
2splice(start, count)IE4+🥉⭐⭐⭐
3for + ifIE6+🥈⭐⭐⭐⭐
4filter()ES5+第4名⭐⭐⭐
5reduce()ES5+第5名⭐⭐
6at() + 循环ES2022+🥉⭐⭐⭐⭐

一句话总结

万能首选slice(start, end) —— 不修改原数组、性能最优、兼容性好!

语义最清晰at(index) —— 正负索引都支持,一看就懂!

最灵活for + if —— 复杂条件判断的不二之选!

以上就是JavaScript列表获取指定范围值的N种方法的详细内容,更多关于JavaScript列表获取指定范围值的资料请关注脚本之家其它相关文章!

相关文章

  • 你有必要知道的10个JavaScript难点

    你有必要知道的10个JavaScript难点

    10个JavaScript难点,你可能还不知道,不着急,本文为大家一一列出,一一攻破,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • JavaScript实现轮播图方法(逻辑清晰一看就懂)

    JavaScript实现轮播图方法(逻辑清晰一看就懂)

    这篇文章主要给大家介绍了关于JavaScript实现轮播图方法的相关资料,JS轮播图的实现核心是使用JavaScript来控制图片的切换和显示,配合HTML和CSS完成布局和样式设置,文中介绍的方法逻辑清晰一看就懂,需要的朋友可以参考下
    2023-12-12
  • JS实现数组去重的常用方法

    JS实现数组去重的常用方法

    在JavaScript开发中,数组操作是不可或缺的一部分,数组去重作为数据处理的一个常见需求,旨在从一个可能包含重复元素的数组中移除重复项,只保留唯一值,本文将详细介绍几种常见的数组去重方法,并结合实际应用场景进行探讨,需要的朋友可以参考下
    2024-12-12
  • 解析原来浏览器原生支持JS Base64编码解码

    解析原来浏览器原生支持JS Base64编码解码

    这篇文章主要介绍了解析原来浏览器原生支持JS Base64编码解码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • 魔鬼字典 JavaScript 笔记 代码比较多乱

    魔鬼字典 JavaScript 笔记 代码比较多乱

    魔鬼字典 JavaScript 笔记 代码比较多乱,对于有经验的看容易点。
    2010-03-03
  • 基于bootstrap实现广告轮播带图片和文字效果

    基于bootstrap实现广告轮播带图片和文字效果

    这篇文章主要介绍了基于bootstrap实现广告轮播带图片和文字效果,效果非常棒,需要的朋友可以参考下
    2016-07-07
  • 使用Layui搭建后台管理界面的操作方法

    使用Layui搭建后台管理界面的操作方法

    今天小编就为大家分享一篇使用Layui搭建后台管理界面的操作方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 解决给dom元素绑定click等事件无效问题的方法

    解决给dom元素绑定click等事件无效问题的方法

    本文主要介绍了解决给dom元素绑定click等事件无效问题的方法。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • JavaScript实现继承的7种方式总结

    JavaScript实现继承的7种方式总结

    用官方点的话讲继承是面向对象三大特征之一,可以使得子类具有父类的属性和方法,同时还可以在子类中重新定义以及追加属性和方法。本文整理了JavaScript实现继承的7种方式,需要的可以了解一下
    2023-04-04
  • JavaScript内置对象之Array的使用小结

    JavaScript内置对象之Array的使用小结

    这篇文章主要介绍了JavaScript内置对象之Array的使用小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05

最新评论