for..…of和for..…in的区别

for…of和for…in的区别

    // for...of
    for (const iterator of object) {
      
    }
    // for...in
    for (const key in object) {
      if (Object.hasOwnProperty.call(object, key)) {
        const element = object[key];
        
      }
    }

for…in适合遍历对象(因为能够直接输出对象的值)，并且for…in遍历数组输出的是数组的索引，对象的属性，以及原型链上的属性，for…of适合遍历数组(因为能够直接输出数组的值)。

1、循环数组

for…of和for…in都可以用来遍历数组，但是for…of输出的是数组的下标index, for…in输出的是数组的值

    let fruits = ['apple', 'banana', 'orange'];
    // for...of
    for (const item of fruits) {
      console.log(item);
    }
    // for...in
    for (const item in fruits) {
      console.log(item);
    }

2、循环对象

for…in可以用来遍历对象的值，但是如果用for…of来遍历对象的话，就会报错。

    let user = {
      name: 'xiaoming',
      age: '18',
      sex: 'male'
    }
    // for...of
    // for (const code of user) {
    //   console.log(code);
    // }
    // for...in
    for (const code in user) {
      // console.log(key);
      console.log(user[code]);
    }

3、遍历数组对象

在面对遍历数组对象的时候可以用for…of先遍历外面数组，for…in遍历数组里面的对象

    const objArr = [{name:'xiaohong'},{age:18},{sex:'female'}];
    for (const item of objArr) {
      console.log(item);
      for (const key in item) {
        console.log(key);
        console.log(item[key]);
      }
    }