天天看点

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

  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:从数组中添加、删除元素,改变原有数组,返回被删除的元素

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

删除元素

  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. </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)

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

         示例

   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. var str = "abcdefg";

  5. console.log(str.slice(1,3));// bc

  6. 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. console.log(arr.concat(10,11));// [1, 2, 3, 4, 5, 9, 10, 11]

  15. console.log(arr);// [1, 2, 3, 4, 5, 9](说明concat并没有改变原来的数组)

  16. console.log(arr.slice(1,3));// [2, 3]

  17. 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的区别

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