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，不包含4 console.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 小于 begin const anotherEmptySlice = originalArray.slice(3, 1); console.log(anotherEmptySlice); // []
我个人觉得，刚开始学JavaScript的时候，这俩名字就容易让人犯迷糊，因为它们听起来太像了。但它们的功能和对原数组的影响简直是天壤之别。
核心区别在于：slice 是“切片”，它只负责提取，然后给你一份新的副本，原数组丝毫不受影响。而 splice 则是“拼接”或者说“剪接”，它直接在原数组上动刀子，可以删除、替换或者添加元素，并且它返回的是被删除的元素（如果删除了的话）。
来看个对比：
const arr1 = ['a', 'b', 'c', 'd', 'e'];
const arr2 = ['a', 'b', 'c', 'd', 'e'];
// 使用 slice
const slicedResult = arr1.slice(1, 4);
console.log('slice 结果:', slicedResult); // slice 结果: ['b', 'c', 'd']
console.log('slice 后原数组:', arr1); // slice 后原数组: ['a', 'b', 'c', 'd', 'e'] (原数组不变)
// 使用 splice
const 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 方法在日常开发中有着非常广泛且实用的应用，尤其是在需要保持数据不变性（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 在一些“非典型”场景下的行为。
处理稀疏数组（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方法是什么？怎么用？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
861
收藏
