FreeCodecamp:翻转字符串(Reverse a String)

题目:
先把字符串转化成数组,再借助数组的reverse方法翻转数组顺序,最后把数组转化成字符串。
你的结果必须得是一个字符串

问题解释:这个function接收一个字符串参数,返回反转后的字符串,比如输入的是“hello”,则返回的是“olleh”。

思路:
1.先把字符串分割成为数组;
2.翻转数组;
3.再把翻转后的数组合成字符串。


要用到的方法:
String.split( )方法使用指定的分隔符字符串将一个String对象分割成子字符串数组,以一个指定的分割字串来决定每个拆分的位置。
Array.reverse( )方法将数组中元素的位置颠倒,并返回该数组。数组的第一个元素会变成最后一个,数组的最后一个元素变成第一个。该方法会改变原数组。
Array.join( )方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目,那么将返回该项目而不使用分隔符。


代码:

function reverseString(str){
    var strArr = str.split('');
    var reversedArr = strArr.reverse();
    return reversedArr.join('');
}

解释:
第一步就是把传入的 str 分割,并赋值给 strArr
第二步是把数组翻转,并赋值给 reversedArr
第三步是返回合并之后的字符
需要注意的是,以上的 .split 和 .join 都不会改变原来的字符串或数组,但 reverse 会改变原来的数组


优化后的代码:

function reverseString(str){
    return str.split('').reverse().join('');
}

解释:
.split 返回分割后的数组,因此可以直接调用 .reverse
.reverse() 方法返回的是翻转后的数组,因此可以直接调用 .join
.join 之后就是我们想要的字符串,直接返回即可
这里用到了 Method Chaining,也就是方法的链式调用。只要你熟悉方法的返回值,就可以这么做,好处在于可以不用创建这么多变量


终极解法思路提示:
1.直接利用字符串方法,而不需要转换成数组
2.获取字符串中 str 的某一个字符有两种方式,分别是 str.charAt(i) 和 str[i]。两种方式都只是读取,均不可以通过赋值修改原字符串
3.至于该用哪种,前者 (charAt) 是 ES3 标准中的,后者(中括号的写法)是 ES5 中加入的。鉴于目前不支持 ES5 的浏览器很少,因此我觉得用中括号写法是没问题的
代码:

function reverseString(str){*
    var result ="";
    for(var i = str.length -1; i >=0; i--) { *
      result += str[i];
    } 
    return result;
}

解释:
首先我们先创建一个变量,叫 result,用于保存输出结果
然后,从右边开始遍历字符串。值得注意的是,就像数组一样,字符串一样可以通过所以来获取某一个字符。比如,str[0] 就是获取第一个字符。再比如,str[-1] 就是获取最后一个字符
因为是从右边开始遍历,那我们把每次遍历到的字符直接加到 result 就可以了
需要注意的是边界条件的确定,因为字符串的索引同样是从 0 开始的,因此遍历的初始值要设置为 str.length - 1,结束值为 0


高级解法思路提示:
通过字符串方法以及递归来翻转
代码:

function reverseString(str){
    // 设置递归终点(弹出条件) 
    if(str.length ===1) {
         return str;
     }else{
     // 递归调用
     return    reverseString(str.substr(1)) + str[0];
     }
 }

解释:重要知识递归
递归涉及到两个因素,递归调用以及弹出过程。reverseString(str.substr(1)) 就是递归调用,+ str[0] 就是弹出过程
代码在执行到 reverseString(str.substr(1)) 的时候,会重新调用 reverseString,并传入 str.substr(1) 作为参数。后面的 + str[0] 暂时不会执行
直到传入的字符串长度为 1,就不会再去调用 reverseString 了,而是会执行 if 里面的部分,返回当前传入的 str。然后就会一步一步地执行之前的 + str[0],也就是弹出过程
举个例子:

var str ="abc"; 
reverseString(str)

执行过程如下:
首先执行 reverseString("abc"),这时候传入的 str 长度不为 1,所以执行 else 部分,也就是 reverseString(str.substr(1))。这就是递归调用,执行这段代码,其中 str.substr(1) 为 "bc"
reverseString("bc"),这时候传入的 str 长度依旧不为 1,所以执行 reverseString(str.substr(1)),其中 str.substr(1) 为 "c"
reverseString("c"),这时候传入的 str 长度为 1,所以执行 if 中的部分,返回传入的 str,也就是返回 "c"
回到 reverseString("bc") 这一步,此时的 str[0] 为 "b"。由于上一步的返回值是 "c",那么这一步的返回值是 "cb"
回到 reverseString("abc"),此时的 str[0] 为 "a"。由于上一步的返回值是 "cb",那么这一步的返回值是 "cba"
至此,我们得到了最终结果,"cba"


原文链接:S1ngS1ng:https://singsing.io/blog/fcc/basic-reverse-a-string/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,591评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,448评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,823评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,204评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,228评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,190评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,078评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,923评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,334评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,550评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,727评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,428评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,022评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,672评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,826评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,734评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,619评论 2 354

推荐阅读更多精彩内容

  • 原文链接:http://singsing.io/blog/2017/03/17/fcc-basic-reverse...
    S1ngS1ng阅读 571评论 0 2
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,233评论 0 4
  • 第五章******************************************************...
    fastwe阅读 678评论 0 0
  •   引用类型的值(对象)是引用类型的一个实例。   在 ECMAscript 中,引用类型是一种数据结构,用于将数...
    霜天晓阅读 1,052评论 0 1
  • 今天天气不错,在家歇个班,本来想睡个懒觉的,可是歇班跟孩子不能一起没办法睡懒觉,孩子上学我要起来做饭送儿子上学!这...
    王飞妈妈阅读 131评论 0 0