slice(),splice(),split(),substring(),substr()使用方法和区别

《一》

1.slice（）；

Array和String对象都有

在Array中 slice(i,[j])

i为开始截取的索引值,负数代表从末尾算起的索引值，-1为倒数第一个元素
j为结束的索引值，缺省时则获取从i到末尾的所有元素

参数返回：
返回索引值从i到j的数组，原数组不改变

在String中 slice(i,[j])

参数说明：
i为开始截取的索引值，负数代表从末尾算起的索引值，-1为倒数第一个字符
j为结束的索引值，缺省时则获取从i到末尾的所有字符

2.splice（）

存在Array中方法向/从数组中添加/删除项目，然后返回被删除的项目。该方法会改变原始数组

splice(index,howmany,item1,itemx )

index : 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。

howmany: 必需。要删除的项目数量。如果设置为 0，则不会删除项目。

item1...itemX : 可选。向数组添加的新项目。

返回值 Array 包含被删除项目的新数组，如果有的话。

3.split（）

在String中 split（separator，howmany）

separator：必需。字符串或正则表达式，从该参数指定的地方分割 stringObject。

howmany：可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。

返回值

一个字符串数组。该数组是通过在separator指定的边界处将字符串StringObject分割成子串创建的。返回的数组的字符串不包含separator自身

但是，如果 separator 是包含子表达式的正则表达式，那么返回的数组中包括与这些子表达式匹配的字串（但不包括与整个正则表达式匹配的文本）

与jion（）函数相反效果

4.substring（）

在String中 substring(start,stop)

start：表示子字符串的开始位置，

stop：表示结束结果。

注意：第二个参数应该大于第一个参数。如果出现第一个参数大于第二个参数的情况，substring方法会自动更换两个参数的位置。

4.substr（）

在String中，substr（start，length）；

start：子字符串的开始位置，

length：子字符串的长度。

《二》

1、slice：截取数组，返回截取到的新数组，不改变原有数组

arr.slice(start,end);

start：必需，从原数组的start位置开始截取(包括下标为start的元素)。start-为负数，表示从尾部开始截取。如-1表示最后一个元素，-2表示倒数第二个元素

end：可选，截取到的指定位置（不包括下标为end的元素）。没有指定，则截取到最后一个元素。end要大于start，否则截取不到元素

规则：

A、只传一个参数时，且是负数，且绝对值小于length,该负数会和length相加在截取

var a = [1,2,3,4];
var b = a.slice(-1); //b = [4] a = [1,2,3,4]

B、只传一个参数，且是负数，且绝对值大于大于等于length，则截取整个数组

var a = [1,2,3,4];
var b = a.slice(-4); //b = [1,2,3,4] a = [1,2,3,4]

C、只传一个参数，且是正数，且大于等于length，则返回空数组

var a = [1,2,3,4];
var b = a.slice(4); //b = [] a = [1,2,3,4]

D、只传一个参数，且是正数，小于length，从该参数的下标截取一直都数组尾

var a = [1,2,3,4];
var b = a.slice(1); //b = [2,3,4] a = [1,2,3,4]

E、传入两个参数，一正一负，负数先和length相加在截取

var a = [1,2,3,4];
var b = a.slice(1,-1); //b = [2,3] a = [1,2,3,4]

2、splice：从数组中添加、删除元素，改变原有数组，返回被删除的元素

删除元素

<script>
var arr = ['a','b','c','d'];
var delete = arr.splice(1,2) //从下标1开始，删除两个元素
console.log(arr); //a,d
console.log(delete) // b,c
</script>

添加元素

<script>
var arr = ['a','b','c','d'];
var delete = arr.splice(1,0,'e','f'); //0-表示没有删除元素
console.log(arr); // a,e,f,b,c,d
console.log(delete); //''-即返回空的数组，因为没有删除元素
</script>

3、split()用于把一个字符串切割为字符串数组，返回新的字符串数组，每个变量用”，“分隔，源字符串不改变

stringObject.split(seperator,howmany)

示例

1、按照不同方式分割字符串

var str = ''how are?;
console.log(str.split('')); //h,o,w,a,r,e,? ( seperator = '',则把每个字符都分割)
console.log(str.split(' '));//how,are?
console.log(str.split(' ',1));//how

《三》

区分 split, splice, slice

split是string类型特有的方法

var str = "bcadeafg";
str.split("a");// ["bc", "de", "fg"]

splice是属于Array类型特有的方法

