资讯专栏INFORMATION COLUMN

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

Imfan / 678人阅读

摘要:希望索引值之间用隔开,而最后的索引值后面无。优化代码这个判断用于防止最后一个索引值后面还有结果查看其实用来跳出循环一直觉得不太规范。。。小实验是显示次数其实就是那个索引值啦,这次显示的是字符哦涉及到字符,就要用到方法。

第一篇技术文章写些简单点的~
在大三上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前端学习,需要我们多看书多敲码多思考

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/91126.html

相关文章

  • javaScript精华与糟粕

    摘要:最近在看语言精粹这本书,建立完整的知识体系。一关于语言是一门未在实验室打磨过的语言,存在这很多考虑不全面甚至,因此我们很有必要学习本书,已达到去除糟粕,取其精华的效果。则为定义了,为初始化的变量。为对象,数组函数均属于特殊的对象。 最近在看JavaScript语言精粹这本书,建立完整的js知识体系。 一.关于JavaScript语言js是一门未在实验室打磨过的语言,存在这很多考虑不全面...

    mayaohua 评论0 收藏0
  • 重学前端学习笔记(九)--JavaScript中对象分类

    摘要:固有对象由标准规定,随着运行时创建而自动创建的对象实例。普通对象由语法构造器或者关键字定义类创建的对象,它能够被原型继承。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专栏学习【原文有winter的语音】,如有侵权请联系我,邮箱:ka...

    ShowerSun 评论0 收藏0
  • 重学前端学习笔记(九)--JavaScript中对象分类

    摘要:固有对象由标准规定,随着运行时创建而自动创建的对象实例。普通对象由语法构造器或者关键字定义类创建的对象,它能够被原型继承。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专栏学习【原文有winter的语音】,如有侵权请联系我,邮箱:ka...

    tinna 评论0 收藏0
  • 重学前端学习笔记(九)--JavaScript中对象分类

    摘要:固有对象由标准规定,随着运行时创建而自动创建的对象实例。普通对象由语法构造器或者关键字定义类创建的对象,它能够被原型继承。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专栏学习【原文有winter的语音】,如有侵权请联系我,邮箱:ka...

    dantezhao 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<