今天在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 olleh
方法五复制代码 代码如下:
function reversestring (str) { if (str.length 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基础。你可以使用上面各种方法来解决这个问题,甚至使用更为复杂的解决方案。如果你有更好的方法,欢迎在下面的评论中补上,与我们一起分享。