var arr = [1,2,3,4,5];
删除元素：（删除index == 1位置处的1个元素）
console.log(arr.splice(1, 1));// [2]（返回删除的数组）
console.log(arr);// [1, 3, 4, 5]
添加元素：（在index == 1的位置添加2个元素）
console.log(arr.splice(1, 0, 2));// []
console.log(arr);// [1, 2, 3, 4, 5]

slice方法string和Array都能用

var arr = [1,2,3,4,5];
console.log(arr.slice(1,3));// [2, 3]
console.log(arr);// [1, 2, 3, 4, 5]
var str = "abcdefg";
console.log(str.slice(1,3));// bc
console.log(str);// abcdefg

当然，区分这三种方法仅仅是个引子

通过这三个方法，我自然就想到了concat方法
concat方法和slice方法一样，同样是string和Array都能用

var arr = [1,2,3];
console.log(arr.concat(4,5));// [1, 2, 3, 4, 5]
var str = "abc";
console.log(str.concat("defg"));// abcdefg

说到这里又想到一个问题，就是在操作数组时哪些方法会对原数组进行修改，哪些不会呢？

这里作一个这方法的总结：

会修改原数组：
push, pop, shift, unshift, splice

会返回新的数组：
slice, concat

var arr = [1,2,3,4,5,8];
console.log(arr.pop());// 5（返回被删除的最后一个元素）
console.log(arr);// [1, 2, 3, 4, 5]
console.log(arr.push(9));// 6（返回压栈后的数组长度）
console.log(arr);// [1, 2, 3, 4, 5, 9]
console.log(arr.shift());// 1（返回被删除的第一个元素）
console.log(arr);// [2, 3, 4, 5, 9]
console.log(arr.unshift(0));// 6（返回加入队头后数组的长度）
console.log(arr);// [0, 2, 3, 4, 5, 9]
console.log(arr.splice(1, 1));// [2]（返回删除的数组）
console.log(arr);// [0, 3, 4, 5, 9]
console.log(arr.splice(1, 0, 1, 2));// []（返回空数组）
console.log(arr);// [0, 1, 2, 3, 4, 5, 9]
console.log(arr.concat(10,11));// [1, 2, 3, 4, 5, 9, 10, 11]
console.log(arr);// [1, 2, 3, 4, 5, 9]（说明concat并没有改变原来的数组）
console.log(arr.slice(1,3));// [2, 3]
console.log(arr);// [1, 2, 3, 4, 5, 9]（说明slice并没有改变原来的数组）

slice方法和concat方法用于字符串：

var str = "1234";
console.log(str.concat("5678"));// 12345678
console.log(str);// 1234（说明concat并没有改变原来的字符串）
console.log(str.slice(1, 3));// 23
console.log(str);// 1234（说明slice并没有改变原来的字符串）

总结：

1.专属于数组操作的方法：
push, pop, shift, unshift, splice

2.专属于字符串操作的方法：
split, substring, substr

3.数组和字符串公用的方法：
slice, concat

4.当slice, concat用于操作数组时，不改变原数组
当push, pop, shift, unshift, splice操作数组时，则会对原数组进行修改

5.同样当slice, concat用于操作字符串时，不改变原字符串
substring, substr这些方法操作字符串的时候同样不会改变原字符串

《四》

1.slice（数组）
用法：array.slice(start,end)
解释：截取数组中的某段,并返回一个新的数组；
参数start：开始截取的索引（取的到 =），
参数end: 结束的索引(取不到 < end)（可选）
//如果不传入参数二，那么将从参数一的索引位置开始截取，一直到数组尾

var a=[1,2,3,4,5,6];
var b=a.slice(0,3); //[1,2,3]
var c=a.slice(3); //[4,5,6]

//如果两个参数中的任何一个是负数，array.length会和它们相加，试图让它们成为非负数，举例说明：
//当只传入一个参数，且是负数时，length会与参数相加，然后再截取
var a=[1,2,3,4,5,6];
var b=a.slice(-1); //[6]

//当只传入一个参数，是负数时,并且参数的绝对值大于数组length时，会截取整个数组
var a=[1,2,3,4,5,6];
var b=a.slice(-6); //[1,2,3,4,5,6]
var c=a.slice(-8); //[1,2,3,4,5,6]

//当传入两个参数一正一负时，length也会先于负数相加后，再截取
var a=[1,2,3,4,5,6];
var b=a.slice(2,-3); //[3]

//当传入一个参数，大于length时，将返回一个空数组
var a=[1,2,3,4,5,6];
var b=a.slice(6);　　//[]

