js補充
術語解釋
循環(loop)：最基礎的概念, 所有重復的行為。
遞歸(recursion)： 在函數內調用自身, 將復雜情況逐步轉化成基本情況。
(數學)迭代(iterate) ：在多次循環中逐步接近結果。
(編程)迭代(iterate) ：按順序訪問線性結構中的每一項。
遍歷(traversal) ：按規則訪問非線性結構中的每一項。
for...in 循環【ES5】
for...in 語句迭代一個對象的所有可枚舉字符串屬性（除 Symbol 以外），包括繼承的可枚舉屬性。
語法：
for (variable in object){
...?
}
參數：
variable：在每次迭代時接收一個字符串屬性名。它可以通過使用 const、let 或 var 進行聲明，也可以是一個賦值目標（例如，先前聲明的變量、對象屬性或解構模式）。使用 var 聲明的變量不會局限于循環內部，即它們與 for...in 循環所在的作用域相同。
object：被迭代非符號可枚舉屬性的對象。
for of 循環【ES6】
for...of 語句執行一個循環，該循環處理來自可迭代對象的值序列。可迭代對象包括內置對象的實例，例如 Array、String、TypedArray、Map、Set、NodeList（以及其他 DOM 集合），還包括 arguments 對象、由生成器函數生成的生成器，以及用戶定義的可迭代對象。
語法：
for (variable of iterable){
...
}
參數：
variable:每次迭代時從序列接收一個值。可以是用 const、let 或 var 聲明的變量，也可以是賦值目標（例如之前聲明的變量、對象屬性或解構模式）。使用 var 聲明的變量不會局限于循環內部，即它們與 for...of 循環所在的作用域相同。
iterable:可迭代對象。循環操作的序列值的來源。
for...of 與 for...in 之間的區別
for...in 和 for...of 語句都用于迭代某個內容，它們之間的主要區別在于迭代的對象。for...in 語句用于迭代對象的可枚舉字符串屬性，而 for...of 語句用于迭代可迭代對象定義的要進行迭代的值。
舉例：
Object.prototype.objCustom = function () { };Array.prototype.arrCustom = function () { };const iterable = [3, 5, 7];iterable.foo = "hello";for (const i in iterable) {console.log(i);}// "0"、"1"、"2"、"foo"、"arrCustom"、"objCustom"for (const i in iterable) {if (Object.hasOwn(iterable, i)) {console.log(i);}}// "0" "1" "2" "foo"for (const i of iterable) {console.log(i);}// 3 5 7分析：
1、iterable?對象繼承了?objCustom?和?arrCustom?屬性，因為其原型鏈中同時包含了?Object.prototype?和?Array.prototype。
2、for...in?循環僅打印了?iterable?對象的可枚舉屬性。它不會打印數組中的元素?3、5、7?或?"hello"，因為它們不是屬性，而是值。它打印了數組的索以及?arrCustom?和?objCustom，它們是實際的屬性。
3、第二個循環與第一個循環類似，但它使用?Object.hasOwn()?來檢查找到的可枚舉屬性是否為對象的自有屬性，即非繼承屬性。如果是，則打印該屬性。屬性?0、1、2?和?foo?被打印，因為它們是自有屬性。屬性?arrCustom?和?objCustom?沒有被打印，因為它們是繼承屬性。
4、for...of?循環迭代并打印?iterable?按照數組（數組是可迭代的）定義要進行迭代的值。對象的元素?3、5、7?被打印，但對象的屬性沒有被打印。
Vue.js 循環語句用法：列表渲染
在 Vue 中，循環語句主要通過 v-for 指令來實現，用于遍歷數組或對象，生成對應數量的元素。在元素上使用 v-for 指令，根據源數據的數組或對象進行循環渲染元素。
遍歷數組：
v-for="(item, index) in items"?:key="..."? ?
可選值：index
遍歷對象：
v-for="(value, key, index) in object"?:key="..."??
可選值：key、index
可遍歷：數組、對象、字符串(用的很少)、指定次數(用的很少)。
key 的作用: 使用 v-for 渲染列表時，必須為每個項提供一個唯一的 key 屬性，以便 Vue 能夠識別每個項的唯一性，從而進行高效的 DOM 更新。
?嵌套循環: 可以嵌套使用多個 v-for 來渲染多維數組或對象結構。
補充：v-for 中的 in 和 of 是遍歷數據時的兩個常用關鍵字，它們的主要區別在于：in 更通用，可以遍歷數組、對象和整數范圍；而 of 專注于遍歷可迭代對象（如數組、字符串、Set、Map 等）。
舉例：
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><title>Vue.js循環語句用法：列表渲染</title><script type="text/javascript" src="../js/vue.js"></script>
</head><body><div id="root"><h2 style="color:chocolate;">Vue.js循環語句用法：列表渲染</h2><!-- 遍歷對象數組 --><h3>遍歷人員列表</h3><ul><li v-for="p in persons" :key="p.id">{{p.id}}--{{p.name}}-{{p.age}}</li></ul><!-- 遍歷對象 --><h3>遍歷汽車信息</h3><ul><li v-for="(value,key,index) in car" :key="key">{{index}}--{{key}}--{{value}}</li></ul><!-- 遍歷字符串(用的很少) --><h3>遍歷字符串(用的很少)</h3><ul><li v-for="(char,index) in str" :key="index">{{index}}--{{char}}</li></ul><!-- 遍歷指定次數(用的很少) --><h3>遍歷指定次數(用的很少)</h3><ul><!-- 遍歷5次 --><li v-for="(number,index) in 5" :key="index">{{index}}--{{number}}</li></ul></div><script>new Vue({el: '#root',data: {persons: [{ id: '001', name: '張三', age: 21 },{ id: '002', name: '李四', age: 22 },{ id: '003', name: '王五', age: 23 }],car: {name: '奧迪A8',price: '70萬',color: '藍色'},str: 'hello'}})</script>
</body></html>
動態監控系統監控網絡狀態)
![[CSS3]響應式布局](http://pic.xiahunao.cn/[CSS3]響應式布局)
)
