1.字符串操作方法
1.charAt?
*?????作用 *????????
?通過索引找字符 *?????語法 *?????????字符串.charAt(index) *?????參數 *?????????索引值 *?????????取值范圍：0-(length-1) *?????????如果不寫參數，那默認為0 *?????????如果index超出了范圍后，它會返回一個空 *?????返回值
?*?????????返回取到的那個字符，類型為字符串
var str='kaivon'; var s1=str.charAt(1); console.log(s1); //a var s2=str.charAt(); console.log(s2); //k var s3=str.charAt(10); console.log(s3); //空 2.charCodeAt *?????作用
???*?????????通過索引找字符，找到后轉為Unicode編碼 *?????語法 *?????????字符串.charCodeAt(index) *?????參數 *?????????索引 *?????????取值范圍：0-length-1 *?????????沒有參數，默認為第0個 *?????????如果參數超過了范圍，那它就返回NaN *?????返回值
?*?????????返回字符對應的Unicode編碼 var str='kaivon'; var s1=str.charCodeAt(1); console.log(s1); //97 var s2=str.charCodeAt(); console.log(s2); //107 var s3=str.charCodeAt(10); console.log(s3); //NaN 3.indexOf *?????作用
?*?????????通過字符找下標（從左往右找這個字符首次出現的位置） *?????語法 *?????????字符串.indexOf(searchValue,fromIndex) *?????參數 *?????????searchValue????????要查找的字符 *?????????fromIndex????????從哪個位置開始查找，這個參數如果沒有默認為0 *?????返回值
?*?????????返回一個數字，這個數字代表字符在整個字符串里的真實下標，如果沒找到的話就返回-1
var str='kaivaokn'; var s1=str.indexOf('a'); console.log(s1); //1 var s2=str.indexOf('k',1); console.log(s2); //6 var s3=str.indexOf('b'); console.log(s3); //-1 4.lastIndexOf *?????作用
?*?????????通過字符找下標（從右往左找字符最后出現的位置） *?????語法 *?????????字符串.lastIndexOf(searchValue,formIndex) *?????參數 *?????????searchValue????????要查找的字符串 *?????????formIndex????????從哪開始查找，如果沒有的話，默認從最后一個字符開始 *?????返回值
?*?????????返回一個數字，如果找到的話就返回這個字符的真實下標，如果沒找到返回-1 var str='kaivokn'; var s1=str.lastIndexOf('a'); console.log(s1); //1 var s2=str.lastIndexOf('k',5); console.log(s2); //5 var s3=str.lastIndexOf('b'); console.log(s3); //-1? 5.slice *?????作用
????*?????????截取字符串 *?????語法 *?????????字符串.slice(beginSlice,endSlice) *?????參數 *?????????beginSlice????????開始的位置 *?????????endSlice????????????結束的位置 *? *?????????如果一個參數都沒有的話，直接返回整個字符串 *?????????如果只有一個參數，代表開始的位置，那結束的位置默認為最后一位字符 *?????????如果有兩個參數，
第二個參數為結束位置，但是不包含它 *?????????參數可以放負數，但是開始位置不能大于結束位置 *?????????????開始的位置是最后一位，代表-1 *????????? *?????返回值 *??
???????返回截取到的那個字符串，原字符串沒有變化 ? 區別： substring的作用與slice的作用一樣，只是參數有區別。
*?與slice的區別
?*?????1、slice起始位置不能大于結束位置，而substring起始位置可以大于結束位置?(會自動調大小)
?*?????2、slice可以放負數，而substring是不能放負數的
var str='kaiovn'; var s1=str.slice(); console.log(s1); //kaiovn var s2=str.slice(3); console.log(s2); //ovn var s3=str.slice(2,4); console.log(s3); //io var s4=str.slice(-3,-2); console.log(s4); //o console.log(str); //kaiovn 6.split ? ? ? ? *?????作用
??*?????????用指定的分隔符把字符串分隔成數組 *?????語法 *?????????字符串.split(separator,limit) *?????參數 *?????????separator????????分隔符 *?????????limit????????????分隔成數組數據的個數 *? *?????????一個參數都沒有以及參數是一個空格字符的話，會把整個字符串作為數組中的一個數據 *?????????如果參數為一個空字符，它會把字符串里的每個字符做為數組中的數據 *?????????如果參數為兩個，分隔后的數組的個數第二個參數的值 *?????返回值 *?????????返回一個數組，原字符串沒有變化
var str='kaivon'; var s1=str.split(); console.log(s1); //["kaivon"] var s2=str.split(''); console.log(s2); //["k", "a", "i", "v", "o", "n"] var s3=str.split(' '); console.log(s3); //["kaivon"] var s4=str.split('a'); console.log(s4); //["k", "ivon"] var s5=str.split('i',1); console.log(s5); //["ka"] console.log(str); //kaivon ? 7.substr *?????作用
??*?????????截取一段指定開始位置與個數的字符串 *?????語法 *?????????字符串.substr(start,length) *?????參數 *?????????start????????開始的位置
?*?????????length????????截取的個數 *????????? *?????????一個參數都沒有，它會把整個字符串全部返回 *?????????如果有一個參數，那默認會從第一個參數的位置截到最后一位字符 *?返回值 *?????????返回截取到的字符串，原字符串不變
var str='kaivon'; var s1=str.substr(); console.log(s1); //kaivon var s2=str.substr(2); console.log(s2); //ivon var s3=str.substr(3,2); console.log(s3); //vo console.log(str); //kaivon ? 8.toLowerCase *?????作用
*?????????把字符串轉成小寫 *?????語法 *?????????字符串.toLowerCase() *?????參數 *?????????沒有參數 *?????返回值 *?????????返回字符串轉成小寫的結果，原來的字符串不有變化
var str='KaiVoN'; var s1=str.toLowerCase(); console.log(s1); //kaivon console.log(str); //KaiVoN 9.toUpperCase *?????作用
*?????????把字符串轉成大寫 *?????語法 *?????????字符串.toUpperCase() *?????參數 *?????????沒有參數 *?????返回值 *?????????返回字符串轉成大寫的結果，原字符串不變
var str='kaivon'; var s1=str.toUpperCase(); console.log(s1); //KAIVON console.log(str); //kaivon 10.trim *?????作用 *?????????去掉字符串的首發空格 *?????語法 *?????????字符串.trim() *?????參數 *?????????沒有參數 *?????返回值 *?????????返回字符串去掉首尾空格的結果，原字符串不變
var str=' kaivon '; var s1=str.trim(); console.log(s1); //kaivon console.log(str); // kaivon 2.JSON *?????JSON(JavaScript?Object?Notation)?是一種輕量級的數據交換格式 ?????????????*?????一種類似JS中的對象格式的字符串(
JSON它是一個字符串，只不過內容長得像對象)
JSON規則 *?????????數據放在了一對引號當中(可以是單引號，也可以是雙)
引號嵌套問題，如果外面單引號里面就用雙引號，用{}或者[]括起來 *?????????里面的每個數據都以鍵值對來表示????????key:value *????????
?key必需放雙引號 ?????????????*?????????每個數據之間用逗號隔開
JSON的用途 用于js與后端進行數據交互
var j1="[1,2,3]"; var j2='{"name":"老王","age":30}'; console.log(j1,typeof j1); //[1,2,3] string console.log(j2,typeof j2); //{"name":"老王","age":30} string 1.JSON.parse() *?JSON.parse(json字符串) ??????????? ?
???*?????把一個JSON格式的字符串轉成對象，返回轉過后的對象 var j1="[1,2,3]"; var j2='{"name":"老王","age":30}'; var obj1=JSON.parse(j1); console.log(obj1,typeof obj1); //[1, 2, 3] "object" var obj2=JSON.parse(j2); console.log(obj2,typeof obj2); //{name: "老王", age: 30} "object" var j3='{name:"kaivon"}'; var obj3=JSON.parse(j3); //報錯 key沒有加引號 var j4='['aow','shw','dwn']'; console.log(JOSN.parse(j4)); //報錯 因為元素只是單引號，需要改成雙引號 2.JSON.stringify() ? *?JSON.stringify(對象) *
?????把一個對象轉換成JSON格式的字符串 *?????如果對象當中的key沒有加引號，也可以轉換，轉換后的結果會自動給它加上引號
var obj1=[1,2,3]; var obj2={"name":'老王',"age":30}; var obj3={name:'老王',"age":30}; var obj4=['ad','gf','fsd']; console.log(JSON.stringify(obj4)); // ["ad","gf","fsd"] var s1=JSON.stringify(obj1); console.log(s1); //[1,2,3] var s2=JSON.stringify(obj2); console.log(s2); //{"name":"老王","age":30} var s3=JSON.stringify(obj3); console.log(s3); //{"name":"老王","age":30} 3.Math 1.Math.ceil() *?????作用
?*?????????把一個數向上取整 *?????語法 *?????????Mathi.ceil(數字) *?????參數 *?????????就是一個數字 *?????返回值 *?????????返回參數向上取整后的結果
console.log(Math.ceil(0.1)); //1 console.log(Math.ceil(-10.8)); //-10 console.log(Math.ceil(10)); //10 2.Math.floor() *?????作用 *?????????把一個數向下取整 *?????語法 *?????????Mathi.floor(數字) *?????參數 *?????????就是一個數字 *?????返回值 *?????????返回參數向下取整后的結果
console.log(Math.floor(0.1)); //0 console.log(Math.floor(-10.8)); //-11 console.log(Math.floor(10)); //10 3.Math.round() *?????作用 *?????????把一個數字四舍五入 *?????語法 *?????????Math.round(數字) *?????參數 *?????????就是一個數字 *?????返回值 *?????????返回參數四舍五入后的結果
console.log(Math.round(3.15)); //3 console.log(Math.round(4.5)); //5 console.log(Math.round(-10.87)); //-11 4.Math.abs() ? ? ? ? ? ? absolute *?????作用 *?????????求一個數字的絕對值 *?????語法 *?????????Math.abs(數字) *?????參數 *?????????就是一個數字 *?????返回值 *?????????返回參數取絕對值后的結果
console.log(Math.abs(10)); //10 console.log(Math.abs(-11)); //11 console.log(Math.abs(5-7)); ///2 5.Math.random() *?????作用 *?????????取0-1之間的隨機數，包含0但是不包含1 *?????語法 *?????????Math.random() console.log(Math.random()); ?//獲取到0-1之間的任何數據
常用的隨機取值方法 ? ? ? ? ? ? ? ? ? ?x?~?y?:?Math.round(Math.random()*(y-x)? ?x) ????????????????0?~?x?:?Math.round(Math.random()*x) ????????????????1?~?x?:?Math.ceil(Math.random()*x)||1 ????????????????0?~?x-1?:?Math.floor(Math.random()*x) ? ? //0-10 console.log(Math.round(Math.random()*10)); //5-7 console.log(Math.round(Math.random()*(7-5) 5)); 4.array 1.push *?????作用
????*?????????給數組的末尾添加數據 *?????語法 *?????????數組.push(element1,element2...) *?????參數 *?????????要添加的數據，一個或者多個數據，可以累加 *?????返回值 *??????
???返回數組添加后的長度，原數組變化，變成添加后的數組 var color=['red','green','blue','pink']; var len=color.push('white'); console.log(color); //['red','green','blue','pink','white']; console.log(len); //5 2.unshift *?????作用
*?????????給數組的前面添加數據 *?????語法 *?????????數組.unshift(element1,element2...) *?????參數 *?????????要添加的數據，一個或者多個數據，可以累加 *?????返回值
??*?????????返回數組添加后的長度，原數組變化，變成添加后的數組 var color=['red','green','blue','pink']; var len=color.unshift('white'); console.log(color); //['white','red','green','blue','pink'] console.log(len); //5 3.pop *?????作用
???*?????????刪除數組最后一位數據 *?????語法 *?????????數組.pop() *?????參數 *?????????沒有參數 *?????返回值
???*?????????返回被刪除的那個數據，原數組變化，變成刪除后的數組 var color=['red','green','blue','pink']; var del=color.pop(); console.log(del); //pink console.log(color); //["red", "green", "blue"] ? ? 4.shift *?????作用
?*?????????刪除數組的第一位數據 *?????語法 *?????????數組.shift() *?????參數 *?????????沒有參數 *?????返回值
?*?????????返回被刪除的那個數據，原數組變化，變成刪除后的數組 var color=['red','green','blue','pink']; var del=color.shift(); console.log(del); //red console.log(color); //["green", "blue", "pink"] 5.forEach *?????作用 *?????????遍歷數組 *?????語法 *?????????數組.forEach(function(currentValue,index,array){ *?????????????//每次循環完都會執行這里的代碼 *?????????}) *?????參數 *?????????forEach里放的參數是一個函數 *?????????函數里的參數 *?????????????currentValue????????????當前數組中的某個數據 *?????????????index????????????????當前數據的索引 *?????????????array????????????????數組本身
var color=['red','green','blue','pink']; color.forEach(function(currentValue,index,array){ console.log(currentValue,index,array) }); 6.sort *?????作用 *?????????對數組進行排序 *?????語法 *?????????數組.sort(compareFunction) *?????參數 *?????????用來指定按某種順序對數組進行排序 *?????????如果沒有參數的話，會按照每個字符對應的Unicode碼值進行排序 *? *?????????函數里有兩個參數 *?????????????a,b *?????????????return?a-b????????????按從小到大的順序去排 *?????????????return?b-a????????????按從大到小的順序去排 *? *?????返回值
*?????????返回排序后的數組，原數組變了，變成排序后的數組 var arr=[4,2,7,8,3,1,10]; arr.sort(function(a,b){ return a-b; }) console.log(arr); //[1, 2, 3, 4, 7, 8, 10] var arr1=[4,2,7,8,3,1,10]; arr1.sort(function(a,b){ return b-a; }); console.log(arr1); //[10, 8, 7, 4, 3, 2, 1] //隨機排序 var arr2=[4,2,7,8,3,1,10]; arr2.sort(function(){ return 0.5-Math.random(); }) console.log(arr2); //沒有參數 var arr3=[4,2,7,8,3,1,10]; arr3.sort(); console.log(arr3); //按照字符對應的unicode編碼號 7.reverse *?????作用
*?????????顛倒數組 *?????語法 *?????????數組.reverse() *?????返回值
??*?????????返回顛倒后的數組，原數組變化了，變成顛倒后的數組了 var color=['red','green','blue','pink']; var a=color.reverse(); console.log(a); //["pink", "blue", "green", "red"] console.log(color); //["pink", "blue", "green", "red"] 8.concat *?????作用 *?????????連接數組，組成一個新數組 *?????語法 *?????????數組.concat(varlue1,value2,value3...) *?????參數 *?????????需要與原數組進行合并的數據 *?????????參數可以是數組，也可以是非數組 *?????返回值
????*?????????合并后的新數組，原數組是不變的 區別 concat與push一樣都是給數組增加數據， ? concat添加數據 返回值是新數組，并且原數組不變。 push返回值是新數組的長度，原數組變成新數組
var color=['red','green','blue','pink']; var newColor=color.concat('yellow'); console.log(newColor); //["red", "green", "blue", "pink", "yellow"] console.log(color); //["red", "green", "blue", "pink"] var newColor2=color.concat(['yellow','gold']); console.log(newColor2); //["red", "green", "blue", "pink", "yellow", "gold"] var newColor3=color.concat(1,2,3); console.log(newColor3); //["red", "green", "blue", "pink", 1, 2, 3] 9.join *?????作用
??*?????????將數組中的所有元素都連接成一個字符串 *?????語法 *?????????數組.join(separator) *?????參數 *?????????separator就是一個連接符，用來把數據連成一個字符串 *?????????沒參數的話，默認為一個逗號 *?????????參數是一個空字符，那么數組中的每個數據將被直接連接 *?????返回值
??*?????????返回數組轉成的字符串，原數組不變 var color=['red','green','blue','pink']; var newColor=color.join(); console.log(newColor); //red,green,blue,pink console.log(color); //["red", "green", "blue", "pink"] var new1=color.join(''); console.log(new1); //redgreenbluepink var new2=color.join(' '); console.log(new2); //red green blue pink var new3=color.join('&'); console.log(new3); //red&green&blue&pink 10.slice *?????作用 *?????????截取數組 *?????語法 *?????????數組.slice(begin,end) *?????參數 *?????????begin????????開始的位置 *?????????end????????????結束的位置(不包含最后一位) *? *?????????一個參數都沒有，直接返回原來的數組 *?????????參數只有一個數字，那從數字開始的位置一直到數組的最全截掉 *?????返回值
??*?????????返回截到的數組，原數組不會變 var color=['red','green','blue','pink','yellow']; var n1=color.slice(); console.log(n1); //["red", "green", "blue", "pink", "yellow"] var n2=color.slice(2); console.log(n2); //["blue", "pink", "yellow"] var n3=color.slice(3,4); console.log(n3); //["pink"] console.log(color); //["red", "green", "blue", "pink", "yellow"] 11.splice *?????作用 *?????????用新元素替換舊元素，以此修改數組的內容（替換數組） *?????語法 *?????????數組.splice(start,deleatCount,item) *?????參數 *?????????start????????????開始的位置 *?????????deleatCount????????刪除的個數 *?????????item????????????????替換的內容 *? *?????????一個參數都不有的話，那直接返回一個空數組 *?????????如果參數為一個數字，代表截取數組，從傳的那個數字開始，一直截到最后一位數據 *?????????如果參數為兩個數字，代表截取數組，從第一個參數開始，截取的個數為第二個參數的值 *?????????如果參數為三個，代表替換數組，從第一個參數開始，找到第二個參數值的個數，把找到的內容換成第三個以及第三個以后的參數 *?返回值 *?????????返回刪除的數據
*?????????原數組變化了，變成刪除后剩下的內容 var color=['red','green','blue','pink','yellow']; var c1=color.splice(); console.log(c1); //[] console.log(color); //["red", "green", "blue", "pink", "yellow"] var c2=color.splice(3); console.log(c2); //["pink", "yellow"] console.log(color); //["red", "green", "blue"] var color1=['red','green','blue','pink','yellow']; var c3=color1.splice(1,3); console.log(c3); //["green", "blue", "pink"] console.log(color1); //["red", "yellow"] var color2=['red','green','blue','pink','yellow']; var c4=color2.splice(1,2,'white','black'); console.log(c4); //["green", "blue"] console.log(color2); //["red", "white", "black", "pink", "yellow"] var color3=['red','green','blue','pink','yellow']; var c5='a,b,c'; var c6=color3.splice(3,2,c5); console.log(c6); //['pink',yellow] console.log(color3); //["red", "green", "blue", "a,b,c"] ?
總結
以上是生活随笔為你收集整理的字符串、对象、数组操作方法、json方法的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
