今天在freeCodeCamp上面刷題，碰到一題是有關(guān)于字符串反轉(zhuǎn)。反轉(zhuǎn)一個(gè)字符串是JavaScript中常見(jiàn)的面試題之一。可能面試官會(huì)給你一個(gè)字符串“Hello Word!”,讓你通過(guò)JavaScript的方法，將其變成"!droW olleH"。

我也是初學(xué)者，利用前面所學(xué)數(shù)組相關(guān)的知識(shí)以及題目的提示,我算是過(guò)關(guān)了，后來(lái)想，是不是還有其他的方法能破此題呢？搜索了一下，還是有不少的方法，這里把這些方法羅列一下，以備后面可以使用。

要做的事情

我們要做的事情：

將提供的字符串反向顯示在反向字符串之前，需要將字符串轉(zhuǎn)化成一個(gè)數(shù)組最終結(jié)果依舊是一個(gè)字符串

接下來(lái)，我們一起看看有哪些方法能實(shí)現(xiàn)上述要求。

使用內(nèi)置函數(shù)

在練習(xí)題中，提示我們可以使用三種方法配合，能順利讓一個(gè)字符串反向顯示：

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

簡(jiǎn)單的過(guò)一下：

split()方法將一個(gè)字符串對(duì)象的每個(gè)字符拆出來(lái)，并且將每個(gè)字符串當(dāng)成數(shù)組的每個(gè)元素reverse()方法用來(lái)改變數(shù)組，將數(shù)組中的元素倒個(gè)序排列，第一個(gè)數(shù)組元素成為最后一個(gè)，最后一個(gè)變成第一個(gè)join()方法將數(shù)組中的所有元素邊接成一個(gè)字符串

來(lái)看個(gè)實(shí)例：

function reverseString(str)
 { // 第一步，使用split()方法，返回一個(gè)新數(shù)組 
// var splitString = "hello".split(""); 
var splitString = str.split(""); 
//將字符串拆分 // 返回一個(gè)新數(shù)組["h", "e", "l", "l", "o"] 
// 第二步，使用reverse()方法創(chuàng)建一個(gè)新數(shù)組 
// var reverseArray = ["h", "e", "l", "l", "o"].reverse(); 
var reverseArray = splitString.reverse(); 
// 原數(shù)組元素順序反轉(zhuǎn)["o", "l", "l", "e", "h"] 
// 第三步，使用join()方法將數(shù)組的每個(gè)元素連接在一起，組合成一個(gè)新字符串 
// var joinArray = ["o", "l", "l", "e", "h"].join(""); 
var joinArray = reverseArray.join(""); // "olleh" 
// 第四步，返回一個(gè)反轉(zhuǎn)的新字符串 return joinArray; 
// "olleh"}reverseString("hello"); 
// => olleh

將上面的方法簡(jiǎn)化一下，可以寫(xiě)成這樣：

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

使用一個(gè)遞減循環(huán)遍歷將字符串反轉(zhuǎn)

這種方法使用的是一個(gè)for循環(huán)給原字符串做一個(gè)遞減遍歷，然后將遍歷的字符串重新合并成一個(gè)新字符串：

function reverseString(str) { 
// 第一步：創(chuàng)建一個(gè)空的字符串用來(lái)存儲(chǔ)新創(chuàng)建的字符串 var newString = ""; 
// 第二步：使用for循環(huán) 
// 循環(huán)從str.length-1開(kāi)始做遞減遍歷,直到 i 大于或等于0，循環(huán)將繼續(xù)
 // str.length - 1對(duì)應(yīng)的就是字符串最后一個(gè)字符o for (var i = str.length - 1; i >= 0; i--) {
 newString += str[i]; // 或者 newString = newString + str[i]; } 
// 第三步：返回反轉(zhuǎn)的字符串 return newString; }reverseString('hello'); 
// => // "olleh"

簡(jiǎn)單的看看字符串遍歷的過(guò)程。假設(shè)需要將字符串"hello"反轉(zhuǎn)。其整個(gè)遍歷過(guò)程如下表所示：

迭代順序 對(duì)應(yīng)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"

其實(shí)上面的for循環(huán)，也可以換成while循環(huán)：

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循環(huán)中substring()方法。substring() 返回字符串兩個(gè)索引之間（或到字符串末尾）的子串。

使用遞歸實(shí)現(xiàn)字符串反向

使用String.prototype.substr()和String.prototype.charAt()方法也可以將一個(gè)字符串反向。

substr() 方法返回字符串中從指定位置開(kāi)始到指定長(zhǎng)度的子字符串。比如：

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() 方法返回字符串中指定位置的字符。字符串中的字符從左向右索引，第一個(gè)字符的索引值為 0，最后一個(gè)字符（假設(shè)該字符位于字符串 stringName 中）的索引值為 stringName.length - 1。 如果指定的 index 值超出了該范圍，則返回一個(gè)空字符串。

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 ''

結(jié)合起來(lái)，我們可以這樣做實(shí)現(xiàn)字符串反向：

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

第一部分的遞歸方法。你需要記住，你不會(huì)只調(diào)用一次，你將會(huì)有幾個(gè)嵌套的調(diào)用。

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

第二部分的遞歸方法。

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

上面的方法還可以繼續(xù)改良一下，改成三元操作符

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

其他方法

除了上面的方法之外，其實(shí)還有其他一些方法：

方法一

在ES6中，可以變得更為簡(jiǎn)單一些，如：

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

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

或者：

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

字符串反轉(zhuǎn)是一個(gè)小而簡(jiǎn)單的算法，前面也說(shuō)了，常被用來(lái)面試JavaScript基礎(chǔ)。你可以使用上面各種方法來(lái)解決這個(gè)問(wèn)題，甚至使用更為復(fù)雜的解決方案。如果你有更好的方法，歡迎在下面的評(píng)論中補(bǔ)上，與我們一起分享。

最新評(píng)論