JS内置对象-关于String字符串对象的2个小实验

时间 2019-11-06

原文原文链接

第一篇技术文章写些简单点的~
在大三上web前端开发课程时，虽然能用JavaScript制做一些简单的页面动态效果，但其实不少JS知识并未掌握，因此本身又经过视频再复习一次JS。（个人JS书籍还在来的路上，在此以前，让我先用“在线课程”这种快餐充饥~）html

JS内置对象中String字符串对象有太多方法了，今天经过2个简单实验，熟悉indexOf()、lastIndexOf()、charAt()3个方法的使用。前端

首先来看看w3school里是怎么介绍indexOf()的web

语法：学习

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

用法：设计

返回某个指定的字符串值在字符串中首次出现的位置code

两大参数：视频

参数1 searchValue 必需。规定需检索的字符串值 htm

参数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>

结果以下：

可是这样并很差看，尝试优化。但愿索引值之间用“、”隔开，而最后的索引值后面无“、”。这时须要用到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前端学习，须要咱们多看书多敲码多思考