前言

最近對前端一些函數(shù)的用法還不是很熟悉，有一些函數(shù)容易混淆，在此總結(jié)一下，同時分享給各位小伙伴：

1. join() 函數(shù)

join() 將數(shù)組中元素 組成字符串 ，需要傳個參數(shù)作為連接符，不傳的話默認就是逗號。

2.push() 函數(shù)

在數(shù)組 尾部逐個添加 元素，返回結(jié)果數(shù)組的長度，能接收任意數(shù)量參數(shù)，push() 修改了原數(shù)組。

3. pop() 函數(shù)

pop() 移除數(shù)組最后一項，返回的是被移除項。修改原數(shù)組

4.shift() 函數(shù)

shift() 刪除數(shù)組的第一項元素，返回被刪除的元素， 修改原數(shù)組

5.unshift() 函數(shù)

向數(shù)組的頭部添加元素，返回的是結(jié)果數(shù)組的長度，修改原數(shù)組

6.sort() 函數(shù)

將數(shù)組按照從小到大的順序排列， 修改原數(shù)組 。

注意：

sort()方法是用于數(shù)組排序的,語法如下:array.sort(),

使用sort()方法后會改變原數(shù)組的順序(而不是生成一個新數(shù)組,同時原數(shù)組保持不變)

示例一:對字符數(shù)組進行排序

    var myarr1=["h","e","l","l","o"];
    myarr1.sort();
    console.log(myarr1);//(5) ['e', 'h', 'l', 'l', 'o']

1、sort中沒有參數(shù)時,會按照數(shù)組元素對應(yīng)的ASCII碼進行比較和排序

示例二:對數(shù)字數(shù)組進行排序

    var myarr2=[9,5,1,4,6];
    myarr2.sort();
    console.log(myarr2);//(5) [1, 4, 5, 6, 9]

sort()無法對由兩位數(shù)以上的數(shù)組元素構(gòu)成的數(shù)組進行合理排序

示例

    var myarr2=[10,25,3,8];
    myarr2.sort();
    console.log(myarr2);//10 25 3 8

出現(xiàn)原因和解決方法

因為sort()方法會首先會調(diào)用每個數(shù)組數(shù)據(jù)項的toString()方法,

轉(zhuǎn)換成字符串以后再進行比較,在字符串中"25"<“3”,

解決方法是需要用到sort的參數(shù),此時這個參數(shù)叫做比較函數(shù)

2、sort()的參數(shù)——比較函數(shù)

示例:使用比較函數(shù)將數(shù)字數(shù)組進行正確排序

 	var myarr2=[10,25,3,8];
    var mycompare=function (x,y){
      if(x<y) return -1;
      else if(x>y) return 1
      else return 0;
    };
    myarr2.sort(mycompare);
    console.log(myarr2);//(4) [3, 8, 10, 25]

比較函數(shù)的參數(shù)

比較函數(shù)會接受兩個參數(shù),并對兩者進行比較

• 若第一個參數(shù)應(yīng)位于第二個參數(shù)之前,則返回一個負數(shù)
• 若第一個參數(shù)等于第二個參數(shù),則返回0
• 若第一個參數(shù)應(yīng)位于第二個參數(shù)之后,則返回一個正數(shù)

通過以上邏輯的比較函數(shù),會使數(shù)組最后變?yōu)樯蚺帕?

若要變?yōu)榻敌?只需返回一個負數(shù)變?yōu)榉祷匾粋€正數(shù)即可(正數(shù)變負數(shù),負數(shù)變正數(shù))

比較函數(shù)不能對混搭(字符+數(shù)字)數(shù)組進行排序

  var myarr3=["h",10];
    myarr3.sort(mycompare);
    console.log(myarr3);//(2) ['h', 10]
    myarr3.sort();
    console.log(myarr3);//(2) [10, 'h']

不能將比較函數(shù)用于比較一個不能轉(zhuǎn)化成數(shù)字的字符串和數(shù)組的排序,

