JS字符串遍歷詳解

一、for循環遍歷字符串

let str = 'hello world';
for(let i=0; i<str.length; i++){
    console.log(str[i])
}

for循環是最常用的遍歷字符串的方法，通過控制變量i的值，可以依次訪問到字符串的每一個字符。需要注意的是，在JavaScript中，字符串是以UTF-16編碼方式存儲的，因此一個字符可能佔據1個或2個字節，所以字符串長度並不等於字符個數，可以通過字符串對象的.length屬性獲取實際長度。

for循環可以拆成兩個部分，即初始化部分和循環條件部分。這裡的初始化部分為let i=0，即將計數器i初始化為0；循環條件部分為i<str.length，即當i小於字符串長度時執行循環語句；每次循環完畢後，都會將計數器i+1。

需要注意的是，在字符串中，每個字符都是以0開始編號的，因此循環條件部分要用小於號<而不是小於等於號<=。如果使用錯誤的循環條件，會導致越界或產生不必要的錯誤結果。

二、for…in遍歷字符串

let str = 'hello world';
for(let i in str){
    console.log(str[i])
}

for…in語句可以遍歷對象的屬性，對於字符串來說，它會將字符串視為一個字符數組，依次遍歷每個字符。與for循環不同，for…in會遍歷所有可枚舉屬性，包括字符串對象的原型中的屬性，所以需要使用hasOwnProperty()方法判斷是否為自身屬性。

需要注意的是，在使用for…in遍歷字符串時，獲取到的每個字符都是一個字符串類型，需要通過調用charAt()方法或直接將索引值轉換為數字類型來獲得實際字符。

三、for…of遍歷字符串

let str = 'hello world';
for(let value of str){
    console.log(value)
}

for…of語句是ES6新增的遍歷方法，可以直接遍歷字符串的值而不是索引。與for…in遍歷對象的屬性類似，for…of也會遍歷所有可迭代的對象，包括數組、Set、Map等。

for…of與傳統的for循環和for…in遍歷最大的不同點就在於它處理的不是索引，而是元素本身，因此遍歷結果與原始數據結構保持一致。

四、forEach遍歷字符串

let str = 'hello world';
Array.prototype.forEach.call(str, function(value){
    console.log(value)
})

forEach是Array原型對象上的方法，可以遍曆數組中的每個元素，但對於字符串並沒有直接提供forEach方法。因此，可以藉助Array.prototype.call()方法來將字符串強制轉換為數組，並調用數組的forEach()方法執行遍歷操作。

需要注意的是，在使用forEach遍歷字符串時，需要將字符串強制轉換成字符數組，這會產生額外的開銷。另外，forEach方法是一個高階函數，它接收一個回調函數作為參數，因此需要傳入一個匿名函數來實現遍歷字符串的操作。

五、map遍歷字符串

let str = 'hello world';
Array.prototype.map.call(str, function(value){
    console.log(value)
})

與forEach類似，map也是Array原型對象上的方法，用來遍曆數組並對每個元素執行操作，並將結果存放在一個新數組中。對於字符串並沒有提供map方法，因此需要藉助Array.prototype.call()方法將字符串轉換到數組上進行操作。

需要注意的是，在使用map對字符串進行遍歷時，需要將返回值存放在一個新數組中，否則遍歷結果會被覆蓋。另外，由於map方法返回的是一個新數組，因此在遍歷進行完畢後，需要手動輸出結果。