剖析 splice、slice 和 split 三大数组操作函数

前言

在 JavaScript 中，数组是一种非常重要的数据结构，它可以存储各种类型的数据，并通过索引值来访问其中的元素。为了方便对数组进行操作，JavaScript 提供了多种内置函数，其中 splice、slice 和 split 这三个函数是使用最为广泛的。它们都可以在数组上执行截取操作，但它们之间还是存在一些细微的差别。本文将对这三个函数进行详细的对比和讲解，帮助您更好地理解它们的使用场景和用法。

核心

slice：截取功能

slice 函数主要用于截取数组的一部分，返回一个包含截取元素的新数组，而不改变原数组。其语法格式为：

slice(start, end)

其中，start 参数指定截取的起始索引，end 参数指定截取的结束索引。如果省略 end 参数，则截取到数组的末尾。

例如，以下代码将从数组中截取索引 2 到索引 5（不包括索引 5）的元素：

const array = [1, 2, 3, 4, 5, 6, 7];
const newArray = array.slice(2, 5);
console.log(newArray); // [3, 4, 5]

splice()：数组增删查改

splice 函数的功能更加强大，它不仅可以截取数组的一部分，还可以向数组中添加元素、删除元素，甚至替换元素。其语法格式为：

splice(start, deleteCount, ...items)

其中，start 参数指定截取或修改的起始索引，deleteCount 参数指定要删除的元素数量，...items 参数指定要添加的元素。

例如，以下代码将从数组中删除索引 2 到索引 5（不包括索引 5）的元素：

const array = [1, 2, 3, 4, 5, 6, 7];
array.splice(2, 3);
console.log(array); // [1, 2, 6, 7]

以下代码将在数组的索引 2 处添加元素 3 和 4：

const array = [1, 2, 5, 6, 7];
array.splice(2, 0, 3, 4);
console.log(array); // [1, 2, 3, 4, 5, 6, 7]

split()：字符串拆分

split 函数主要用于将字符串拆分成一个字符串数组，其语法格式为：

split(separator, limit)

其中，separator 参数指定拆分字符串的分割符，limit 参数指定拆分的次数。如果省略 limit 参数，则拆分到字符串的末尾。

例如，以下代码将字符串 "Hello, world!" 以逗号分隔符拆分成一个字符串数组：

const str = "Hello, world!";
const arr = str.split(",");
console.log(arr); // ["Hello", " world!"]

以下代码将字符串 "Hello, world!" 以逗号分隔符拆分成最多 2 个字符串：

const str = "Hello, world!";
const arr = str.split(",", 2);
console.log(arr); // ["Hello", "world!"]

总结

通过上面的讲解，我们可以看到，splice、slice 和 split 这三个函数都是非常有用的数组操作函数。它们都有着各自不同的功能和用法，掌握它们可以帮助我们更加灵活地处理数组和字符串。

函数	功能	返回值	改变原数组
slice	截取数组的一部分	一个包含截取元素的新数组	否
splice	截取数组的一部分、添加元素、删除元素、替换元素	一个包含截取或修改元素的新数组	是
split	将字符串拆分成一个字符串数组	一个包含拆分字符串的字符串数组	否