2.slice（字符串）
用法：string.slice(start,end)
解释：slice方法复制string的一部分来构造一个新的字符串，用法与参数匀和数组的slice方法一样

//举个简单的例子
var a="i am a boy";
var b=a.slice(0,6); //"i am a"

3.splice（数组）
用法：array.splice(start,deleteCount,item...)
解释：splice方法从array中移除一个或多个元素，并用新的item替换它们。参数start是从数组array中移除元素的开始位置。参数deleteCount是要移除的元素的个数。
如果有额外的参数，那么item会插入到被移除元素的位置上。它返回一个包含被移除元素的数组。

//举一个简单的例子
var a=['a','b','c'];
var b=a.splice(1,1,'e','f'); //a=['a','e','f','c'],b=['b']
此外splice与delete两者的区别，上篇文章有解释过。
js删除数组中的元素delete和splice的区别

4.split（字符串）
用法：string.split(separator,limit) 解码字符串转数组
解释：split方法把这个string分割成片段来创建一个字符串数组。可选参数limit可以限制被分割的片段数量。separator参数可以是一个字符串或一个正则表达式。如果
separator是一个空字符，会返回一个单字符的数组。

//再举一个简单的例子
var a="0123456";
var b=a.split("",3); //b=["0","1","2"]

5.arr.join(separator) 编码数组转字符串
解释：把数组中的元素按照参数中的字符串连接成一个字符串。

//举一个简单的例子
var arr = [2, 3, 4, 7];
console.log(arr.join('-'));//2-3-4-7

《五》

slice ：

　　定义：接收一个或两个参数，它可以创建一个由当前数组中的一项或多项组成的新数组，注意是新数组哦~ 也就是说它不会修改原来数组的值。

　　　　　用法：slice( para1 ),会截取从para1开始的到原数组最后的部分；

　　　　　　　　slice（para1,para2）会截取原数组的从para1开始的para2-para1个数组。

　　　　　注意：当两个参数中存在负数时，用原数组的长度加上两个负数的参数作为相应的参数来计算。

　　2. splice :

　　　定义：强大的数组操作方法

用法： splice( para1,para2 ) : 删除数组中任意数量的项，从para1开始的para2项。注意的是用splice删除数组中的值会直接将某几项从数组中完全删除，会导致数组length值的改变，这与delete的删除置为undefined是不一样的。

splice( para1,para2,val1,val2… )：项数组中添加和删除项，para1表示可以添加的项数，para2表示删除的项数，后面的变量表示要添加的项的值，注意是从para1之后开始删除和添加的。

　　　　注意：参数为负数的问题，如果para1为负数，则会加上数组的长度作为para1的值，而para2为负数或0的话不会执行删除操作。

　　3．split : 根据特定的字符切割字符串并且返回生成的数组。

例如： str = “s-aaa-sss-eee-www”;

targetArr = str.slite(“-”); //[‘s’,’aaa’,’sss’,’eee’,’www’]

《六》

字号

split:
split() 方法用于把一个字符串分割成字符串数组
2个参数：
1、字符串或者正则（以这个参数出现的位置进行分割）
2、长度，可选（设置此参数，分割数不会多于此参数，无此参数，即分割全部）

str="hello!how!are!you?"
arr2=str.split("!");
alert(arr2); //hello,how,are,you?
alert(arr2.length) //4

splice:
splice()方法用于对数组，删除添加和替换
三个参数：
1、起点，从数组第几个开始（从0开始算，包含它）
2、长度，对数组删除的长度（可以为0，即不删除）
3、添加的内容，可以是多个
返回值是被删除的元素，改变原数组

slice:
slice()方法用于返回从数组中返回的元素
2个参数：
1、起点，从这个起点开始（从0开始算，包含它）
2、结束点，到这个位置的前一个结束（即不包含它本身），未设置或者超出长度则默认到结尾
由于它有不改变原数组的特性，slice(0)可以深度拷贝一个简单数组；

下面2个例子再次了解下slice和splice的使用

//slice方法
var arr = [2, 3, 4, 5, 6]
arr.slice(0,2)
//        [2, 3]
arr.slice(0,2)
//        [2, 3]
arr.slice(0,2)
//        [2, 3]
arr
//        [2, 3, 4, 5, 6]//splice方法
var arr = [2, 3, 4, 5, 6]
arr.splice(0, 2)
//      [2, 3]
arr.splice(0, 2)
//      [4, 5]
arr.splice(0, 2)
//      [6]
arr.splice(0, 2)
//      []
arr
//      []