JavaScript 中的 `for...of` 循環語句用于迭代可迭代對象(如數組、字符串、Set、Map 等)中的元素。它的基本語法如下：

for (variable of iterable) {
// 循環體代碼
}

 　　下面是 `for...of` 循環的步驟簡述：

　　1. 定義一個變量，用于存儲每個迭代的元素。這個變量可以是一個新變量，也可以是一個已經存在的變量。

　　2. 使用 `of` 關鍵字將變量與要迭代的可迭代對象關聯起來。可迭代對象可以是數組、字符串、Set、Map 等。

　　3. 在循環體中，可以使用定義的變量訪問每個迭代的元素。循環會迭代可迭代對象中的每個元素，并執行循環體內的代碼。

　　4. 在每次迭代時，變量會自動更新為可迭代對象中的下一個元素，直到遍歷完所有元素為止。

　　示例：

let arr = [1, 2, 3];
for (let element of arr) {
console.log(element);
}

 　　在上面的示例中，`for...of` 循環迭代了數組 `arr` 中的每個元素，并將每個元素打印出來。

　　需要注意的是，`for...of` 循環只能用于迭代可迭代對象，并且只能訪問對象的元素值，而不能訪問索引或其他屬性。

　　如果想要獲取數組或類數組對象的索引，可以結合使用 `for...of` 循環和 `entries()` 方法或使用 `for` 循環和索引來實現。

let arr = [1, 2, 3];
// 使用 for...of 循環和 entries() 方法獲取索引和元素值
for (let [index, element] of arr.entries()) {
console.log(index + ": " + element);
}
// 使用 for 循環和索引獲取元素值和索引
for (let i = 0; i < arr.length; i++) {
console.log(i + ": " + arr[i]);
}

 　　總結一下，`for...of` 循環用于迭代可迭代對象中的元素。通過定義一個變量，并將其與可迭代對象關聯，可以在循環體中訪問對象的元素值。需要注意的是，`for...of` 循環只能訪問元素值，而不能訪問索引或其他屬性。如果需要訪問索引，可以結合使用 `entries()` 方法或使用普通 `for` 循環來實現。