前言

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

1. join() 函數(shù)

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

2.push() 函數(shù)

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

3. pop() 函數(shù)

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

4.shift() 函數(shù)

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

5.unshift() 函數(shù)

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

6.sort() 函數(shù)

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

注意：

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

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

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

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

1、sort中沒(méi)有參數(shù)時(shí),會(huì)按照數(shù)組元素對(duì)應(yīng)的ASCII碼進(jìn)行比較和排序

示例二:對(duì)數(shù)字?jǐn)?shù)組進(jìn)行排序

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

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

示例

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

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

因?yàn)閟ort()方法會(huì)首先會(huì)調(diào)用每個(gè)數(shù)組數(shù)據(jù)項(xiàng)的toString()方法,

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

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

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

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

 	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ù)會(huì)接受兩個(gè)參數(shù),并對(duì)兩者進(jìn)行比較

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

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

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

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

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

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

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

正確用法:

    // 對(duì)于不能轉(zhuǎn)換成數(shù)字的字符串(字母型字符串),不使用比較參數(shù),直接比較ASCII值
    var myarr3=["h",10];
    myarr3.sort();
    console.log(myarr3);//(2) ['h', 10]
    // 對(duì)于可以轉(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í),先看看其中的字符串是字母型字符串還是數(shù)字型字符串,

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

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

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

需求

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

	//要求根據(jù)對(duì)象屬性age對(duì)數(shù)組進(jìn)行排序
    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ù)制了一個(gè)數(shù)組，將參數(shù)添加到副本的尾部，因此若沒(méi)有傳參，就相當(dāng)于復(fù)制了原數(shù)組。

9.slice() 函數(shù)

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

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

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

10. splice() 函數(shù)

刪除任意項(xiàng)元素，需要兩個(gè)參數(shù)：要?jiǎng)h除的位置 和 要?jiǎng)h除的數(shù)量。

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

插入任意項(xiàng)元素，需要三個(gè)參數(shù)：要?jiǎng)h除的位置，一個(gè)不刪 和 要插入的元素。

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

替換，其實(shí)就是在指定位置刪除任意項(xiàng)元素，再插入任意項(xiàng)元素。

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

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

總結(jié)

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

最新評(píng)論