字符串反轉(zhuǎn)_JavaScript
今天在freeCodeCamp上面刷題,碰到一題是有關(guān)于字符串反轉(zhuǎn)。反轉(zhuǎn)一個(gè)字符串是JavaScript中常見的面試題之一??赡苊嬖嚬贂o你一個(gè)字符串“Hello Word!”,讓你通過JavaScript的方法,將其變成"!droW olleH"。
我也是初學(xué)者,利用前面所學(xué)數(shù)組相關(guān)的知識以及題目的提示,我算是過關(guān)了,后來想,是不是還有其他的方法能破此題呢?搜索了一下,還是有不少的方法,這里把這些方法羅列一下,以備后面可以使用。
要做的事情
我們要做的事情:
將提供的字符串反向顯示在反向字符串之前,需要將字符串轉(zhuǎn)化成一個(gè)數(shù)組最終結(jié)果依舊是一個(gè)字符串
接下來,我們一起看看有哪些方法能實(shí)現(xiàn)上述要求。
使用內(nèi)置函數(shù)
在練習(xí)題中,提示我們可以使用三種方法配合,能順利讓一個(gè)字符串反向顯示:
String.prototype.split()Array.prototype.reverse()Array.prototype.join()
簡單的過一下:
split()方法將一個(gè)字符串對象的每個(gè)字符拆出來,并且將每個(gè)字符串當(dāng)成數(shù)組的每個(gè)元素reverse()方法用來改變數(shù)組,將數(shù)組中的元素倒個(gè)序排列,第一個(gè)數(shù)組元素成為最后一個(gè),最后一個(gè)變成第一個(gè)join()方法將數(shù)組中的所有元素邊接成一個(gè)字符串
來看個(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
將上面的方法簡化一下,可以寫成這樣:
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è)空的字符串用來存儲新創(chuàng)建的字符串 var newString = "";
// 第二步:使用for循環(huán)
// 循環(huán)從str.length-1開始做遞減遍歷,直到 i 大于或等于0,循環(huán)將繼續(xù)
// str.length - 1對應(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"
簡單的看看字符串遍歷的過程。假設(shè)需要將字符串"hello"反轉(zhuǎn)。其整個(gè)遍歷過程如下表所示:
i的值
其實(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() 方法返回字符串中從指定位置開始到指定長度的子字符串。比如:
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é)合起來,我們可以這樣做實(shí)現(xiàn)字符串反向:
function reverseString(str) { if (str === "") {
return ""; } else {
return reverseString(str.substr(1)) + str.charAt(0); }
}reverseString("hello");
// => olleh
第一部分的遞歸方法。你需要記住,你不會只調(diào)用一次,你將會有幾個(gè)嵌套的調(diào)用。
第二部分的遞歸方法。
上面的方法還可以繼續(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í)還有其他一些方法:
方法一
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"); // => ollehfunction reverseString (str) { for (var i = str.length - 1, newString = ''; i >= 0; newString += str[i--] ) { } return newString;}reverseString("hello"); // => ollehfunction reverseString (str) { function rev(str, len, newString) { return (len === 0) ? newString : rev(str, --len, (newString += str[len])); } return rev(str, str.length, '');}reverseString("hello"); // =>ollehfunction 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"); // => ollehfunction 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"); // =>ollehfunction reverseString(str) { return [].reduceRight.call(str, function(prev, curr) { return prev + curr; }, '');}reverseString("hello"); // =>olleh在ES6中,可以變得更為簡單一些,如:
[...str].reverse().join('');
或[...str].reduceRight( (prev, curr) => prev + curr );
或者:
const reverse = str => str && reverse(str.substr(1)) + str[0];
字符串反轉(zhuǎn)是一個(gè)小而簡單的算法,前面也說了,常被用來面試JavaScript基礎(chǔ)。你可以使用上面各種方法來解決這個(gè)問題,甚至使用更為復(fù)雜的解決方案。如果你有更好的方法,歡迎在下面的評論中補(bǔ)上,與我們一起分享。
相關(guān)文章
javascript實(shí)現(xiàn)簡單下拉菜單效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)簡單下拉菜單效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一2022-08-08
使用JavaScript實(shí)現(xiàn)構(gòu)建一個(gè)動態(tài)數(shù)據(jù)可視化儀表板
現(xiàn)代Web開發(fā)中,JavaScript不僅是網(wǎng)頁交互的核心,而且已經(jīng)成為實(shí)現(xiàn)復(fù)雜前端功能的重要工具,本文將展示如何使用JavaScript構(gòu)建一個(gè)動態(tài)數(shù)據(jù)可視化儀表板,需要的可以參考下2024-02-02
echarts實(shí)現(xiàn)3d柱狀圖的2種方式舉例
echarts3D效果柱狀圖的實(shí)現(xiàn),這個(gè)太難了,我花了兩天終于調(diào)成我想要的效果啦,要是官網(wǎng)上有例子就好了,太難調(diào)了,下面這篇文章主要給大家介紹了關(guān)于echarts實(shí)現(xiàn)3d柱狀圖的2種方式,需要的朋友可以參考下2023-02-02
JS中ESModule和commonjs介紹及使用區(qū)別
這篇文章主要介紹了JS中ESModule和commonjs介紹及使用區(qū)別,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的朋友可以參考一下2022-07-07

