字符串反转_JavaScript


Posted in Javascript onApril 28, 2016

今天在freeCodeCamp上面刷题,碰到一题是有关于字符串反转。反转一个字符串是JavaScript中常见的面试题之一。可能面试官会给你一个字符串“Hello Word!”,让你通过JavaScript的方法,将其变成"!droW olleH"。

我也是初学者,利用前面所学数组相关的知识以及题目的提示,我算是过关了,后来想,是不是还有其他的方法能破此题呢?搜索了一下,还是有不少的方法,这里把这些方法罗列一下,以备后面可以使用。

要做的事情

我们要做的事情:

将提供的字符串反向显示在反向字符串之前,需要将字符串转化成一个数组最终结果依旧是一个字符串

接下来,我们一起看看有哪些方法能实现上述要求。

使用内置函数

在练习题中,提示我们可以使用三种方法配合,能顺利让一个字符串反向显示:

String.prototype.split()Array.prototype.reverse()Array.prototype.join()

简单的过一下:

split()方法将一个字符串对象的每个字符拆出来,并且将每个字符串当成数组的每个元素reverse()方法用来改变数组,将数组中的元素倒个序排列,第一个数组元素成为最后一个,最后一个变成第一个join()方法将数组中的所有元素边接成一个字符串

来看个实例:

