js 基礎 for in 和 for of的區別詳解

const obj = {
        a: 1,
        b: 2,
        c: 3
    }
    for (let i in obj) {
        console.log(i)
        // a
        // b
        // c
    }
    for (let i of obj) {
        console.log(i)
        // Uncaught TypeError: obj is not iterable 報錯了
    }

以上程式碼通過 for in 和 for of 對一個obj物件進行遍歷,for in 正常的獲取了物件的 key值,分別列印 a、b、c,而 for of卻報錯了。

for~in語句用於遍歷物件，而for~of語句用於遍歷陣列，但這不是必須的，只是這樣操作比較方便。

1.遍歷陣列

For-in迴圈

    var arr=[1,2,3,4,5,6,7] //申明一個數組
    for(var x in arr){
        document.write("arr["+x+"]="+arr[x] + " "); //x為陣列的下標
    }

For-of迴圈

    var arr=[1,2,3,4,5,6,7] //申明一個數組
    for(var value of arr){
        document.write(value + " ");//value為陣列的元素，比For-in訪問陣列操作簡單
    }

2.遍歷物件

For-in迴圈

var obj={name:'lilin',age:24,sex:'man'} //申明一個物件
for(var x in obj){
   document.write(x+"="+obj[x] + " ");//x為物件屬性名，obj[x]為該屬性的值
}

For-of迴圈

var obj={name:'lilin',age:24,sex:'man'} //申明一個物件
for(var x of Object.keys(obj)){
    document.write(x+"="+obj[x]+" ");//x為物件屬性名，obj[x]為該屬性的值
}

注意：for~in和for~of遍歷物件時，實質是遍歷物件的陣列形式，所以訪問物件的屬性值時，必須使用“物件名[屬性名]”的格式。

<script src="js/jquery-1.11.0.min.js"></script>
        <script type="text/javascript">
            var obj = {
                name: 'lilin',
                age: 24,
                sex: 'man'
            } //申明一個物件
            for(var x of Object.keys(obj)) {
                document.write(x + "=" + obj[x] + ","); //x為物件屬性名，obj[x]為該屬性的值
                console.log(x + "=", obj[x]);
            }
        </script>

result：name=lilin,age=24,sex=man,

一句話概括：for in是遍歷（object）鍵名，for of是遍歷（array）鍵值。

for...in

for...in 迴圈只遍歷可列舉屬性（包括它的原型鏈上的可列舉屬性）。像 Array和Object使用內建建構函式所建立的物件都會繼承自Object.prototype和String.prototype的不可列舉屬性，例如 String 的 indexOf() 方法或 Object的toString()方法。迴圈將遍歷物件本身的所有可列舉屬性，以及物件從其建構函式原型中繼承的屬性（更接近原型鏈中物件的屬性覆蓋原型屬性）。

var obj = {a:1, b:2, c:3};
    
for (let key in obj) {
  console.log(key);
}
 
// a
// b
// c

for...of

for...of語句在可迭代物件（包括Array，Map，Set，String，TypedArray，arguments 物件等等）上建立一個迭代迴圈，呼叫自定義迭代鉤子，併為每個不同屬性的值執行語句

    const array1 = ['a', 'b', 'c'];
     
    for (const val of array1) {
      console.log(val);
    }
     
    // a
    // b
    // c

for of不可以遍歷普通物件，想要遍歷物件的屬性，可以用for in迴圈, 或內建的Object.keys()方法

Object.prototype.objCustom = function() {}; 
Array.prototype.arrCustom = function() {};
 
let iterable = [3, 5, 7];
iterable.foo = 'hello';
 
for (let i in iterable) {
  console.log(i); // 0, 1, 2, "foo", "arrCustom", "objCustom"
}
 
for (let i in iterable) {
  if (iterable.hasOwnProperty(i)) {
    console.log(i); // 0, 1, 2, "foo"
  }
}
 
for (let i of iterable) {
  console.log(i); // logs 3, 5, 7
}

2021-06-16 10:08:27