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，于是仔细想想到底这个方法能用来做什么？
下面是一个我觉得很有效但自己却很少用到的深入学习法
1、indexOf是找到首次出现的位置。。（首先多次理解这个定义）
2、那如果这是一个游戏。。（从感兴趣的方向作为切入点，联想实际生活）
3、游戏规则是需要找出一句话中"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>

结果查看：

2、3、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用法后开始编写~
思路如下：
1、首先得创建一个对象obj
2、for循环时用charAt()方法把每个字符塞到char中，obj[char]相当于“该字符的次数”
3、每次循环时更新对应字符次数
4、定义次数最多的字符max
5、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前端学习，需要我们多看书多敲码多思考