javascript的array.prototype.slice方法用于从现有数组中提取指定索引范围的元素并生成新数组，且不会修改原数组。1. 它接受两个可选参数begin和end，begin指定开始索引（默认为0，负数表示从末尾倒数），end指定结束索引（不包含该索引元素，默认为数组末尾）；2. 返回一个包含提取元素的新数组，原数组保持不变；3. 常用于数组复制、子集提取、类数组对象转换等场景；4. 在处理稀疏数组时保留空槽，在处理非数组对象时可通过call或apply将其转换为数组。
JavaScript的Array.prototype.slice方法，简单来说，就是一个用来从现有数组中“切”出一段内容，然后生成一个全新的数组的方法。它不会改变原始数组，这很重要。
解决方案
Array.prototype.slice() 方法的精髓在于它的非破坏性（non-mutating）。它允许你基于一个数组的某个部分，创建一个浅拷贝（shallow copy）的新数组。想象一下你有一条长长的面条，slice就是剪刀，你剪下了一段，但原来的面条还在那里，并没有变短。
这个方法的语法是 arr.slice([begin[, end]])。
立即学习“Java免费学习笔记（深入）”；
begin（可选）：指定开始提取元素的索引。如果省略，slice 会从索引 0 开始。如果是负数，它会从数组的末尾开始计算，例如 -1 表示倒数第一个元素，-2 表示倒数第二个，以此类推。如果 begin 超出数组的长度，结果会是一个空数组。end（可选）：指定结束提取元素的索引（不包含该索引处的元素）。如果省略，slice 会提取到数组的末尾。如果是负数，同样从数组末尾计算。如果 end 小于或等于 begin，或者 end 超出数组长度，结果通常会是一个空数组（除非 begin 也超出了）。
slice 方法返回一个包含提取元素的新数组。
看几个例子可能更直观：
const originalArray = ['apple', 'banana', 'orange', 'grape', 'kiwi'];// 1. 完整复制一个数组const fullCopy = originalArray.slice();console.log(fullCopy); // ['apple', 'banana', 'orange', 'grape', 'kiwi']console.log(originalArray); // ['apple', 'banana', 'orange', 'grape', 'kiwi'] (原数组未变)// 2. 从指定索引开始到末尾const fromIndex2 = originalArray.slice(2);console.log(fromIndex2); // ['orange', 'grape', 'kiwi']// 3. 从指定索引开始到指定索引之前const from1To3 = originalArray.slice(1, 4); // 包含索引1、2、3，不包含4console.log(from1To3); // ['banana', 'orange', 'grape']// 4. 使用负数索引const lastTwo = originalArray.slice(-2); // 从倒数第二个开始到末尾console.log(lastTwo); // ['grape', 'kiwi']const middlePart = originalArray.slice(-4, -1); // 从倒数第四个开始，到倒数第一个之前console.log(middlePart); // ['banana', 'orange', 'grape']// 5. begin 超出长度const emptySlice = originalArray.slice(10);console.log(emptySlice); // []// 6. end 小于 beginconst anotherEmptySlice = originalArray.slice(3, 1);console.log(anotherEmptySlice); // []
slice 和 splice 有什么区别？
我个人觉得，刚开始学JavaScript的时候，这俩名字就容易让人犯迷糊，因为它们听起来太像了。但它们的功能和对原数组的影响简直是天壤之别。
核心区别在于：slice 是“切片”，它只负责提取，然后给你一份新的副本，原数组丝毫不受影响。而 splice 则是“拼接”或者说“剪接”，它直接在原数组上动刀子，可以删除、替换或者添加元素，并且它返回的是被删除的元素（如果删除了的话）。
来看个对比：
const arr1 = ['a', 'b', 'c', 'd', 'e'];const arr2 = ['a', 'b', 'c', 'd', 'e'];// 使用 sliceconst slicedResult = arr1.slice(1, 4);console.log('slice 结果:', slicedResult); // slice 结果: ['b', 'c', 'd']console.log('slice 后原数组:', arr1); // slice 后原数组: ['a', 'b', 'c', 'd', 'e'] (原数组不变)// 使用 spliceconst splicedResult = arr2.splice(1, 3, 'x', 'y'); // 从索引1开始删除3个元素，并插入'x', 'y'console.log('splice 结果 (被删除的元素):', splicedResult); // splice 结果 (被删除的元素): ['b', 'c', 'd']console.log('splice 后原数组:', arr2); // splice 后原数组: ['a', 'x', 'y', 'e'] (原数组被修改了！)
你看，slice 就像是拍了张照片，原物还在；splice 则是直接改造了原物。理解这个本质区别，用起来就不会混淆了。
slice 在哪些实际场景中特别有用？
slice 方法在日常开发中有着非常广泛且实用的应用，尤其是在需要保持数据不变性（immutability）的场景下，它简直是神器。
创建数组的浅拷贝： 这是最常见的用途之一。当你需要对一个数组进行操作，但又不想影响原始数组时，arr.slice() (不带参数) 是最简洁的复制方式。这在函数式编程或者像 React/Redux 这样的状态管理库中尤为重要，因为它们推崇不可变数据流。
const originalData = [{id: 1}, {id: 2}];const newData = originalData.slice(); // 得到一个新数组，但内部对象仍然是引用newData[0].id = 100;console.log(originalData[0].id); // 100 (浅拷贝的特性：内部对象还是同一个引用)// 如果要深拷贝，则需要 JSON.parse(JSON.stringify(originalData)) 或 lodash.cloneDeep
将类数组对象（Array-like Objects）转换为真正的数组： 很多时候，我们会遇到一些长得像数组但不是真正数组的对象，比如函数内部的 arguments 对象，或者 DOM 操作返回的 NodeList。它们有 length 属性和索引访问，但没有 Array.prototype 上的方法。slice 就能派上用场了。
function sumAll() { // arguments 是一个类数组对象 const argsArray = Array.prototype.slice.call(arguments); // 或 [].slice.call(arguments) return argsArray.reduce((acc, val) => acc + val, 0);}console.log(sumAll(1, 2, 3, 4)); // 10// 假设 document.querySelectorAll 返回一个 NodeList// const divs = document.querySelectorAll('div');// const divArray = Array.prototype.slice.call(divs);// 现在 divArray 就可以使用所有数组方法了
这个技巧非常经典，尤其是在 ES6 普及之前，现在有了展开运算符 ...，转换起来更方便了 ([...arguments])，但理解 slice 的这种用法仍然很有价值。
提取数组的子集： 比如在分页功能中，你可能需要从一个大数组中取出当前页的数据；或者在显示有限列表时，只展示前 N 项。
const allItems = Array.from({length: 100}, (_, i) => `Item ${i + 1}`);const pageSize = 10;const currentPage = 3; // 第三页const startIndex = (currentPage - 1) * pageSize;const endIndex = startIndex + pageSize;const itemsForCurrentPage = allItems.slice(startIndex, endIndex);console.log(itemsForCurrentPage); // ['Item 21', ..., 'Item 30']
结合其他数组方法实现复杂逻辑： 你可以先 filter 一个数组，然后对结果 slice 取前几项，或者先 slice 一部分再 map。这种链式操作在数据处理中非常常见。
slice 处理稀疏数组或非数组对象时表现如何？
这部分内容其实蛮有意思的，它揭示了 slice 在一些“非典型”场景下的行为。
处理稀疏数组（Sparse Arrays）：稀疏数组是指那些数组中存在“空槽”的数组，比如 [1, , 3]。当 slice 遇到稀疏数组时，它会保留这些空槽。换句话说，新生成的数组在对应位置上，依然是空的（empty）。它不会去填充这些空缺，只是原样复制。
const sparseArray = [1, , 3, 4, , 6];const slicedSparse = sparseArray.slice(1, 5);console.log(slicedSparse); // [empty, 3, 4, empty]console.log(slicedSparse.length); // 4 (长度是正确的，但中间有空洞)
这和 map、forEach 等方法跳过空槽的行为是一致的，体现了 JavaScript 对稀疏数组的处理方式。
处理非数组对象（Array-like Objects）：前面在“实际场景”中已经提到了，slice 可以通过 call 或 apply 方法作用于那些拥有 length 属性和索引元素的非数组对象。这种能力是 slice 的一个强大特性，让它能够“借用”数组的方法。
const myObject = { 0: 'hello', 1: 'world', length: 2, 2: 'extra' // 即使有额外的属性，只要 length 限制了，slice 也只看 length 范围内的};const newArray = Array.prototype.slice.call(myObject);console.log(newArray); // ['hello', 'world']console.log(Array.isArray(newArray)); // true// 如果没有 length 属性，或者 length 为 0，结果就是空数组const anotherObject = { 0: 'test'};const emptyArray = Array.prototype.slice.call(anotherObject);console.log(emptyArray); // [] (因为没有 length 属性，或者说 length 默认为 0)const objWithNoLength = { a: 1, b: 2 };const resultNoLength = Array.prototype.slice.call(objWithNoLength);console.log(resultNoLength); // []
这里就体现出JavaScript的灵活，但也可能让人有点困惑的地方。它不会填补那些空缺，只是原样复制。而对那些长得像数组但又不是数组的家伙，slice简直是它们的“变身术”，让它们瞬间拥有了数组的强大能力。这个特性在处理 DOM 集合或者自定义数据结构时非常有用。
以上就是JavaScript的Array.prototype.slice方法是什么？怎么用？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1508592.html
微信扫一扫 
支付宝扫一扫 
