欢迎来到叶子的博客

slice() 可以用于数组和字符串，能提取一部分数据的同时不会改变原始数据。

---

1. slice() 方法操作数组

slice() 方法用于从数组中提取一部分元素，并返回一个新的数组。它的基本语法是：

array.slice(start, end)

start（包含）

• 开始提取的索引，包含该索引处的元素。
• 如果省略，默认从索引 0 开始。

end（不包含）

• 结束提取的索引（不包含该索引处的元素）。
• 如果省略，默认提取到数组末尾。

关键特点

1. 不改变原数组：slice() 返回新数组，原始数组保持不变。
2. 支持负数索引：负数从数组末尾开始计算，例如 -1 表示最后一个元素，-2 表示倒数第二个。
3. 如果 start > end：返回空数组。
4. 如果 end 超出数组长度：提取到数组末尾。

示例

示例 1：基本用法

let fruits = ['apple', 'banana', 'cherry', 'date'];
let someFruits = fruits.slice(1, 3);
console.log(someFruits); // ['banana', 'cherry']
console.log(fruits);     // ['apple', 'banana', 'cherry', 'date']（原数组不变）

• 从索引 1（包含 ‘banana’）提取到索引 3（不包含 ‘date’），返回 [‘banana’, ‘cherry’]。

示例 2：省略 end

let fruits = ['apple', 'banana', 'cherry', 'date'];
let fromIndex1 = fruits.slice(1);
console.log(fromIndex1); // ['banana', 'cherry', 'date']

• 只指定 start 为 1，提取从索引 1 到末尾。

示例 3：使用负数索引

let fruits = ['apple', 'banana', 'cherry', 'date'];
let lastTwo = fruits.slice(-2);
console.log(lastTwo); // ['cherry', 'date']

• start 为 -2，从倒数第二个元素开始提取到末尾。

示例 4：start 和 end 都是负数

let fruits = ['apple', 'banana', 'cherry', 'date'];
let middleTwo = fruits.slice(-3, -1);
console.log(middleTwo); // ['banana', 'cherry']

• 从倒数第三个（-3，‘banana’）提取到倒数第一个（-1，‘date’，不包含），返回 [‘banana’, ‘cherry’]。

示例 5：start 大于 end

这种情况直接返回空数组

let fruits = ['apple', 'banana', 'cherry', 'date'];
let empty = fruits.slice(3, 1);
console.log(empty); // []

• start（3）大于 end（1），返回空数组。

示例 6：end 超出数组长度

let fruits = ['apple', 'banana', 'cherry', 'date'];
let allFrom1 = fruits.slice(1, 10);
console.log(allFrom1); // ['banana', 'cherry', 'date']

• end（10）大于数组长度（4），提取从索引 1 到末尾。

---

2. 字符串中的 slice() 方法

slice() 也可以用于字符串，功能类似，返回一个新字符串。语法是：

string.slice(start, end)

• start：开始提取的字符索引（包含）。
• end：结束提取的字符索引（不包含）。

示例

示例 1：基本用法

let text = "Hello, world!";
let part = text.slice(0, 5);
console.log(part); // "Hello"
console.log(text); // "Hello, world!"（原字符串不变）

• 提取索引 0 到 5（不包含 5），返回 “Hello”。

示例 2：省略 end

let text = "Hello, world!";
let from7 = text.slice(7);
console.log(from7); // "world!"

• 从索引 7 提取到末尾。

示例 3：使用负数索引

let text = "Hello, world!";
let last5 = text.slice(-5);
console.log(last5); // "world"

• 从倒数第 5 个字符提取到末尾。

示例 4：start 和 end 都是负数

let text = "Hello, world!";
let middle = text.slice(-6, -1);
console.log(middle); // "world"

• 从倒数第 6 个字符（‘w’）提取到倒数第 1 个字符（‘!’，不包含），返回 “world”。

---

3. 注意事项

1. 不可变性
   slice() 不会修改原数组或字符串，总是返回新数据。

2. 浅拷贝（数组特有）
   如果数组元素是对象或数组，slice() 只复制引用，不是深拷贝：

   let arr = [{a: 1}, {b: 2}];
   let newArr = arr.slice();
   newArr[0].a = 10;
   console.log(arr[0].a); // 10（原数组对象被修改）

3. 非整数索引
   start 或 end 如果不是整数，会被转为整数（Math.floor()）：

   let fruits = ['apple', 'banana', 'cherry'];
   console.log(fruits.slice(1.5, 2.5)); // ['banana']

   • 1.5 转为 1，2.5 转为 2，返回 [‘banana’]。

4. NaN 或 undefined
   如果 start 或 end 是 NaN 或 undefined，会被视为 0：

   let fruits = ['apple', 'banana', 'cherry'];
   console.log(fruits.slice(NaN, 2)); // ['apple', 'banana']

参考文献

1. Array.prototype.slice() - JavaScript | MDN