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实在是太简单了吧。。-.-!!!


第一个由于原字符串有此一系列完整且连续的字符,于是输出位置为6,注意空格也占一个字符位置哦~
第二个由于没有,所以输出-1

这里注意了~返回值是数字(索引),在后面提及的小实验中索引index的定义非常关键。

---------------小实验1---------------

实在接受不了如此直白的demo,于是仔细想想到底这个方法能用来做什么?
下面是一个我觉得很有效但自己却很少用到的深入学习法
1、indexOf是找到首次出现的位置。。(首先多次理解这个定义)
2、那如果这是一个游戏。。(从感兴趣的方向作为切入点,联想实际生活)
3、游戏规则是需要找出一句话中"l"字母出现的所有位置。。(将其具体化)

而indexOf()只会找一次,那要如何设计?

于是二话不说,几行代码就写出来了,非常的迅速!

刷新页面一看,oh my god!(下面是运行结果)

22222222222

这么简单的程序都不会写,真得好好检讨一下!T.T

问题出在哪里呢?首先是定义一个字符串str,然后for循环让它每找到一个"l"字母就输出该字母所在位置,但是为何每次都输出2?

没错,关键就是那个index索引!
愚蠢的我以为i++就代表起始查找位置在后移,其实真正起作用的是索引index。
另外,还有一点!就是indexOf()方法中的参数2,刚才我的错误代码中,indexOf()是只有参数1的,参数2默认为字符串首字符位置,即要从头开始寻找。

又没有索引值,又每次都得从头找,还要for循环,不出现一堆2才怪呢~

正确做法

结果如下:

239

但是这样并不好看,尝试优化。希望索引值之间用“、”隔开,而最后的索引值后面无“、”。这时需要用到indexOf()的兄弟方法lastIndexOf(),只要记住用法和indexOf()完全相反,省略参数2则从字符串最后一个字符开始寻找,直到找到指定字符的最后出现位置。

优化代码:

结果查看:

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里每个字母对应的次数进行比较,输出最多次数所对应的字符

展示各个字符及对应的次数,代码如下:

输出结果:

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次数最多的字符是"+maxChar);
 document.write("
一共出现了"+max+" 次");

看起来行得通,结果却不尽如人意啊T.T

次数最多的字符是d
一共出现了3 次

为什么次数最多的字符是d。。。但又竟然是3次??明明d只出现1次,而l才是出现了3次。。咋就混在一起了呢。。。当时的我竟然想笑。。。

仔细回看代码,会发现if-else语句有点奇怪,按顺序执行的话,"hello world"首先是h字母次数,次数为1,max

换言之,根本不需要else语句,当更新max的同时,也要更新maxChar,对号入座,才不会有“牛头不搭马嘴”这种尴尬情况的发生。。。

完整代码如下:(由于我们要的只是最终结果,所以“列举每个字母及对应的次数”这一步可省略)


第一篇文章就用了我3小时。。。只想说一句。。好累!虽然这只是JS中一个很小的知识,不过还是挺有意义的~

最后感谢博客园用户!master的这篇文章,js--找字符串中出现最多的字符,实在没想到有人会和我想到一块去了。实验2就是受这篇文章的启发的。

                                                                   ————WEB前端学习,需要我们多看书多敲码多思考

你可能感兴趣的:(JS内置对象-关于String字符串对象的2个小实验)