JavaScript數(shù)組方法三板斧,100%的開發(fā)都得知道
在該文中,將介紹以下三種方法:
1. join()方法
2. split()方法
3. sort()方法
為什么每個JavaScript開發(fā)人員都要知道這些方法?因為數(shù)組是代碼中的重要元素,而這些方法可以讓代碼更優(yōu)雅和更具代表性。
在沒有這些方法的情況下也可以運行項目,但為此必須編寫不必要的代碼行,而這些代碼行原先就沒有用處。
那就開始吧,首先了解一下 join() 和 split() 這兩種基本的方法,再討論 sort() 方法。
1. Join()方法
想象一下這樣的場景:用戶在數(shù)組中輸入一些值,然后想把這些值看作消息或字符串。
這就需要用到 join() 方法,它可以把數(shù)組中的元素轉(zhuǎn)換成字符串。
toString() 也用于將字符串轉(zhuǎn)換為數(shù)組,但是采用 join() 方法,則可以使用separator參數(shù),因此最好使用 join()方法。
join()語法很簡單,只需使用:
- array.join(separator)
此處separator在傳遞參數(shù)中是可選的,用于定義數(shù)組中想要分隔的元素,可以是空格、圓點、逗號和單詞等。
如果沒有傳遞參數(shù),則其元素需用逗號分隔。
看一個實例:
- const array1=[1,2,3,'My','Name','is','Ney']
- const string1=array1.join()
- const string2=array1.join('')
- const string3=array1.join(',')
- const string4=array1.join('and')
- const string5=array1.join('-')
- const string6=array1.join('=')
- const string7=array1.join(':')
- const string8=array1.join(' ')
- console.log(array1)
- // [ 1, 2, 3, 'My', 'Name', 'is', 'Ney' ]
- console.log(string1)
- // 1,2,3,My,Name,is,Ney
- console.log(string2)
- //123MyNameisNey
- console.log(string3)
- // 1,2,3,My,Name,is,Ney
- console.log(string4)
- // 1and2and3andMyandNameandisandNey
- console.log(string5)
- // 1-2-3-My-Name-is-Ney
- console.log(string6)
- // 1=2=3=My=Name=is=Ney
- console.log(string7)
- // 1:2:3:My:Name:is:Ney
- console.log(string8)
- // 1 2 3 My Name is Ney
上面舉了好幾個例子,其中要重點討論的是 string8 和 string2。
在 string2中,引號之間沒有任何空格,而在 string8中它則有空格。
可以在引號中放置任意數(shù)量的空格,而結(jié)果也會隨之改變。
2. Split()方法
因此,我們已經(jīng)知道數(shù)組中的元素可以轉(zhuǎn)換為字符串。
可以把數(shù)組中的字符串轉(zhuǎn)換為元素嗎?這就是 split() 方法的用處。
split() 方法在如下場景中使用起來十分方便,即必須輸入消息并查看其中是否包含特定的單詞。使用 includes() 方法可以通過把單詞轉(zhuǎn)換成數(shù)組,輕松地實現(xiàn)這一目的。下文很快會提及。
在把字符串轉(zhuǎn)換為數(shù)組后,仍然可以執(zhí)行其他的許多功能。從技術(shù)角度看, split() 是一種字符串方法,但我會此處有所提及。
首先看一下 split() 的語法:
- string.split(separator, limit)
- Separator指定用于拆分字符串的字符。如果留有空格,則整個字符串將轉(zhuǎn)換為數(shù)組中的單個元素。
- Limit是一個可選參數(shù),很少使用。它是一個整數(shù),指定拆分的數(shù)量。Limit拆分后的項目不會包含在該數(shù)組中。
看一些實例:
這里會使用上文提到的 join() 方法例子,并用 split() 方法轉(zhuǎn)換成字符串。
- const string1 = `1,2,3,My,Name,is,Ney`
- const array1 = string1.split(',')
- const arrayWithLimit = string1.split(',', 4)
- const arrayWithoutSeperator = string1.split()
- console.log(array1, arrayWithLimit, arrayWithoutSeperator)
- //[ '1', '2', '3', 'My', 'Name', 'is', 'Ney' ] [ '1', '2', '3', 'My' ] [ '1,2,3,My,Name,is,Ney' ]
- const string2 = `123MyNameisNey`
- const array2 = string2.split('')
- console.log(array2)
- //[ '1', ',', '2', ',', '3', ',', 'M', 'y', ',', 'N', 'a', 'm', 'e', ',', 'i', 's', ',', 'N', 'e', 'y' ]
- const string3 = `1,2,3,My,Name,is,Ney`
- const array3 = string3.split(',')
- console.log(array3) //[ '1', '2', '3', 'My', 'Name', 'is', 'Ney' ]
- const string4 = `1and2and3andMyandNameandisandNey`
- const array4 = string4.split('and')
- console.log(array4) //[ '1', '2', '3', 'My', 'Name', 'is', 'Ney' ]
- const string5 = `1-2-3-My-Name-is-Ney`
- const array5 = string5.split('-')
- console.log(array5) //[ '1', '2', '3', 'My', 'Name', 'is', 'Ney' ]
- const string6 = `1=2=3=My=Name=is=Ney`
- const array6 = string.split('=')
- console.log(array6) //[ '1', '2', '3', 'My', 'Name', 'is', 'Ney' ]
- const string7 = `1:2:3:My:Name:is:Ney`
- const array7 = string7.split(':')
- console.log(array7) //[ '1', '2', '3', 'My', 'Name', 'is', 'Ney' ]
- const string8 = `1 2 3 My Name is Ney`
- const array8 = string8.split(' ')
- console.log(array8) //[ '1', '2', '3', 'My', 'Name', 'is', 'Ney' ]
我們逐一來看以下的例子:
- array1, string1:只要有逗號就可分成一個數(shù)組。
- arrayWithLimit: 已經(jīng)指定了一處限制,因此生成的數(shù)組只有四個起始元素,這即是限制。
- arrayWithoutSeperator: 前文已經(jīng)討論過,如果沒有給出分隔符,整個字符串將轉(zhuǎn)換為數(shù)組的單個元素。
- array2:由于參數(shù)中的引號為空, split() 可分隔每個字符,包括空格符、逗號和任何其他可能存在的字符。
- array4:可以看到字符串中缺少所有“and”,并且遺漏的字符串成為了數(shù)組的單個元素。如果參數(shù)中只有一個字母,則結(jié)果將得到諸多元素和一個缺少指定元素的字符串??梢試L試一下。因此,使用單詞或字符串作為分隔符時,要十分小心。
- array3, array5, array, array7, array8:拆分了上述所有內(nèi)容后,可以生成相同的字符串,這是正確的操作,因為我們只對相應(yīng)字符撤消 了join() 。
練習(xí):使用join(), split(), and reverse()創(chuàng)建一個函數(shù)
現(xiàn)在可以練習(xí)使用 join(), split(), 和 reverse() 創(chuàng)建函數(shù),檢查用戶輸入字符串是否為回文結(jié)構(gòu)。
如果還不熟悉 reverse() 方法,就記住它只是反轉(zhuǎn)數(shù)組的元素。
例如:
- const num = [1,2,3,4,5,6]
- const reverseNum = num.reverse()
- console.log(reverseNum) //[ 6, 5, 4, 3, 2, 1 ]
以上就是 split() 方法。嘗試練習(xí)一下,可把自己的GitHub存儲庫的代碼共享到評論區(qū)。
3. Sort()方法
正如名字所述, sort() 方法是對數(shù)組中的元素進行排序。
默認情況下, sort() 函數(shù)將值排序為字符串。
- let greekLetter = ['beta','alpha','delta','gamma'];
- console.log(greekLetter.sort()) // [ 'alpha', 'beta', 'delta', 'gamma' ]
對數(shù)字進行排序時,會出現(xiàn)問題。
因為,如果要對數(shù)字進行排序,比如說100和25,100將出現(xiàn)在25之前,因為100中的1出現(xiàn)在25中的2之前。
- let num1 = [25, 100, 23]
- console.log(num1.sort()) //[ 100, 23, 25 ]
- let num2 = ['25', '100', '23']
- console.log(num2.sort()) //[ '100', '23', '25' ]
可以使用比較函數(shù)來解決這一問題,這種方法將函數(shù)傳遞給語法: function(a, b){return a — b}
- let num = [25, 100, 23]
- console.log(num.sort((a, b) => {
- return a - b
- }))
- //[ 23, 25, 100 ]
(我們使用了箭頭函數(shù),而不是上文語法中給出的傳統(tǒng)函數(shù).)
首先要理解這個比較函數(shù)。它應(yīng)返回負值、零值還是正值,具體取決于參數(shù)——a更大還是b更大。
當 sort() 函數(shù)比較兩個值時,它會將值發(fā)送至比較函數(shù),并根據(jù)返回值(負值、零值或正值)對值進行排序。
- 如果結(jié)果為負,則a排在b之前。
- 如果結(jié)果為正,則b排在a之前。
- 如果結(jié)果為0,則兩個值的排序順序不會發(fā)生改變。
- 比較函數(shù)比較數(shù)組中的所有值,一次比較兩個值(a,b)。
· 比較25和100時, sort() 方法調(diào)用比較函數(shù)(25,100)。
· 函數(shù)計算25-100(a,b),且在結(jié)果為負(-75)時,sort函數(shù)將25排為低于100的值。