深入理解javascript for of 副本

當我們需要遍歷數組或對象時，javascript提供多種方式來實現，其中for of是一種強大的遍歷方式。在本文中，我們將深入理解javascript for of 副本，并且結合常見的場景和應用，進行詳細說明。

for of 循環語句的語法如下：

for (variable of iterable) {
//statements
}

上述的代碼中，variable 是要被別名的數組元素、對象屬性或其他可迭代對象的變量。另外，iterable 是JavaScript 迭代的可迭代對象，例如，數組、字符串、set 或 map。

接下來，我們看看for of 的具體用法，同樣通過舉例來闡述，看看for of是如何簡化代碼的重構。

用for of 循環來遍歷數組

我們可以使用for of 遍歷以下幾類數組：

const arr = [1,2,3,4,5];
for (let val of arr) {
console.log(val);
} 
//輸出：
//1
//2
//3
//4
//5

對數組元素進行操作時，我們通常會使用forEach語句，但是使用for of能讓你更直接地表達你的意圖，這是for of的另一個好處。

arr.forEach((value) =>{
console.log(value);
});
//輸出：
//1
//2
//3
//4
//5

從上述的代碼中可以看出，for of 語句的可讀性是非常高的。同時，for of語句可以中斷，這意味著遍歷的操作可以在任何時候結束。

使用for of遍歷一個對象的屬性

我們接下來看看如何使用for of遍歷一個對象的屬性。這里我們需要注意，當我們使用for of 遍歷對象時，我們得到的是屬性名稱，而不是屬性的值。這意味著，我們必須使用對象的屬性名稱來訪問屬性值。

const testObject = { "a":1, "b":2, "c":3};
for (let property in testObject) {
console.log(property + " = " + testObject[property]);
}
// 輸出：
// a = 1
// b = 2
// c = 3

從上述的代碼中可以看出，for in語句和for of語句的有所不同，for in語句是用于遍歷對象的屬性名稱，而不是屬性值。 如果我們想遍歷對象的屬性名稱和屬性值，我們需要使用for in語句和object.keys()。

const testObject = { "a":1, "b":2, "c":3};
for (let property of Object.keys(testObject)) {
console.log(property + " = " + testObject[property]);
}
// 輸出：
// a = 1
// b = 2
// c = 3

可以看出使用for of 遍歷對象屬性的操作比for in 要更加簡單，同時還可以避免for in中出現的無序情況。

使用for of遍歷字符串

我們可以對字符串使用for of語句遍歷。在使用for of遍歷字符串時，我們得到的是一個字符。

const testString = "JavaScript";
for (let char of testString) {
console.log(char);
}
// 輸出：
// J
// a
// v
// a
// S
// c
// r
// i
// p
// t

使用for of遍歷字符串的功能具有可讀性，而且可以更好地表達我們的意圖。同時，for of 語句還是一種變通的方式，允許我們快速地找到一些字符或子字符串。

總結

本文深入闡述了javascript for of語句豐富的功能和高效的可讀性，無論是對于數組、對象還是字符串，都可以通過for of 來變省更好地表述。

要使用for of語句時，您可以采用以下規則：

• 在遍歷對象時, 通過object.keys() 與for of結合使用更佳;
• 在使用for of遍歷可迭代對象中, 不要修改迭代的順序和內容;
• 使用for of遍歷是一種更高效地表達意圖的方法，通常使用forEach語句為遍歷數組;
• for of 語句可以使用break 或continue 中斷循環;

請您在日常編程時，盡可能多地使用for of語句來遍歷對象，在日常的編程經驗中掌握for of 的使用是必須的。