JavaScript 数组方法 slice

🎯 开篇：为什么 slice 方法总是让人又爱又恨？

想象一下，你正在切蛋糕：

• 用 slice 切下一块 → 蛋糕还在，你得到了一块

• 用其他方法切 → 可能把蛋糕弄坏了

JavaScript 的 slice() 方法就像一把"温柔的手术刀"，切得精准，不伤原物！

🔍 核心问题：slice 到底怎么用？

基本语法：array.slice(startIndex, endIndex)

constfruits= ['🍎', '🍌', '🍊', '🍇', '🍉']

// 基础用法
fruits.slice(1, 3)    // ['🍌', '🍊']
fruits.slice(2)       // ['🍊', '🍇', '🍉']
fruits.slice(-3)      // ['🍊', '🍇', '🍉']
fruits.slice(-3, -1)  // ['🍊', '🍇']

🎨 图解：slice 方法的工作原理

💡 slice 的三大神奇特性

1. 不改变原数组

constnumbers= [1, 2, 3, 4, 5]
constsliced=numbers.slice(1, 3)

console.log(sliced)    // [2, 3]
console.log(numbers)   // [1, 2, 3, 4, 5] - 原数组没变！

2. 支持负数索引

constletters= ['A', 'B', 'C', 'D', 'E']

letters.slice(-3)      // ['C', 'D', 'E'] - 最后3个
letters.slice(-3, -1)  // ['C', 'D'] - 倒数第3个到倒数第2个
letters.slice(-1)      // ['E'] - 最后一个

3. 可以用于数组浅拷贝

constoriginal= [1, 2, 3]
constcopy=original.slice()  // 浅拷贝

console.log(copy)      // [1, 2, 3]
console.log(copy===original)  // false - 不是同一个数组

🚀 实战应用场景

1. 获取数组最后几个元素

constmessages= ['消息1', '消息2', '消息3', '消息4', '消息5']

// 获取最后3条消息
constlastThree=messages.slice(-3)
console.log(lastThree)  // ['消息3', '消息4', '消息5']

2. 分页功能实现

functiongetPageData(data, page, pageSize) {
  conststart= (page-1) *pageSize
  constend=start+pageSize
  returndata.slice(start, end)
}

constallData= [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
constpage1=getPageData(allData, 1, 3)  // [1, 2, 3]
constpage2=getPageData(allData, 2, 3)  // [4, 5, 6]

3. 数组去重（配合 Set）

constnumbers= [1, 2, 2, 3, 3, 4, 5, 5]
constunique= [...newSet(numbers)]
// 或者
constunique2=Array.from(newSet(numbers))

⚠️ 常见陷阱与解决方案

陷阱1：混淆 slice 和 splice

constarr1= [1, 2, 3, 4, 5]
constarr2= [1, 2, 3, 4, 5]

// slice - 不改变原数组
arr1.slice(1, 3)  // 返回 [2, 3]，arr1 还是 [1, 2, 3, 4, 5]

// splice - 改变原数组
arr2.splice(1, 3)  // 返回 [2, 3, 4]，arr2 变成 [1, 5]

陷阱2：负数索引的理解

constarr= ['A', 'B', 'C', 'D']

// 负数索引从右往左数
arr.slice(-2)      // ['C', 'D'] - 最后2个
arr.slice(-2, -1)  // ['C'] - 倒数第2个到倒数第1个（不含）

🎯 总结：记住这个口诀

"slice 温柔不伤原，负数索引从右数，浅拷贝用 slice()"

🧪 小测验

constcolors= ['红', '橙', '黄', '绿', '蓝', '紫']

// 问题1：获取中间3个颜色
colors.slice(1, 4)  // ['橙', '黄', '绿']

// 问题2：获取最后2个颜色
colors.slice(-2)    // ['蓝', '紫']

// 问题3：获取除了第一个和最后一个的所有颜色
colors.slice(1, -1) // ['橙', '黄', '绿', '蓝']