function reverseString(str)
 { // 第一步,使用split()方法,返回一个新数组 
// var splitString = "hello".split(""); 
var splitString = str.split(""); 
//将字符串拆分 // 返回一个新数组["h", "e", "l", "l", "o"] 
// 第二步,使用reverse()方法创建一个新数组 
// var reverseArray = ["h", "e", "l", "l", "o"].reverse(); 
var reverseArray = splitString.reverse(); 
// 原数组元素顺序反转["o", "l", "l", "e", "h"] 
// 第三步,使用join()方法将数组的每个元素连接在一起,组合成一个新字符串 
// var joinArray = ["o", "l", "l", "e", "h"].join(""); 
var joinArray = reverseArray.join(""); // "olleh" 
// 第四步,返回一个反转的新字符串 return joinArray; 
// "olleh"}reverseString("hello"); 
// => olleh

将上面的方法简化一下,可以写成这样:

function reverseString(str) {
 return str.split("").reverse().join("");
}reverseString("hello"); 
// => olleh

使用一个递减循环遍历将字符串反转

这种方法使用的是一个for循环给原字符串做一个递减遍历,然后将遍历的字符串重新合并成一个新字符串:

function reverseString(str) { 
// 第一步:创建一个空的字符串用来存储新创建的字符串 var newString = ""; 
// 第二步:使用for循环 
// 循环从str.length-1开始做递减遍历,直到 i 大于或等于0,循环将继续
 // str.length - 1对应的就是字符串最后一个字符o for (var i = str.length - 1; i >= 0; i--) {
 newString += str[i]; // 或者 newString = newString + str[i]; } 
// 第三步:返回反转的字符串 return newString; }reverseString('hello'); 
// => // "olleh"

简单的看看字符串遍历的过程。假设需要将字符串"hello"反转。其整个遍历过程如下表所示:

迭代顺序 对应i的值 新字符串 newString 每次迭代 str.length - 1 newString + str[i] 第一次迭代 5 - 1 = 4 "" + "o" = "o" 第二次迭代 4 - 1 = 3 "o" + "l" = "ol" 第三次迭代 3 - 1 = 2 "ol" + "l" = "oll" 第四次迭代 2 - 1 = 1 "oll" + "e" = "olle" 第五次迭代 1 - 1 = 0 "olle" + "h" = "olleh"

其实上面的for循环,也可以换成while循环:

function reverseString (str) {
 var newString = '';
 var i = str.length; while (i > 0) {
 newString += str.substring(i - 1, i);
 i--; 
} 
return newString;}reverseString("hello"); 
// => olleh

while循环中substring()方法。substring() 返回字符串两个索引之间(或到字符串末尾)的子串。

使用递归实现字符串反向

使用String.prototype.substr()String.prototype.charAt()方法也可以将一个字符串反向。

substr() 方法返回字符串中从指定位置开始到指定长度的子字符串。比如:

var str = "abcdefghij";
console.log("(1,2): " + str.substr(1,2));
 // (1,2): bcconsole.log("(-3,2): " + str.substr(-3,2));
 // (-3,2): hiconsole.log("(-3): " + str.substr(-3)); 
// (-3): hijconsole.log("(1): " + str.substr(1)); 
// (1): bcdefghijconsole.log("(-20, 2): " + str.substr(-20,2)); 
// (-20, 2): abconsole.log("(20, 2): " + str.substr(20,2)); 
// (20, 2):

charAt() 方法返回字符串中指定位置的字符。字符串中的字符从左向右索引,第一个字符的索引值为 0,最后一个字符(假设该字符位于字符串 stringName 中)的索引值为 stringName.length - 1。 如果指定的 index 值超出了该范围,则返回一个空字符串。

var anyString = "Brave new world";
console.log("The character at index 0 is '" + anyString.charAt(0) + "'"); 
// =>The character at index 0 is 'B'console.log("The character at index 1 is '" + anyString.charAt(1) + "'"); 
// =>The character at index 1 is 'r'console.log("The character at index 2 is '" + anyString.charAt(2) + "'"); 
// =>The character at index 2 is 'a'console.log("The character at index 3 is '" + anyString.charAt(3) + "'"); 
// => The character at index 3 is 'v'console.log("The character at index 4 is '" + anyString.charAt(4) + "'"); 
// => The character at index 4 is 'e'console.log("The character at index 999 is '" + anyString.charAt(999) + "'"); 
// => The character at index 999 is ''

结合起来,我们可以这样做实现字符串反向:

function reverseString(str) { if (str === "") { 
return ""; } else { 
return reverseString(str.substr(1)) + str.charAt(0); }
}reverseString("hello"); 
// => olleh

第一部分的递归方法。你需要记住,你不会只调用一次,你将会有几个嵌套的调用。

每次调用str === "?" reverseString(str.subst(1)) + str.charAt(0) 第一次调用 reverseString("Hello") reverseString("ello") + "h" 第二次调用 reverseString("ello") reverseString("llo") + "e" 第三次调用 reverseString("llo") reverseString("lo") + "l" 第四次调用 reverseString("lo") reverseString("o") + "l" 第五次调用 reverseString("o") reverseString("") + "o"

第二部分的递归方法。

每次调用 返回 第五次调用 reverseString("") + "o" = "o" 第四次调用 reverseString("o") + "l" = "o" + "l" 第三次调用 reverseString("lo") + "l" = "o" + "l" + "l" 第二次调用 reverserString("llo") + "e" = "o" + "l" + "l" + "e" 第一次调用 reverserString("ello") + "h" = "o" + "l" + "l" + "e" + "h"

上面的方法还可以继续改良一下,改成三元操作符

function reverseString(str) { 
return (str === '') ? '' : reverseString(str.substr(1)) + str.charAt(0);}
reverseString("hello"); 
// => olleh

还可以换成这样的方式

function reverseString(str) { 
return str && reverseString(str.substr(1)) + str[0];
}reverseString("hello");
 // => olleh

其他方法

除了上面的方法之外,其实还有其他一些方法:

方法一

function reverseString (str) { var newString = []; for (var i = str.length - 1, j = 0; i >= 0; i--, j++) { newString[j] = str[i]; } return newString.join('');}reverseString("hello"); // => olleh
方法二
function reverseString (str) { for (var i = str.length - 1, newString = ''; i >= 0; newString += str[i--] ) { } return newString;}reverseString("hello"); // => olleh
方法三
function reverseString (str) { function rev(str, len, newString) { return (len === 0) ? newString : rev(str, --len, (newString += str[len])); } return rev(str, str.length, '');}reverseString("hello"); // =>olleh
方法四
function reverseString (str) { str = str.split(''); var len = str.length, halfIndex = Math.floor(len / 2) - 1, newString; for (var i = 0; i <= halfIndex; i++) { newString = str[len - i - 1]; str[len - i - 1] = str[i]; str[i] = newString; } return str.join('');}reverseString("hello"); // => olleh
方法五
function reverseString (str) { if (str.length < 2) { return str; } var halfIndex = Math.ceil(str.length / 2); return reverseString(str.substr(halfIndex)) + reverseString(str.substr(0, halfIndex));}reverseString("hello"); // =>olleh
方法六
function reverseString(str) { return [].reduceRight.call(str, function(prev, curr) { return prev + curr; }, '');}reverseString("hello"); // =>olleh
ES6的方法

在ES6中,可以变得更为简单一些,如:

[...str].reverse().join('');

[...str].reduceRight( (prev, curr) => prev + curr );

或者:

const reverse = str => str && reverse(str.substr(1)) + str[0];

字符串反转是一个小而简单的算法,前面也说了,常被用来面试JavaScript基础。你可以使用上面各种方法来解决这个问题,甚至使用更为复杂的解决方案。如果你有更好的方法,欢迎在下面的评论中补上,与我们一起分享。

Javascript 相关文章推荐
jQuery1.6 类型判断实现代码
Sep 01 Javascript
Javascript 按位左移运算符使用介绍(
Feb 04 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
Oct 20 Javascript
JavaScript中的console.assert()函数介绍
Dec 29 Javascript
js实现九宫格图片半透明渐显特效的方法
Feb 16 Javascript
javascript中DOM复选框选择用法实例
May 14 Javascript
JavaScript实现倒计时跳转页面功能【实用】
Dec 13 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
Dec 15 Javascript
JavaScript数组_动力节点Java学院整理
Jun 26 Javascript
使用Node.js在深度学习中做图片预处理的方法
Sep 18 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
Jul 31 Javascript
ES6 十大特性简介
Dec 09 Javascript
使用 stylelint检查CSS_StyleLint
Apr 28 #Javascript
基于BootStarp的Dailog
Apr 28 #Javascript
浅析jquery与checkbox的checked属性的问题
Apr 27 #Javascript
JavaScript 消息框效果【实现代码】
Apr 27 #Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
Apr 27 #Javascript
js实现人民币大写金额形式转换
Apr 27 #Javascript
javascript实现不同颜色Tab标签切换效果
Apr 27 #Javascript
You might like
一个从别的网站抓取信息的例子(域名查询)
2006/10/09 PHP
php判断对象是派生自哪个类的方法
2015/06/20 PHP
php检查字符串中是否有外链的方法
2015/07/29 PHP
android上传图片到PHP的过程详解
2015/08/03 PHP
php命令行(cli)模式下报require 加载路径错误的解决方法
2015/11/23 PHP
PHP中的浅复制与深复制的实例详解
2017/10/26 PHP
浅谈laravel框架sql中groupBy之后排序的问题
2019/10/17 PHP
jquery js 获取时间差、时间格式具体代码
2013/06/05 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
2015/02/25 Javascript
JavaScript中Function()函数的使用教程
2015/06/04 Javascript
jquery实现轮播图效果
2017/02/13 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
关于Stream和Buffer的相互转换详解
2017/07/26 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
2017/09/28 Javascript
angular4中关于表单的校验示例
2017/10/16 Javascript
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
记录一篇关于redux-saga的基本使用过程
2018/08/18 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
详解基于electron制作一个node压缩图片的桌面应用
2019/01/29 Javascript
jQuery事件多次绑定与解绑问题实例分析
2019/02/19 jQuery
JavaScript实现轮播图效果代码实例
2019/09/28 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
2019/11/11 Javascript
python写日志封装类实例
2015/06/28 Python
Python实现购物系统(示例讲解)
2017/09/13 Python
总结python中pass的作用
2019/02/27 Python
python3中numpy函数tile的用法详解
2019/12/04 Python
Python实现读取并写入Excel文件过程解析
2020/05/27 Python
Python csv文件记录流程代码解析
2020/07/16 Python
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
一名毕业生的自我鉴定
2013/12/04 职场文书
大学生两会学习心得体会
2014/03/10 职场文书
竞选副班长演讲稿
2014/04/24 职场文书
2019年暑期法院实习报告
2019/12/18 职场文书
分享CSS盒子模型隐藏的几种方式
2022/02/28 HTML / CSS
Windows Server 2022 超融合部署(图文教程)
2022/06/25 Servers