JS內置對象-關於String字符串對象的2個小實驗

第一篇技術文章寫些簡單點的~
在大三上web前端開發課程時，雖然能用JavaScript製做一些簡單的頁面動態效果，但其實不少JS知識並未掌握，因此本身又經過視頻再複習一次JS。（個人JS書籍還在來的路上，在此以前，讓我先用「在線課程」這種快餐充飢~）

JS內置對象中String字符串對象有太多方法了，今天經過2個簡單實驗，熟悉indexOf()、lastIndexOf()、charAt()3個方法的使用。

首先來看看w3school裏是怎麼介紹indexOf()的

語法：

Object(string|array).indexOf(searchValue, fromIndex);

用法：

返回某個指定的字符串值在字符串中首次出現的位置

兩大參數：

參數1 searchValue 必需。規定需檢索的字符串值

參數2 fromIndex 可選。規定在字符串中開始檢索的位置。它的合法取值是0到stringObject.length-1。如省略該參數，則將從字符串的首字符開始檢索。

而後學習時所給demo實在是太簡單了吧。。-.-!!!

<script>
    var str="Hello World";
    document.write(str.indexOf("World"));
    document.write(str.indexOf("world"));
</script>

第一個因爲原字符串有此一系列完整且連續的字符，因而輸出位置爲6，注意空格也佔一個字符位置哦~
第二個因爲沒有，因此輸出-1

這裏注意了~返回值是數字(索引)，在後面說起的小實驗中索引index的定義很是關鍵。

---------------小實驗1---------------

實在接受不了如此直白的demo，因而仔細想一想到底這個方法能用來作什麼？
下面是一個我以爲頗有效但本身卻不多用到的深刻學習法
一、indexOf是找到首次出現的位置。。（首先屢次理解這個定義）
二、那若是這是一個遊戲。。（從感興趣的方向做爲切入點，聯想實際生活）
三、遊戲規則是須要找出一句話中"l"字母出現的全部位置。。（將其具體化）

而indexOf()只會找一次，那要如何設計？

因而二話不說，幾行代碼就寫出來了，很是的迅速！

<script>
    var str="hello world";
    for(var i=0;i<str.length;i++){
        document.write(str.indexOf("l"));
    }
</script>

刷新頁面一看，oh my god！（下面是運行結果）

22222222222

這麼簡單的程序都不會寫，真得好好反省一下！T.T

問題出在哪裏呢？首先是定義一個字符串str，而後for循環讓它每找到一個"l"字母就輸出該字母所在位置，可是爲什麼每次都輸出2？

沒錯，關鍵就是那個index索引！
愚蠢的我覺得i++就表明起始查找位置在後移，其實真正起做用的是索引index。
另外，還有一點！就是indexOf()方法中的參數2，剛纔個人錯誤代碼中，indexOf()是隻有參數1的，參數2默認爲字符串首字符位置，即要從頭開始尋找。

又沒有索引值，又每次都得從頭找，還要for循環，不出現一堆2纔怪呢~

正確作法

<script>
    var str="hello world";
    var index=-1;//索引值默認爲-1
    for(var i=0;i<str.length;i++){
        index=str.indexOf("l",index+1);//每次都從上一次索引值的下一個開始尋找，找到後更新索引值index
        if(index!=-1){
            document.write(index);
        }
        else
            break;
    }
</script>

結果以下：

239

可是這樣並很差看，嘗試優化。但願索引值之間用「、」隔開，而最後的索引值後面無「、」。這時須要用到indexOf()的兄弟方法lastIndexOf()，只要記住用法和indexOf()徹底相反，省略參數2則從字符串最後一個字符開始尋找，直到找到指定字符的最後出現位置。

優化代碼：

<script>
var str="hello world";
var index=-1;
var a=str.lastIndexOf("l");
for(var i=0;i<str.length;i++){
    index=str.indexOf("l",index+1);
    if(index!=-1){
        document.write(index);
        if(index!=a){  //這個判斷用於防止最後一個索引值後面還有「、」
            document.write("、");
        }
    }
    else
        break;
}
</script>

結果查看：

二、三、9

其實用break來跳出循環一直以爲不太規範。。。網上看到有用do-while()方法感受更好。。

PS：要注意indexOf()對大小寫要求很高，一開始沒留意，寫成indexof()，一直沒效果，後來才發現原來o要大寫。。香菇~

---------------小實驗2---------------

若是將遊戲顯示簡化一點又要怎麼設計呢？如今已有的遊戲規則是數有多少個"l"字母，而後說出每一個的位置。
如今增長難度，要顯示次數最多的字符。

