JS数组切片方法使用教程

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《JS数组切片方法详解》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

JavaScript中实现数组切片最直接且非破坏性的方式是使用slice()方法。1. slice()方法通过指定start和end索引返回新数组，原数组不变；2. 支持负数索引，便于从数组末尾定位；3. 不传参数时可实现数组的浅拷贝；4. 对于对象元素仅复制引用，修改会影响原数组；5. 需要深拷贝时可结合JSON.parse(JSON.stringify())或使用_.cloneDeep()；6. 若需同时获取切片并修改原数组，应使用splice()；7. 基于条件的“切片”可用filter()实现；8. 处理超大数据集时需考虑性能，避免内存过高。该方法因其非破坏性、简洁性和灵活性成为数组切片的理想选择，适用于绝大多数场景。

JavaScript 中实现数组切片，最直接且非破坏性的方式是使用 slice() 方法。它能根据你指定的起始和结束索引，返回一个全新的、包含原数组部分元素的新数组，而不会改变原数组本身。

解决方案

要实现数组切片，核心就是掌握 Array.prototype.slice() 方法。这个方法非常直观，它接受两个可选参数：start 和 end。

• start：指定切片的起始索引（包含）。如果省略，默认为 0。如果是负数，则表示从数组末尾开始的偏移量（例如，-1 表示倒数第一个元素）。
• end：指定切片的结束索引（不包含）。如果省略，slice() 会一直切到数组的末尾。如果是负数，同样表示从数组末尾开始的偏移量。

slice() 方法会返回一个新数组，其中包含从 start 到 end（不包括 end）的元素。原数组不会被修改，这是它与 splice() 方法最显著的区别之一。

const originalArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];

// 基本切片：从索引2开始，到索引5结束（不包含索引5）
const slicedPart1 = originalArray.slice(2, 5); // [3, 4, 5]
console.log('切片1:', slicedPart1);
console.log('原数组未变:', originalArray); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

// 从某个索引开始，切到数组末尾
const slicedPart2 = originalArray.slice(4); // [5, 6, 7, 8, 9]
console.log('切片2:', slicedPart2);

// 使用负数索引：从倒数第3个元素开始，到倒数第1个元素结束（不包含倒数第1个）
const slicedPart3 = originalArray.slice(-3, -1); // [7, 8]
console.log('切片3 (负数索引):', slicedPart3);

// 复制整个数组：不传任何参数
const fullCopy = originalArray.slice(); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log('完整复制:', fullCopy);

slice() 方法详解：为什么它是数组切片的理想选择？

在我看来，slice() 简直就是为“无痛”切片而生的。它最核心的优势在于它的“非破坏性”。这意味着无论你如何操作，原数组始终保持不变，这在编写可维护、无副作用的代码时至关重要。想象一下，如果你在一个大型应用中不小心修改了共享的数据源，那调试起来简直是噩梦。slice() 就避免了这种潜在的陷阱。

它不仅能从数组的任意位置开始切片，还能通过负数索引提供极大的便利性。比如，你想要获取数组的最后 N 个元素，用 slice(-N) 就搞定了，不用先计算数组长度再减去 N。这种设计哲学，就是让开发者能更专注于逻辑本身，而不是去担心底层的数据状态。

此外，slice() 返回的是一个“浅拷贝”。这意味着如果原数组中的元素是基本类型（数字、字符串、布尔值等），那么新数组中的元素就是这些值的副本。但如果元素是对象（包括数组），那么新数组中存储的只是这些对象的引用。换句话说，新数组和原数组的对应对象元素指向的是同一个对象。如果你修改了新数组中某个对象的属性，原数组中对应的对象也会受到影响。这一点在处理复杂数据结构时需要特别留意。

const objectsArray = [{ id: 1, name: 'A' }, { id: 2, name: 'B' }, { id: 3, name: 'C' }];
const slicedObjects = objectsArray.slice(0, 2);

console.log('切片对象数组:', slicedObjects); // [{ id: 1, name: 'A' }, { id: 2, name: 'B' }]

// 修改切片数组中的对象
slicedObjects[0].name = 'Alice';

console.log('修改后切片对象数组:', slicedObjects); // [{ id: 1, name: 'Alice' }, { id: 2, name: 'B' }]
console.log('原数组对应对象也变了:', objectsArray[0]); // { id: 1, name: 'Alice' }

这种浅拷贝特性，有时是优点（节省内存，快速），有时是陷阱（意外修改）。理解它，才能更好地利用 slice()。

深入理解 splice() 与 slice() 的区别：何时使用 splice() 进行切片操作？

说到数组操作，splice() 总是绕不开的话题，因为它也涉及“切”的动作。但和 slice() 最大的不同在于，splice() 是一个破坏性操作。它的主要目的是在数组中添加、删除或替换元素。当你用 splice() 移除元素时，它会返回一个包含被移除元素的新数组。这个返回的数组，在某种意义上，就像一个“切片”。

