读JavaScript Splice,Slice,Split
咋一看这三个长的都差不多，都以S开头，我也是有时对这三个属性有点犯迷糊，总是记不清，不知道在什么情况下该用哪个，今天就跟着这篇文章，好好的理解理解。
作者举了一个生动的例子，使用这三个属性简单的去分割pizza。首先把这一个pizza分成十份，每一份对应1，2，3……到10。首先使用的是splice它可以增加或移除一块pizza，例如splice(1,1)执行完成之后就把第二块pizza移除掉了，所以pizza少了一块。slice可以选中需要的pizza，但它首先将原pizza复制一份，然后从新的pizza上选取需要的，比如执行slice(2,3)实际上我们得到的是第二块pizza。最后split，它的功能就是使用特殊符号分割pizza，比如使用香肠再次分割pizza。
Splice
splice()是数组Array中的方法
1
Array.prototype.splice()
splice()方法会改变原数组，可以移除元素或者添加新的元素
1
array.splice(start, [deleteCount], [item1], [item2])
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var example = ['A', 'B', 'C', 'D'];
example.splice(2, 0, 'E');
// 移除0个元素，添加 'E' 在index 2的位置
console.log(example);
// ["A", "B", "E", "C", "D"]
var copy = example.splice(2, 1);
// 移除一个元素，在index 2的位置，返回删除的元素
console.log(copy);
// ["E"]
console.log(example);
// ["A", "B", "C", "D"]
var copy2 = example.splice(2, 0, 'E');
console.log(copy2);
// [] 添加元素返回空数组
console.log(example);
例如：删除元素 shift()和splice()相似
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function shiftArray(arr) {
// remove 1 item at 0-index position, return the deleted item
return arr.splice(0, 1);
}
var a = [1, 2, 3];
var b = a.shift();
console.log(a); // [2, 3]
console.log(b); // 1
var c = shiftArray(a);
console.log(a); // [3]
console.log(c); // [2]
Slice
slice()是数组对象和字符串对象中的方法，两种类型都可以用。它不改变原数组，返回一个新的拷贝对象。
1
Array.prototype.slice()
slice()返回的是数组的浅拷贝，选取数组的一部分从bengin到end（不包含end）。不会改变原数组。
1
String.prototype.slice()
slice()方法，选取字符串的一部分，返回新的字符串
1
2
3
array.slice(begin, end)
string.slice(begin, end)
begin参数
undefined: 从0开始选取>=0: 从0索引开始算，在索引的位置开始< 0: 从结束位置开始
end参数
undefined: 到结束的位置>=0: 从0索引开始算，到此索引前为止（不包含此索引）< 0: 从结束位置开始
1
2
3
4
5
6
7
8
9
10
11
12
var arr = ['A', 'B', 'C', 'D'];
var a = arr.slice(); // 没有传参，开始位置为Undefined，选取的是整个数组的长度
console.log(a);
// ["A", "B", "C", "D"]
var b = arr.slice(-1); // 开始位置传递的是负数，从数组的最后位置开始算
console.log(b);
// ["D"]
var c = arr.slice(0, -1); // 开始位置传的是0，结束位置传的是负数，结束位置从数组的最后位置开始数，
console.log(c)
// ["A", "B", "C"]
例如：转换数组为一个新数组
1
2
3
4
5
6
7
8
function convert2Array() {
return Array.prototype.slice.call(arguments);
}
var arr = convert2Array(1, 2, 3);
console.log(arr)
// [1, 2, 3]
示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var a = ['A', 'B', 'C', 'D'];
var slicedArr = a.slice(1, 3); // slice starts from 1-index to 3-index, but not include 3-index : ['B', 'C']
console.log(a)
// ["A", "B", "C", "D"] // slice doesn't change the input
console.log(slicedArr)
// ["B", "C"]
var b = 'ABCD'
var slicedStr = b.slice(1, 3); // slice process the slice as the array
console.log(b)
// "ABCD"
console.log(slicedStr)
// "BC"
Split
split()是字符串中的方法，将字符串分割为新的数组
1
String.prototype.split()
split()方法可以接收分隔符，将字符串使用分隔符分割为数组
1
string.split([separator[, limit]])
示例：
1
2
3
4
5
6
7
8
9
10
var string = 'Hello World. How are you doing?';
var splits = string.split(' ', 3); // 使用空格进行分割，第二个参数是告诉它分割的次数，并返回前三个分割的数据
console.log(splits)
// ["Hello", "World.", "How"]
var splits = string.split(' ')
console.log(splits)
// ["Hello", "World.", "How", "are", "you", "doing?"]
检查是否是回文
1
2
3
4
5
6
7
8
var str = "abcba";
function isPalindrome(str) {
// split the string to array, reverse the array, then join the array with ''
return str === str.split('').reverse().join('');
}
isPalindrome(str); // return true
总结
最重要的是总结，一目了然，好记
| Splice | Slice | Split | |
|---|---|---|---|
| Array.prototype | Y | Y | Y |
| String.prototype | Y | Y | |
| 改变原数组 | Y | ||
| 创建新数组 | Y | Y | |
| 返回值 | 返回一个数组，包含删除的元素 | 返回一个选中的元素，数组类型 | 被分割的字符串，作为一个数组返回 |
- splice在添加或删除数组中的元素时，会改变原数组
- slice 选取数组中的元素时，不会改变原数组
- split 不改变原字符串
看完文章觉得自己大致了解了，但还是想要记录下来，加深印象。全文也不是完全的翻译，核心还是依赖作者的思想，边读边译也有一些自己的理解，要点已列出，如果想要充分理解，还是要读原文，获得的是作者的第一手信息。
原文链接： JavaScript Splice,Slice,Split