字串反轉_JavaScript_javascript技巧

今天在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 e7d14904c445a13317a23b914ea9bb6e olleh

方法四方法四

方法四function reverseString (str) { if (str.length bf99f195f86672ba8e44bc05d4cbb8e0olleh

方法四複製程式碼

程式碼如下:function reverseString(str) { return [].reduceRight.call(str, function(prev, curr) { return prev + curr; }, '');}reverseString("hello"); // =>olleh

方法五

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

複製程式碼五

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

複製碼>

程式碼如下:

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

方法六

複製程式碼複製程式碼 程式碼如下🎜> ES6的方法 在ES6中，可以變得更為簡單一些，如： 或 或： 字串反轉是一個小而簡單的演算法，前面也說了，常用來面試JavaScript基礎。你可以使用上面各種方法來解決這個問題，甚至使用更複雜的解決方案。如果你有更好的方法，歡迎在下面的評論中補上，與我們一起分享。