小實驗1是顯示次數（其實就是那個索引值啦0.0），此次顯示的是字符哦~涉及到字符，就要用到charAt()方法。

一樣的，首先在看看w3school有什麼想說的

語法：

stringObject.charAt(index);

用法：

返回指定位置的字符

參數：

index 必需。表示字符串中某個位置的數字，即字符在字符串中的下標。

這一次涉及到for in的用法，這裏要和for循環作一個區分。

for - 循環代碼塊必定的次數
for/in - 循環遍歷對象的屬性

遍歷對象的屬性，在此次實驗裏，因爲要找出哪一個字符次數最多，因此要遍歷的是字符（對象）的次數（屬性）。

簡單例子：

var a=["aa","bb","cc"];
for(var c in a){
    document.write(a[c]);
}

結果爲：

aabbcc

在瞭解for in用法後開始編寫~
思路以下：
一、首先得建立一個對象obj
二、for循環時用charAt()方法把每一個字符塞到char中，obj[char]至關於「該字符的次數」
三、每次循環時更新對應字符次數
四、定義次數最多的字符max
五、for in循環遍歷次數，與obj裏每一個字母對應的次數進行比較，輸出最屢次數所對應的字符

展現各個字符及對應的次數，代碼以下：

<script>
    var str="hello world";
    var obj={};
    for(var i=0;i<str.length;i++){
        var char=str.charAt(i);//用於存放字符，char就是字符
        if(obj[char]){//obj[char]即char字符的次數，若次數爲1次，則能夠累加，不然初始化爲1
            obj[char]++;
        }else {
            obj[char]=1;
        }
     document.write("<br/>"+char+":"+obj[char]+" 次");
 }
</script>

輸出結果：

h:1 次
e:1 次
l:1 次
l:2 次
o:1 次
:1 次
w:1 次
o:2 次
r:1 次
l:3 次
d:1 次

能夠說實驗2已經完成了一半，接下來是for in循環遍歷次數，找次數最多的出來！後續代碼以下：

var max=0;//次數最多，初始化爲0，防止undefined
 var maxChar;
 for(char in obj){
     if(max<obj[char]){//若是max不是次數最多的話，就更新max
         max=obj[char];
     }else{//若是max是次數最多的，就把char值賦給maxChar
         maxChar=char;
     }
 }
 document.write("<br/>次數最多的字符是"+maxChar);
 document.write("<br/>一共出現了"+max+" 次");

看起來行得通，結果卻不盡如人意啊T.T

次數最多的字符是d
一共出現了3 次

爲何次數最多的字符是d。。。但又居然是3次？？明明d只出現1次，而l纔是出現了3次。。咋就混在一塊兒了呢。。。當時的我居然想笑。。。

仔細回看代碼，會發現if-else語句有點奇怪，按順序執行的話，"hello world"首先是h字母次數，次數爲1，max<obj[char]成立更新max，而後程序就繼續循環了！這個時候的maxChar是什麼？能夠說是爲null，爲何又會是d呢？由於到最後一次遍歷時，max已是最屢次數了，這時才執行else語句，maxChar=char，把最後的一次遍歷的字符d賦給了maxChar。

換言之，根本不須要else語句，當更新max的同時，也要更新maxChar，對號入座，纔不會有「牛頭不搭馬嘴」這種尷尬狀況的發生。。。

完整代碼以下：（因爲咱們要的只是最終結果，因此「列舉每一個字母及對應的次數」這一步可省略）

<script>
     var str="hello world";
     var obj={}
     for(var i=0;i<str.length;i++){
        var char=str.charAt(i);//用於存放字符，char就是字符
        if(obj[char]){//obj[char]即char字符的次數，若次數爲1次，則能夠累加，不然初始化爲1
             obj[char]++;
         }else {
             obj[char]=1;
         }
         //document.write("<br/>"+char+":"+obj[char]+" 次");
     }
     var max=0;//次數最多，初始化爲0，防止undefined
     var maxChar;
     for(char in obj){
         if(max<obj[char]){//若是max不是次數最多的話，就更新max
             max=obj[char];
             maxChar=char;
         }
     }
     document.write("<br/>次數最多的字符是"+maxChar);
     document.write("<br/>一共出現了"+max+" 次");
 </script>

第一篇文章就用了我3小時。。。只想說一句。。好累！雖然這只是JS中一個很小的知識，不過仍是挺有意義的~

最後感謝博客園用戶!master的這篇文章，js--找字符串中出現最多的字符，實在沒想到有人會和我想到一塊去了。實驗2就是受這篇文章的啓發的。

————WEB前端學習，須要咱們多看書多敲碼多思考