JS中slice函数使用方法

在 JavaScript 中，slice() 是数组和字符串共有的方法，用于提取部分内容并返回一个新数组或子字符串，不会修改原数组/字符串。以下是详细使用方法：

一、数组的 slice() 方法

语法：arr.slice([start[, end]])参数：

start（可选）：起始索引（包含），默认为 0。若为负数，则从数组末尾开始计算（如 -3 表示倒数第 3 个元素）。
end（可选）：结束索引（不包含），默认为数组长度。负数同样从末尾计算。

示例：

const fruits = ['apple', 'banana', 'orange', 'grape', 'kiwi'];// 1. 获取前三个元素（索引 0 到 2）const firstThree = fruits.slice(0, 3);console.log(firstThree); // 输出: ['apple', 'banana', 'orange']// 2. 从索引 2 开始到末尾const fromTwo = fruits.slice(2);console.log(fromTwo); // 输出: ['orange', 'grape', 'kiwi']// 3. 使用裤悄负数索引（获取最后两个元素）const lastTwo = fruits.slice(-2);console.log(lastTwo); // 输出: ['grape', 'kiwi']// 4. 提取中间部分（宴伏索引 1 到 3）const middle = fruits.slice(1, 4);console.log(middle); // 输出: ['banana', 'orange', 'grape']二、字符串的 slice() 方法

语法：str.slice([start[, end]])参数与数组一致，但返回的是子字符串。

示例：

const message = 'Hello, World!';// 1. 提取前 5 个字符const greeting = message.slice(0, 5);console.log(greeting); // 输出: 'Hello'// 2. 从索引 7 开始到末尾const rest = message.slice(7);console.log(rest); // 输出: 'World!'// 3. 使用负数索引（获取最后 6 个字符）const endPart = message.slice(-6);console.log(endPart); // 输出: 'World!'三、关键特性

不修改原数据：slice() 返回新数组/字符串，原数据保持不变。const original = [1, 2, 3];const copied = original.slice();copied.push(4);console.log(original); // 输出: [1, 2, 3]（未改变）
浅拷贝：若数组元素是对象，拷贝的是引用（修改拷贝后的对象会影响原对象）。const users = [{name: 'Alice'}, {name: 'Bob'}];const usersCopy = users.slice();usersCopy[0].name = 'Charlie';console.log(users[0].name); // 输出: 'Charlie'（原对象被修改）

四、实际应用场景

分页显示数据：const allData = [...]; // 假晌纯携设有 100 条数据const pageSize = 10;const currentPage = 2;const paginatedData = allData.slice( (currentPage - 1) * pageSize, currentPage * pageSize);
复制数组：const arr = [1, 2, 3];const arrCopy = arr.slice(); // 等同于 [...arr]
转换类数组对象为数组：function example() { const args = Array.prototype.slice.call(arguments); // 或使用 ES6 的 Array.from(arguments)}

五、与类似方法的区别

slice(start, end) vs splice(start, deleteCount)：
slice() 不修改原数组，返回子数组。
splice() 会修改原数组，可删除/插入元素。
slice() vs substring(start, end)（字符串专用）：
两者功能类似，但 slice() 支持负数索引，substring() 会将负数视为 0。

六、完整代码示例（数组前三个元素）<!DOCTYPE html><html><head> <title>slice() 方法示例</title></head><body> <script> // 1. 创建数组 const numbers = [10, 20, 30, 40, 50]; // 2. 使用 slice(0, 3) 获取前三个元素 const firstThree = numbers.slice(0, 3); // 3. 输出结果 console.log('原数组:', numbers); // [10, 20, 30, 40, 50] console.log('前三个元素:', firstThree); // [10, 20, 30] // 4. 在页面显示（可选） document.body.innerHTML = ` <p>原数组: ${numbers}</p> <p>前三个元素: ${firstThree}</p> `; </script></body></html>

通过以上方法，你可以灵活使用 slice() 处理数组和字符串的子集提取需求。

您可能感兴趣问答

Collapsible

热门标签

热点问答