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

淡淡的烟草味﹌ 2022-05-16 11:37 192阅读 0赞

《一》

### 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相加在截取**

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

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

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

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

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

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

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

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

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

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

**![Center][]**

删除元素

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

添加元素

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

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

**     stringObject.split(seperator,howmany)**

**     ![Center 1][]**

**         示例**

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

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

`《三》`

区分 split, splice, slice

split是string类型特有的方法

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

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

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

slice方法string和Array都能用

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

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

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

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

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

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

会修改原数组：  
push, pop, shift, unshift, splice  
  
会返回新的数组：  
slice, concat

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

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

1.  `var str = "1234";`
2.  `console.log(str.concat("5678"));// 12345678`
3.  `console.log(str);// 1234（说明concat并没有改变原来的字符串）`
4.  `console.log(str.slice(1, 3));// 23`
5.  `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的区别][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

《五》

1.  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
    //      []

[Center]: /images/20220516/d909c04ab9d64ae7aa37acb398a4dac6.png
[Center 1]: /images/20220516/ac5f281439434dc8916eae46c9b42e45.png
[js_delete_splice]: https://www.jianshu.com/p/02b9b1e15c68