字符串反转_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 相关文章推荐
Javascript模板技术
Apr 27 Javascript
初识javascript 文档碎片
Jul 13 Javascript
js动态在form上插入enctype=multipart/form-data的问题
May 24 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
Sep 01 Javascript
浅谈String.valueOf()方法的使用
Jun 06 Javascript
AngularJS中$watch和$timeout的使用示例
Sep 20 Javascript
JS实现仿PS的调色板效果完整实例
Dec 21 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
Jan 19 Javascript
详解JavaScript中的六种错误类型
Sep 21 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
浅谈vue中组件绑定事件时是否加.native
Nov 09 Javascript
uni-app 自定义底部导航栏的实现
Dec 11 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
ecshop添加菜单及权限分配问题
2017/11/21 PHP
JavaScript 应用技巧集合[推荐]
2009/08/30 Javascript
js类的静态属性和实例属性的理解
2009/10/01 Javascript
jquery下将选择的checkbox的id组成字符串的方法
2010/11/28 Javascript
让AJAX不依赖后端接口实现方案
2012/12/03 Javascript
json中换行符的处理方法示例介绍
2014/06/10 Javascript
AngularJS学习笔记之基本指令(init、repeat)
2015/06/16 Javascript
jQuery实现美观的多级动画效果菜单代码
2015/09/06 Javascript
浅析Javascript ES6新增值比较函数Object.is
2016/08/24 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
2019/08/20 Javascript
解决layui 三级联动下拉框更新时回显的问题
2019/09/03 Javascript
[03:40]DOTA2抗疫特别篇《英雄年代》
2020/02/28 DOTA
[01:14]2019完美世界城市挑战赛(秋季赛)全国总决赛精彩花絮
2020/01/08 DOTA
[02:36]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma 选手采访
2021/03/11 DOTA
Python中操作mysql的pymysql模块详解
2016/09/13 Python
python中安装Scrapy模块依赖包汇总
2017/07/02 Python
Python微信企业号开发之回调模式接收微信端客户端发送消息及被动返回消息示例
2017/08/21 Python
Python 实现取矩阵的部分列,保存为一个新的矩阵方法
2018/11/14 Python
使用Pyhton集合set()实现成果查漏的例子
2019/11/24 Python
python、PyTorch图像读取与numpy转换实例
2020/01/13 Python
使用python-Jenkins批量创建及修改jobs操作
2020/05/12 Python
Python如何读取、写入CSV数据
2020/07/28 Python
深入分析python 排序
2020/08/24 Python
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
2014/04/10 HTML / CSS
使用html2canvas实现浏览器截图的示例代码
2018/01/26 HTML / CSS
Linden Leaves官网:新西兰纯净护肤品
2020/12/20 全球购物
大学生军训自我鉴定
2014/02/12 职场文书
《藤野先生》教学反思
2014/02/19 职场文书
党员创先争优承诺书
2014/03/26 职场文书
物理系毕业生自荐书
2014/06/13 职场文书
初中生旷课检讨书范文
2014/10/06 职场文书
政协工作总结2015
2015/05/20 职场文书
交通事故代理词范文
2015/05/23 职场文书
详解nginx进程锁的实现
2021/06/14 Servers
MySQL 外连接语法之 OUTER JOIN
2022/04/09 MySQL