splice() 的语法是 array.splice(start, deleteCount, item1, item2, ...)。

• start：指定修改的起始索引。
• deleteCount：指定要删除的元素数量。
• itemN：要添加到数组中的新元素。

所以，如果你的目标不仅仅是获取一个切片，而是同时希望从原数组中“剪切”掉一部分元素，那么 splice() 就派上用场了。它更像是外科手术刀，切下来的部分是你想要的，但原数组也因此发生了变化。

举个例子，假设你有一个任务列表，完成的任务需要从列表中移除，但你又想记录下这些被移除的任务：

let todoList = ['买菜', '写代码', '健身', '看电影', '整理房间'];

// 假设 '写代码' 和 '健身' 已经完成，需要从列表中移除并记录
const completedTasks = todoList.splice(1, 2); // 从索引1开始，删除2个元素

console.log('已完成的任务:', completedTasks); // ['写代码', '健身']
console.log('剩余待办事项:', todoList); // ['买菜', '看电影', '整理房间']

在这种场景下，splice() 的“切片”功能（返回被删除的元素）与它的“修改原数组”功能完美结合，一石二鸟。但如果只是单纯想从一个大数组中提取一部分数据进行分析或展示，而不影响原数据源，那 slice() 才是你的不二之选。选择哪个方法，完全取决于你的业务需求和对原数组是否需要保持不变的考量。

超越基础：当 slice() 不够用时，如何灵活处理数组切片？

有时候，我们对“切片”的需求不仅仅是基于索引的。比如，我们可能想根据某个条件来“切”出符合要求的元素，或者在切片后还需要对结果进行深拷贝，又或者是在处理非常规数据结构时。

1. 条件切片：filter() 方法的妙用 当你的“切片”逻辑不是“从 A 到 B”，而是“所有满足条件 C 的元素”时，filter() 方法就显得非常强大了。它遍历数组中的每个元素，并根据你提供的回调函数返回一个新数组，其中只包含通过测试的元素。这虽然不是传统的索引切片，但它实现了基于逻辑的“数据筛选切片”。

   const products = [
       { id: 1, name: 'Laptop', price: 1200 },
       { id: 2, name: 'Mouse', price: 25 },
       { id: 3, name: 'Keyboard', price: 75 },
       { id: 4, name: 'Monitor', price: 300 }
   ];
   
   // 筛选出价格低于100的产品
   const affordableItems = products.filter(product => product.price < 100);
   console.log('价格低于100的产品:', affordableItems);
   // [{ id: 2, name: 'Mouse', price: 25 }, { id: 3, name: 'Keyboard', price: 75 }]

   这里，我们不是通过索引来切，而是通过“价格”这个属性来“切”出我们想要的数据子集。

2. 深拷贝切片：避免浅拷贝陷阱 前面提到 slice() 是浅拷贝。如果你的数组元素是对象，并且你希望修改切片后的对象而不影响原数组中的对应对象，那么你需要进行深拷贝。一种常见且相对简单的方法是使用 JSON.parse(JSON.stringify())。

   const originalObjects = [{ id: 1, value: 'A' }, { id: 2, value: 'B' }];
   const shallowSliced = originalObjects.slice(0, 1);
   const deepSliced = JSON.parse(JSON.stringify(originalObjects.slice(0, 1)));
   
   shallowSliced[0].value = 'Modified A (shallow)';
   deepSliced[0].value = 'Modified A (deep)';
   
   console.log('原数组:', originalObjects); // [{ id: 1, value: 'Modified A (shallow)' }, { id: 2, value: 'B' }]
   console.log('浅切片:', shallowSliced); // [{ id: 1, value: 'Modified A (shallow)' }]
   console.log('深切片:', deepSliced); // [{ id: 1, value: 'Modified A (deep)' }]

   请注意，JSON.parse(JSON.stringify()) 有其局限性，例如不能处理函数、undefined、Date 对象等特殊类型。对于更复杂的深拷贝需求，你可能需要使用 Lodash 的 _.cloneDeep() 或自己实现一个递归深拷贝函数。

3. 性能考量与大型数据集 对于大多数前端应用来说，slice() 的性能是足够的。JavaScript 引擎对这些原生方法进行了高度优化。但在处理数百万甚至上千万级别的大型数据集时，你可能需要重新思考数据处理策略。直接在内存中操作整个大数组，即使是 slice() 这样的非破坏性操作，也可能消耗大量内存或导致性能瓶颈。

   在这种极端情况下，我们可能不会直接进行“数组切片”，而是转向流式处理、分页加载、或者使用专门的数据处理库（如 Apache Arrow、WebAssembly 结合 C++/Rust 等）来处理数据，只在必要时将小部分数据加载到内存中进行操作。但对于日常开发，slice() 绝对是你的首选利器。

以上就是《JS数组切片方法使用教程》的详细内容，更多关于slice(),浅拷贝,数组切片,splice(),非破坏性的资料请关注golang学习网公众号！