javascript中數(shù)組和字符串的方法對比
前面的話
字符串和數(shù)組有很多的相同之處,它們的方法眾多,且相似度很高;但它們又有不同之處,字符串是不可變值,于是可以把其看作只讀的數(shù)組。本文將對字符串和數(shù)組的類似方法進(jìn)行比較
可索引
ECMAScript5定義了一種訪問字符的方法,使用方括號(hào)加數(shù)字索引來訪問字符串中的特定字符
可索引的字符串的最大的好處就是簡單,用方括號(hào)代替了charAt()調(diào)用,這樣更加簡潔、可讀并且可能更高效。不僅如此,字符串的行為類似于數(shù)組的事實(shí)使得通用的數(shù)組方法可以應(yīng)用到字符串上
如果參數(shù)超出范圍或是NaN時(shí),則輸出undefined
var str = "hello"; console.log(str[0]);//h console.log(str[[1]]);//e console.log(str[false]);//undefined console.log(str[-1]);//undefined console.log(str[NaN]);//undefined console.log(str[]);//報(bào)錯(cuò)
var arr = ['h','e','l','l','o']; console.log(arr[0]);//h console.log(arr[[1]]);//e console.log(arr[false]);//undefined console.log(arr[-1]);//undefined console.log(arr[NaN]);//undefined console.log(arr[]);//報(bào)錯(cuò)
轉(zhuǎn)換
字符串可以使用split()方法轉(zhuǎn)換為數(shù)組;而數(shù)組可以使用join()方法轉(zhuǎn)換為字符串
【split()】
split()方法基于指定的分隔符將一個(gè)字符串分割成多個(gè)字符串,并將結(jié)果放在一個(gè)數(shù)組中,分隔符可以是字符串,也可以是一個(gè)正則表達(dá)式
該方法可以接受(可選的)第二個(gè)參數(shù)用于指定數(shù)組的大小。如果第二個(gè)參數(shù)為0-array.length范圍內(nèi)的值時(shí),按照指定參數(shù)輸出,其他情況將所有結(jié)果都輸出
若指定分隔符沒有出現(xiàn)在字符串中,則以數(shù)組的形式返回原字符串的值
var colorText = 'red,blue,green,yellow'; console.log(colorText.split(''));//["r", "e", "d", ",", "b", "l", "u", "e", ",", "g", "r", "e", "e", "n", ",", "y", "e", "l", "l", "o", "w"] console.log(colorText.split(','));//["red", "blue", "green", "yellow"] console.log(colorText.split(',',2));//["red", "blue"] console.log(colorText.split(',',6));//["red", "blue", "green", "yellow"] console.log(colorText.split('-'));//["red,blue,green,yellow"] console.log(colorText.split(/\,/));//["red", "blue", "green", "yellow"] console.log(colorText.split(/e/));//["r", "d,blu", ",gr", "", "n,y", "llow"] console.log(colorText.split(/[^\,]+/));//將除去逗號(hào)以外的字符串變?yōu)榉指舴鸞"", ",", ",", ",", ""],IE8-會(huì)識(shí)別為[",",",",","]
【join()】
join()方法可以使用不同的分隔符來構(gòu)建這個(gè)字符串,join()方法只接收一個(gè)參數(shù),用作分隔符的字符串,然后返回包含所有數(shù)組項(xiàng)的字符串
如果不給join()方法傳入任何值,則使用逗號(hào)作為分隔符
var a = [1,2,3]; console.log(a.join());//'1,2,3' console.log(a.join(' '));//'1 2 3' console.log(a.join(''));//'123' var b = new Array(10); b.join('-');//'---------',9個(gè)連字符組成的字符串
如果數(shù)組中的某一項(xiàng)的值是null或者undefined,則該值在join()方法返回的結(jié)果中以空字符串表示
var colors = [1,undefined,2,null,3]; console.log(colors.join());//'1,,2,,3'
由于字符串是類數(shù)組對象,所以,也可以使用join()方法
console.log(Array.prototype.join.call('hello', '-'));// "h-e-l-l-o"
var str = 'test'; var arr = str.split('')//["t", "e", "s", "t"] console.log(arr.join('-'));//'t-e-s-t'
拼接
字符串和數(shù)組共同擁有拼接方法concat()
var value = 'hello'; console.log(value.concat('world'));//'helloworld' console.log(value.concat(['world']));//'helloworld' console.log(value.concat([['world']]));//'helloworld'
var value = ['hello']; console.log(value.concat('world'));//["hello", "world"] console.log(value.concat(['world']));//["hello", "world"] console.log(value.concat([['world']]));//["hello", ["world"]]
創(chuàng)建
字符串和數(shù)組都擁有創(chuàng)建方法slice(),分別用于創(chuàng)建子字符串和子數(shù)組
slice()方法基于當(dāng)前數(shù)組(或字符串)中的一個(gè)或多個(gè)項(xiàng)創(chuàng)建一個(gè)新數(shù)組(或字符串),接受一個(gè)或兩個(gè)參數(shù),即要返回項(xiàng)的起始和結(jié)束位置,最后返回新數(shù)組(或字符串)
slice(start,end)方法需要兩個(gè)參數(shù)start和end,返回這個(gè)數(shù)組(或字符串)中從start位置到(但不包含)end位置的一個(gè)子數(shù)組(或字符串);如果end為undefined或不存在,則返回從start位置到數(shù)組(或字符串)結(jié)尾的所有項(xiàng)
如果start是負(fù)數(shù),則start = max(length + start,0)
如果end是負(fù)數(shù),則end = max(length + end,0)
start和end無法交換位置
var numbers = [1,2,3,4,5]; console.log(numbers.slice(2));//[3,4,5] console.log(numbers.slice(2,undefined));//[3,4,5] console.log(numbers.slice(2,3));//[3] console.log(numbers.slice(2,1));//[] console.log(numbers.slice(-3));//-3+5=2 -> [3,4,5] console.log(numbers.slice(-8));//max(5 + -8,0)=0 -> [1,2,3,4,5] console.log(numbers.slice(0,-3));//-3+5=2 -> [1,2] console.log(numbers.slice(-2,-1));//-2+5=3;-1+5=4; -> [4]
var stringValue = 'hello world'; console.log(stringValue.slice());//'hello world' console.log(stringValue.slice(2));//'llo world' console.log(stringValue.slice(20));//'' console.log(stringValue.slice(2,undefined));//'llo world' console.log(stringValue.slice(2,-5));//'llo ' console.log(stringValue.slice(2,-20));//'' console.log(stringValue.slice(-2,2));//'' console.log(stringValue.slice(-2,-20));//'' console.log(stringValue.slice(-2,20));//'ld' console.log(stringValue.slice(-20,2));//'he' console.log(stringValue.slice(-20,-2));//'hello wor'
位置
字符串和數(shù)組都擁有查找位置的兩個(gè)方法:indexOf()和lastIndexOf()。位置方法和中括號(hào)[]讀取方法正好相反,一個(gè)是通過項(xiàng)查找索引,一個(gè)是通過索引查找項(xiàng)
【indexOf()】
indexOf(search,start)方法接收search和start兩個(gè)參數(shù),返回search首次出現(xiàn)的位置,如果沒有找到則返回-1
字符串中的search參數(shù)會(huì)調(diào)用String()轉(zhuǎn)型函數(shù),將該參數(shù)的非字符串值轉(zhuǎn)換為字符串;而數(shù)組中的search參數(shù)則使用嚴(yán)格相等運(yùn)算符(===)進(jìn)行比較
不論是數(shù)組還是字符串,第二個(gè)參數(shù)start都會(huì)隱式調(diào)用Number()轉(zhuǎn)型函數(shù),將start非數(shù)字值(undefined除外)轉(zhuǎn)換為數(shù)值;若忽略該參數(shù)或該參數(shù)為undefined、NaN時(shí),start = 0
若start參數(shù)為負(fù)數(shù),字符串的處理是將start=0;而數(shù)組的處理是start = max(0,start+length)
var string = 'hello world world'; console.log(string.indexOf('ld'));//9 console.log(string.indexOf('ld',undefined));//9 console.log(string.indexOf('ld',NaN));//9 console.log(string.indexOf('ld',-1));//9 console.log(string.indexOf('ld',10));//15 console.log(string.indexOf('ld',[10]));//15 console.log(string.indexOf('true',[10]));//-1 console.log(string.indexOf(false,[10]));//-1
var arr = ['a','b','c','d','e','a','b']; console.log(arr.indexOf('a',undefined));//0 console.log(arr.indexOf('a',NaN));//0 console.log(arr.indexOf('a',1));//5 console.log(arr.indexOf('a',true));//5 console.log(arr.indexOf('a',-1));//max(0,-1+7)=6; -1 console.log(arr.indexOf('a',-5));//max(0,-5+7)=2; 5 console.log(arr.indexOf('a',-50));//max(0,-50+7)=0; 0
【lastIndexOf()】
與indexOf()方法相反,lastIndexOf()方法是從右向左查找
lastIndexOf(search,start)方法接收search和start兩個(gè)參數(shù),返回searchString第一次出現(xiàn)的位置,如果沒有找到則返回-1
類似地,字符串中的search參數(shù)會(huì)調(diào)用String()轉(zhuǎn)型函數(shù),將該參數(shù)的非字符串值轉(zhuǎn)換為字符串;而數(shù)組中的search參數(shù)則使用嚴(yán)格相等運(yùn)算符(===)進(jìn)行比較
不論是數(shù)組還是字符串,第二個(gè)參數(shù)start都會(huì)隱式調(diào)用Number()轉(zhuǎn)型函數(shù),將start非數(shù)字值(undefined除外)轉(zhuǎn)換為數(shù)值
若忽略該參數(shù)或該參數(shù)為undefined、NaN時(shí),字符串的處理是start = length - 1;而數(shù)組的處理是start = 0
若start參數(shù)為負(fù)數(shù),字符串的處理是將start=0;而數(shù)組的處理是start = max(0,start+length)
var string = 'hello world world'; console.log(string.lastIndexOf('ld'));//15 console.log(string.lastIndexOf('ld',undefined));//15 console.log(string.lastIndexOf('ld',NaN));//15 console.log(string.lastIndexOf('ld',-1));//-1 console.log(string.lastIndexOf('h',-1));//0 console.log(string.lastIndexOf('w',undefined));//12 console.log(string.lastIndexOf('ld',10));//9 console.log(string.lastIndexOf('ld',[10]));//9 console.log(string.lastIndexOf('true',[10]));//-1 console.log(string.lastIndexOf(false,[10]));//-1
var arr = [1,2,3,'1','2','3']; console.log(arr.lastIndexOf('2'));//4 console.log(arr.lastIndexOf(3));//2 console.log(arr.lastIndexOf(0));//-1 var arr = ['a','b','c','d','e','a','b']; console.log(arr.lastIndexOf('b'));//6 console.log(arr.lastIndexOf('b',undefined));//-1 console.log(arr.lastIndexOf('a',undefined));//0 console.log(arr.lastIndexOf('b',NaN));//-1 console.log(arr.lastIndexOf('b',1));//1 console.log(arr.lastIndexOf('b',-1));//max(0,-1+7)=6; 6 console.log(arr.lastIndexOf('b',-5));//max(0,-5+7)=2; 1 console.log(arr.lastIndexOf('b',-50));//max(0,-50+7)=0; -1
以上這篇javascript中數(shù)組和字符串的方法對比就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- JS 清除字符串?dāng)?shù)組中,重復(fù)元素的實(shí)現(xiàn)方法
- JavaScript常用字符串與數(shù)組擴(kuò)展函數(shù)小結(jié)
- js中數(shù)組結(jié)合字符串實(shí)現(xiàn)查找(屏蔽廣告判斷url等)
- 詳解JavaScript中數(shù)組和字符串的lastIndexOf()方法使用
- 詳解JavaScript數(shù)組和字符串中去除重復(fù)值的方法
- js中實(shí)現(xiàn)字符串和數(shù)組的相互轉(zhuǎn)化詳解
- js實(shí)現(xiàn)prototype擴(kuò)展的方法(字符串,日期,數(shù)組擴(kuò)展)
- js實(shí)現(xiàn)字符串和數(shù)組之間相互轉(zhuǎn)換操作
- 淺談js中字符和數(shù)組一些基本算法題
相關(guān)文章
JS加密插件CryptoJS實(shí)現(xiàn)的DES加密示例
這篇文章主要介紹了JS加密插件CryptoJS實(shí)現(xiàn)的DES加密,結(jié)合實(shí)例形式分析了javascript使用CryptoJS插件進(jìn)行des加密的各種常見模式使用技巧,需要的朋友可以參考下2018-08-08JS+CSS實(shí)現(xiàn)帶小三角指引的滑動(dòng)門效果
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)帶小三角指引的滑動(dòng)門效果,可實(shí)現(xiàn)帶有箭頭提示效果的滑動(dòng)門功能,涉及JavaScript動(dòng)態(tài)操作頁面元素樣式的相關(guān)技巧,需要的朋友可以參考下2015-09-09js動(dòng)態(tài)實(shí)現(xiàn)表格添加和刪除操作
這篇文章主要為大家詳細(xì)介紹了js動(dòng)態(tài)實(shí)現(xiàn)表格添加和刪除操作,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-04-04jquery獲取URL中參數(shù)解決中文亂碼問題的兩種方法
從A頁面通過url傳參到B頁面時(shí),獲取URL中參數(shù)出現(xiàn)中文亂碼問題,解析url參數(shù)的正確方法如下,感興趣的朋友可以參考下2013-12-12