我也是初學者,利用前面所學數組相關的知識以及題目的提示,我算是過關了,後來想,是不是還有其他的方法能破此題呢?搜索了一下,還是有不少的方法,這裡把這些方法羅列一下,以備後面可以使用。
要做的事情
我們要做的事情:
將提供的字符串反向顯示
在反向字符串之前,需要將字符串轉化成一個數組
最終結果依舊是一個字符串
接下來,我們一起看看有哪些方法能實現上述要求。
使用內置函數
在練習題中,提示我們可以使用三種方法配合,能順利讓一個字符串反向顯示:
簡單的過一下:
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 - 1newString + 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): bc
console.log("(-3,2): " + str.substr(-3,2)); // (-3,2): hi
console.log("(-3): " + str.substr(-3)); // (-3): hij
console.log("(1): " + str.substr(1)); // (1): bcdefghij
console.log("(-20, 2): " + str.substr(-20,2)); // (-20, 2): ab
console.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基礎。你可以使用上面各種方法來解決這個問題,甚至使用更為複雜的解決方案。如果你有更好的方法,歡迎在下面的評論中補上,與我們一起分享。
原文:http://www.w3cplus.com/javascript/how-to-reverse-a-string-in-javascript-in-different-ways.html
↓戳這裡,了解野狗!