這是因為比較函數(shù)會先將字符串轉(zhuǎn)化成數(shù)字再比較,當(dāng)字符串不能轉(zhuǎn)換成數(shù)字時,就不能比較大小(不用比較函數(shù),也就是sort不加參數(shù)時,比較的是ASCII值,此時可以比較)

正確用法:

    // 對于不能轉(zhuǎn)換成數(shù)字的字符串(字母型字符串),不使用比較參數(shù),直接比較ASCII值
    var myarr3=["h",10];
    myarr3.sort();
    console.log(myarr3);//(2) ['h', 10]
    // 對于可以轉(zhuǎn)換成數(shù)字的字符串(數(shù)字型字符串),使用比較函數(shù)轉(zhuǎn)換成數(shù)字再比較
    var myarr4=["23",37,"1",14];
    myarr4.sort(mycompare);
    console.log(myarr4);//(4) ['1', 14, '23', 37]

總結(jié):

1. 數(shù)組中既有字符串又有數(shù)字時,先看看其中的字符串是字母型字符串還是數(shù)字型字符串,

2. 若是字母型字符串,sort不用帶參數(shù),直接比較ASCII值

若是數(shù)字型字符串,sort帶參數(shù),讓比較函數(shù)將字符串轉(zhuǎn)換成數(shù)字再比較

3.對于由對象構(gòu)成的數(shù)組,如何排序?

需求

數(shù)組項是對象,現(xiàn)在需要根據(jù)對象的某個屬性,對數(shù)組進行排序

	//要求根據(jù)對象屬性age對數(shù)組進行排序
    var arr=[
      {age:10,name:'Tom'},
      {age:8,name:'Jack'},
      {age:20,name:'Michel'},
      {age:12,name:'Daniel'},
    ];

解決方法:使用比較函數(shù)

    var compare = function (obj1, obj2) {
        if (obj1.age < obj2.age) return -1;
        else if (obj1.age > obj2.age) return 1;
        else return 0;
    } 
    console.log(arr.sort(compare));

效果:

{age: 8, name: 'Jack'}
{age: 10, name: 'Tom'}
{age: 12, name: 'Daniel'}
{age: 20, name: 'Michel'}

7. reverse() 函數(shù)

數(shù)組反轉(zhuǎn)。

8. concat() 函數(shù)

在不影響原數(shù)組的情況下，復(fù)制了一個數(shù)組，將參數(shù)添加到副本的尾部，因此若沒有傳參，就相當(dāng)于復(fù)制了原數(shù)組。

9.slice() 函數(shù)

slice() 不影響原數(shù)組 ，返回原數(shù)組指定開始位置 - 結(jié)束位置的新數(shù)組。 這個位置是數(shù)組的下標(biāo)，當(dāng)然是從0開始計算，如果只有一個參數(shù)，那就是默認第二個參數(shù)到尾部。

demo中可以看出，返回的新數(shù)組是 不包含 結(jié)束位置的那個元素。

如果不傳第二個參數(shù)，默認返回到最后，也 不包含 最后一個的哦。 參數(shù)是 負數(shù)，相當(dāng)于反著來，這時候就是包含了結(jié)束位置， 不包含 開始位置的元素。

10. splice() 函數(shù)

刪除任意項元素，需要兩個參數(shù)：要刪除的位置 和 要刪除的數(shù)量。

demo中看出，splice()返回被刪除的元素數(shù)組，原數(shù)組被修改了。

插入任意項元素，需要三個參數(shù)：要刪除的位置，一個不刪 和 要插入的元素。

事實證明，是在要插入位置 之前 插入的。

替換，其實就是在指定位置刪除任意項元素，再插入任意項元素。

11. indexOf() & lastIndexOf() 函數(shù)

查找參數(shù)元素在數(shù)組中的 位置 ，找不到就返回 -1 。那必傳參數(shù)一定是目標(biāo)元素咯，還有個可選參數(shù)就是要開始查找的起點位置。 indexOf() 從頭到尾找，lastIndexOf() 從尾到頭找。

總結(jié)

到此這篇關(guān)于js常用函數(shù)push()、pop()、shift()、unshift()、slice()和splice()等詳解的文章就介紹到這了,更多相關(guān)js常用函數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論