不同数据的遍历(for in与for of)

[1] for in

(1)语法

• for(let i = 0; i < arr.length; i++){
    // 操作
  }
  for(const i in arr){
    // 操作
  }
  1
  2
  3
  4
  5
  6

• i 为数组元素下标(索引)

[2] for of (es6新增)

(1)语法

• for(const item of arr){
    // 操作
  }
  1
  2
  3

• item为数组元素

for in 与 for of的区别

[1]for in :是用于数组 、对象的遍历循环—返回值：数组：索引；对象：key值；

• 数组

  • const arr = ['a',"b","c","d","e"]
    for(const i in arr){
      console.log('item', i, arr[i])
    }
    1
    2
    3
    4

  • 

  • 遍历的每个值是数组元素的下标(索引)

• 对象

  • const obj = {
      name:'chaochao',
      age:18,
      sex:'女'
    }
    for(const key in obj){
      console.log('item', key, obj[key])
    }
    1
    2
    3
    4
    5
    6
    7
    8

  • 

  • 遍历的每个值是对象的key值；

[2]for of :for…of循环可以使用的范围包括数组、系统内置的伪数组(arguments等)、字符串、Set 和 Map 结构，不能遍历对象—返回值：当前数据结构的当前成员；

• 数组

  • const arr = ['a',"b","c","d","e"]
    for(const item of arr){
      console.log('item',item)
    }
    1
    2
    3
    4

  • 

  • 遍历的每个值代表数组元素

• 对象

  • const obj = {
      name:'chaochao',
      age:18,
      sex:'女'
    }
    for(const item of obj){
      console.log('item',item)
    }
    1
    2
    3
    4
    5
    6
    7
    8

  • 

  • for of 不能用于遍历对象–error

• 字符串

  • const str = 'hello'
    for(const item of str){
      console.log('item',item)
    }
    1
    2
    3
    4

  • 

  • 遍历的每个值代表string的每个字符

• Set数据

  • const arr = ['a',"b","c","d","a","b","c","d"]
    const setArr = new Set(arr)
    for(const item of setArr){
      console.log('item',item)
    }
    1
    2
    3
    4
    5

  • 

  • 遍历的每个值代表set数据元素