异常教程

js 数组截取（长文讲解）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

在 JavaScript 开发中，数组操作是一项高频任务，而数组截取则是处理数据的核心技巧之一。无论是从购物车中提取前 N 件商品，还是从日志数据中筛选关键信息，掌握 js 数组截取 的方法都能显著提升代码的简洁性和效率。本文将系统性地讲解 JavaScript 中实现数组截取的多种方法，通过对比、案例和常见问题分析，帮助开发者快速掌握这一技能。

一、基础概念与核心方法

1.1 什么是数组截取？

数组截取是指从原始数组中提取一段连续或非连续的元素，生成一个新数组的过程。这类似于将一本厚厚的书拆分成几个章节，每章保留部分页面内容。例如，从包含 10 个元素的数组中截取前 3 个元素，或者提取索引 2 到 5 的元素。

1.2 JavaScript 数组截取的核心方法

JavaScript 提供了多个内置方法实现数组截取，最常用的是：

  • slice()：非破坏性截取，返回新数组
  • splice()：可修改原数组的截取或替换
  • substring() / substr()：字符串方法，但可用于数组的特殊场景

二、slice() 方法详解：安全的数组片段提取

2.1 slice() 的基本用法

slice(start, end) 方法从指定的 start 索引开始，截取到 end 索引（不包含 end）的元素，返回新数组，不会修改原数组。

示例 1：提取前 N 个元素

const fruits = ["苹果", "香蕉", "橙子", "葡萄", "草莓"];  
const firstThree = fruits.slice(0, 3);  
console.log(firstThree); // ["苹果", "香蕉", "橙子"]  
console.log(fruits); // 原数组不变

示例 2：负数索引的含义

当 end 为负数时，表示距离数组末尾的位置：

const numbers = [10, 20, 30, 40, 50];  
const result = numbers.slice(-3); // 截取最后 3 个元素  
console.log(result); // [30, 40, 50]

2.2 slice() 的进阶技巧

  • 省略 end 参数：截取从 start 到数组末尾的所有元素。
  • 负数 start 参数：如 slice(-2) 表示从倒数第二个元素开始到末尾。

案例：分页功能中的应用

假设有一个包含 100 条用户数据的数组，需要每页显示 10 条：

function paginate(data, pageNumber) {  
  const startIndex = (pageNumber - 1) * 10;  
  return data.slice(startIndex, startIndex + 10);  
}

三、splice() 方法：可修改原数组的截取与替换

3.1 splice() 的语法与特性

splice(start, deleteCount, item1, item2, ...) 方法直接修改原数组，功能更复杂：

  • 删除元素：通过指定 deleteCount 参数删除指定数量的元素。
  • 插入元素：通过添加 item 参数在指定位置插入新元素。
  • 替换元素：结合删除和插入操作实现元素替换。

示例：删除与插入

let tasks = ["写代码", "测试", "部署", "休息"];  
// 从索引 2 开始删除 1 个元素，并插入 "文档编写"  
const removed = tasks.splice(2, 1, "文档编写");  
console.log(tasks); // ["写代码", "测试", "文档编写", "休息"]  
console.log(removed); // ["部署"]

3.2 splice() 的截取模式

当 deleteCount 为 0 时，splice() 可用于截取数组的一部分，但返回的是被删除的元素（此时没有元素被删除，因此返回空数组）。此模式较少使用，建议优先用 slice()。

对比总结：slice() vs splice()

方法是否修改原数组返回值类型主要用途
slice()否新数组安全截取片段
splice()是被删除的元素数组删除、插入、替换元素

四、其他方法与注意事项

4.1 substring() 和 substr() 的特殊用法

虽然这两个方法主要用于字符串操作，但通过类型转换也可间接实现数组截取：

const arr = ["A", "B", "C", "D"];  
// 将数组转为字符串，再截取并转回数组（不推荐）  
const part = Array.from(arr.toString().substring(0, 3));  
console.log(part); // ["A", "B"]（实际输出可能因字符串格式不同而变化）

注意：此方法存在兼容性和可读性问题，建议优先使用 slice() 或 splice()。

4.2 常见问题与解决方案

问题 1：截取后索引超出数组长度

当 start 或 end 超过数组长度时，slice() 会自动调整到数组末尾，而 splice() 会删除到末尾。

问题 2：误用 splice() 导致原数组损坏

const original = [1, 2, 3];  
const copy = original.splice(); // 若未指定参数，会删除所有元素  
console.log(original); // []（原数组被清空）

解决方案：若需复制数组，使用 slice() 或扩展运算符 [...original]。

五、实战案例：电商购物车功能实现

5.1 场景描述

假设有一个购物车数组，需要实现以下功能：

  1. 获取前 3 件商品（展示推荐）
  2. 移除第 2 件商品并插入新品
  3. 生成商品 ID 列表（用于 API 请求）

5.2 代码实现

const cart = [  
  { id: 101, name: "手机", price: 3000 },  
  { id: 202, name: "耳机", price: 200 },  
  { id: 303, name: "充电宝", price: 150 },  
  { id: 404, name: "保护壳", price: 80 }  
];  

// 1. 截取前 3 件商品  
const top3 = cart.slice(0, 3);  

// 2. 移除第 2 件商品并插入新品  
const removed = cart.splice(1, 1, { id: 505, name: "蓝牙键盘", price: 500 });  

// 3. 提取所有商品 ID  
const ids = cart.map(item => item.id);  

console.log("前 3 件商品：", top3);  
console.log("移除的物品：", removed);  
console.log("更新后的购物车：", cart);  
console.log("商品 ID 列表：", ids);

六、性能与最佳实践

6.1 性能优化建议

  • 避免频繁操作大型数组：对于包含数万条数据的数组，多次调用 slice() 可能导致性能下降，可考虑改用原生指针操作或 Web Workers。
  • 优先使用现代语法：如使用扩展运算符 [...arr.slice(start, end)] 替代 slice()，代码更简洁。

6.2 开发者常见误区

  • 混淆索引与位置：索引从 0 开始，容易误将第 1 个元素当作索引 1。
  • 忽略副作用风险：splice() 会修改原数组，可能导致其他函数逻辑出错。

结论

掌握 js 数组截取 的核心方法（slice()、splice()）是提升代码质量的关键。通过对比不同方法的特性、结合实际案例练习，开发者可以灵活应对数据筛选、分页、动态更新等场景。建议在编码时始终遵循“先切片后操作”的原则，避免原数组意外修改，同时利用现代 JavaScript 语法简化代码结构。通过本文的讲解，希望读者能建立起对数组操作的系统性理解，并在实际项目中游刃有余地运用这些技巧。

最新发布

查看更多文章