天天看點

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