JS 中 slice、splice、split 的使用及区别

slice

（数组、字符串通用，有返回值（返回修改的内容），不改变原数组 / 字符串）

Array.prototype.slice()

使用语法：

arr.slice( begin [,end] ) 

slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。

参数：

begin 可选 slice（ begin ）

• 表示截取 begin 到原数组最后的部分，若传递的是负数，例如（-2），则会截取倒数第二个到最后一个的部分，
• 如果省略begin 则会从索引为0开始。如果 begin 超出原数组的索引范围，则会返回空数组。

end 可选 slice （ begin ，end ）

• 表示截取索引从 begin 开始到 end 的所有元素，（包含 begin ，但不包含 end）。
• slice （1，4） 表示截取原数组 索引为（1，2，3）的元素，
• 如果 end 大于数组的长度，也会截取到原数组末尾

String.prototype.slice()

str.slice( begin [, end] )

slice() 方法提取某个字符串的一部分，并返回一个新的字符串，且不会改动原字符串。

参数同数组的用法

示例：

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));
// expected output: Array ["duck", "elephant"]

console.log(animals.slice(2, -1));
// expected output: Array ["camel", "duck"]

console.log(animals.slice());
// expected output: Array ["ant", "bison", "camel", "duck", "elephant"]


var str1 = 'The morning is upon us.', // str1 的长度 length 是 23。
    str2 = str1.slice(1, 8),
    str3 = str1.slice(4, -2),
    str4 = str1.slice(12),
    str5 = str1.slice(30);
console.log(str2); // 输出：he morn
console.log(str3); // 输出：morning is upon u
console.log(str4); // 输出：is upon us.
console.log(str5); // 输出：""

---

splice

Array.prototype.splice()

强大的数组操作方法，有返回值（返回修改的内容），并且会修改原数组

splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

语法：

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

参数：

start ：

• 指定修改数组的开始位置（从索引0开始）。如果超出了数组的长度，则表示 从数组末尾开始添加内容

let arr = [1,23,4,5]
arr.splice(22,0,'ss')
console.log(arr); //  [1, 23, 4, 5, "ss"]

deleteCount 可选 ：

• 表示从 start 索引开始要进行的操作，0 表示不删除，可以传第三个参数表示插入
• 1 表示删除一个，可以传第三个参数表示替换
• 如果不传 deleteCount 或则它的值大于剩下的数组长度，则后面的元素都会被删除

item1, item2, ... 可选 ：

• 要添加进数组的元素,从start 位置开始。如果不指定，则 splice() 将只删除数组元素。

返回值：

由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组。

示例：

插入一个元素：

var myFish = ["angel", "clown", "mandarin", "sturgeon"];
var removed = myFish.splice(2, 0, "drum");

// 运算后的 myFish: ["angel", "clown", "drum", "mandarin", "sturgeon"]
// 被删除的元素: [], 没有元素被删除

替换一个元素：

var myFish = ['angel', 'clown', 'drum', 'sturgeon'];
var removed = myFish.splice(2, 1, "trumpet");

// 运算后的 myFish: ["angel", "clown", "trumpet", "sturgeon"]
// 被删除的元素: ["drum"]

删除索引 2 后的全部元素：

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2);

// 运算后的 myFish: ["angel", "clown"]
// 被删除的元素: ["mandarin", "sturgeon"]

---

split

字符串的方法，有返回值（返以分隔符出现位置分隔而成的一个 数组 ），原字符串不改变

String.prototype.split()

语法：

str.split([separator[, limit]])

split() 方法使用指定的分隔符字符串将一个 String 分割成子字符串数组，以一个指定的分割字串来决定每个拆分的位置。

参数：

separtor：

• 指定每个拆分点的字符串， separator 可以是一个字符串或正则表达式。
• 如果在str中省略或不出现分隔符，则返回的数组包含一个由整个字符串组成的元素。
• 如果分隔符为空字符串，则将str原字符串中每个字符的数组形式返回。

limit ：

• 一个整数，限定返回的分割片段数量。

示例 ：

限制返回值中分割元素数量

//下例中，split 查找字符串中的 0 或多个空格，并返回找到的前 3 个分割元素（splits）。

var myString = "Hello World. How are you doing?";
var splits = myString.split(" ", 3);
 
console.log(splits); //["Hello", "World.", "How"]

用split()来颠倒字符串顺序

const str = 'asdfghjkl';
const strReverse = str.split('').reverse().join(''); // 'lkjhgfdsa'

靠正则来分割使结果中包含分隔块

注意：如果 separator 包含捕获括号（capturing parentheses），则其匹配结果将会包含在返回的数组中。

var myString = "Hello 1 word. Sentence number 2.";
var splits = myString.split(/(\d)/);
// 括号内的分割符也会保留
console.log(splits);  // [ "Hello ", "1", " word. Sentence number ", "2", "." ]

总结

slice

数组、字符串通用，有返回值（返回修改的内容），不改变原数组 / 字符串

splice

强大的数组操作方法，有返回值（返回修改的内容），并且会修改原数组

split

字符串的方法，有返回值（返以分隔符出现位置分隔而成的一个 数组 ），原字符串不改变