Js中for in 和for of的区别

Js中for in 和for of的区别

for in的使用

• fon in 应用于数组中

    Array.prototype.sayHello = function () {
      console.log("我是数组原型的方法");
    };
    Array.prototype.str = "我是数组原型的字符串";

    //定义一个数组
    var arr = [1, 2, 3, 4];
    console.log(arr); //当前打印的没有原型上的属性和方法 [1, 2, 3, 4]

    //使用for in循环
    for (let index in arr) {
      console.log(index);
    }
    //输出结果为 0,1,2,3,4,name,str,sayHello

• for in 应用于对象中

Object.prototype.sayHello = function () {
      console.log("Hello");
    };
    Object.prototype.str = "World";
    var myObject = { name: "zhangsan", age: 100 };
    console.log(myObject); //输出 { name: "zhangsan", age: 100 };
    //使用for in循环对象
    for (let index in myObject) {
      console.log(index);
    }
    //输出结果 首先输出的是对象的属性名，再是对象原型中的属性和方法，  name,age,str,sayHello
    //如果不想让其输出原型中的属性和方法，可以使用hasOwnProperty方法进行过滤
    for (let index in myObject) {
      if (myObject.hasOwnProperty(index)) {
        console.log(index);
      }
    }
    //输出结果为name,age

    //你也可以用Object.keys()方法获取所有的自身可枚举属性组成的数组。
    console.log("Object.keys(myObject)", Object.keys(myObject)); //["name", "age"]

结论：
1.for in 应用于数组循环时：返回的是数组的下标和数组的属性和原型上的方法和属性
2.for in 应用于对象时：循环返回的是对象的属性名和原型中的方法和属性。

for of的使用

• fon of 应用于数组中

    //for of 应用在数组中
    Array.prototype.sayHello = function () {
      console.log("我是数组原型的方法");
    };
    Array.prototype.str = "我是数组原型的字符串";

    //定义一个数组
    var arr2 = [10, 20, 30, 40];
    console.log(arr2); //当前打印的没有原型上的属性和方法 [10, 20, 30, 40]

    //使用for of循环
    for (let index of arr2) {
      console.log("arr2--", index);
    }
    //输出结果为 10,20,30,40 遍历的是数组元素值,没有原型上的属性和方法

• fon of 应用于数组中

    Object.prototype.sayHello2 = function () {
      console.log("Hello");
    };
    var myObject2 = {
      name: "zhangsan",
      age: 10,
    };

    for (let key of myObject2) {
      consoloe.log(key);
    }
    //报错Uncaught TypeError

结论：
1.for of 应用于数组循环时： 遍历的是数组元素值,没有原型上的属性和方法

for in 和for of的区别

for in遍历的是数组的索引（即键名），而for of遍历的是数组元素值。 所以for in更适合遍历对象，不要使用for in遍历数组。