【前端面经】JS-slice, splice, substring的区别

介绍

JavaScript提供了多种操作字符串和数组的方法。其中三种最常用的方法是 slice、splice 和 substring。这三种方法都用于提取或操作字符串或数组的一部分。但是，它们具有不同的功能和语法。在本博客文章中，我们将讨论 slice、splice 和 substring 之间的区别。

Slice

slice 是一种用于提取数组或字符串的一部分而不修改原始数组或字符串的方法。它需要两个参数：起始索引和结束索引。起始索引是包含的，而结束索引是排除的。换句话说，结果部分包括从起始索引开始到但不包括结束索引的字符或元素。

const str = "Hello, world!";
const arr = [1, 2, 3, 4, 5];

const slicedStr = str.slice(0, 5); // "Hello"
const slicedArr = arr.slice(1, 3); // [2, 3]

使用 slice 方法可以方便地从字符串或数组中提取需要的部分，而不必修改原始字符串或数组。这个方法非常方便，特别是当你需要复制一个字符串或数组的一部分时。

Splice

splice 是一种通过修改原始数组来添加或删除数组元素的方法。它需要三个参数：起始索引、要删除的元素数和要添加的任何新元素。如果第二个参数设置为 0，则不删除任何元素。如果未提供第三个参数，则不添加任何元素。

const arr = [1, 2, 3, 4, 5];

arr.splice(2, 1); // [3] - 删除索引 2 处的一个元素
console.log(arr); // [1, 2, 4, 5]

arr.splice(2, 0, 6, 7); // [] - 从索引 2 开始添加两个元素
console.log(arr); // [1, 2, 6, 7, 4, 5]

使用 splice 方法可以方便地添加或删除数组元素，而不必创建新的数组。这个方法非常有用，特别是当你需要在数组中插入或删除元素时。

Substring

substring 是一种用于提取字符串的一部分而不修改原始字符串的方法。它需要两个参数：起始索引和结束索引。起始索引是包含的，而结束索引是排除的。换句话说，结果部分包括从起始索引开始到但不包括结束索引的字符。

const str = "Hello, world!";

const subStr = str.substring(0, 5); // "Hello"

使用 substring 方法可以方便地提取字符串的一部分，而不必修改原始字符串。这个方法非常方便，特别是当你需要从一个字符串中提取一部分内容时。

结论

总之，slice、splice 和 substring 是用于提取或操作字符串或数组的一部分的三种方法。slice 和 substring 类似，因为它们提取原始字符串或数组的一部分而不修改它，而 splice 通过添加或删除元素修改原始数组。为了在 JavaScript 代码中有效地使用它们，了解这些方法之间的区别非常重要。

不仅仅是了解它们的区别，同时也需要知道在什么情况下使用哪个方法，因为使用错误的方法可能会导致你的代码无法正常运行。因此，在编写代码之前，请仔细考虑你的需求，并选择正确的方法来操作字符串或数组。

希望本文能够帮助你更好地理解 slice、splice 和 substring 之间的区别，以及如何在 JavaScript 中使用它们。