遍历数组对象的方法

for...of & for...in

两者都可以用于遍历，不过for in遍历的是数组的索引（index），而for of遍历的是数组元素值（value），对此做了几组实验

关于数组

测试数据：

const menu = ['tomato', 'egg', 'rice']

1. 直接遍历数组：for...in获取的是数组的索引值，for...of获取的是数组的属性值

for(const item in menu) {
  console.log(item)
}
// 0 1 2

for(const item of menu) {
  console.log(item)
}
// tomato egg rice

2. 遍历数组的entries

for(const item in menu.entries()) {
  console.log(item)
}
// 空的

for(const item of menu.entries()) {
  console.log(item)
}
// [0, 'tomato']
// [1, 'egg']
// [2, 'rice']

关于对象

测试数据：

const menusObject = {
  item1: 'tomato',
  item2: 'egg',
  item3: 'rice'
}

1. 直接遍历对象：for...in获取的是对象的属性名，for...of报错，因为对象本身并不是可迭代的

for(const item in menusObject) {
  console.log(item)
}
// item1 item2 item3

for(const item of menusObject) {
  console.log(item)
}
// Uncaught TypeError: menusObject is not iterable

2. 遍历对象的entries：相当于是将对象转换成数组

   Object.entries(menusObject)的值：

   

for(const item in Object.entries(menusObject)) {
  console.log(item)
}
// 0 1 2

for(const item of Object.entries(menusObject)) {
  console.log(item)
}
// ['item1', 'tomato']
// ['item2', 'egg']
// ['item3', 'rice']

对象遍历的方法

1. Object.keys(object)

   获取对象的key，也就是属性名

2. Object.values(object)

   获取对象的value，也就是属性值

3. Object.entries(object)

   获取对象的key+value，也就是属性名+属性值，会以二维数组的形式返回

遍历顾名思义是将一个对象中的所有信息拿出来看一遍，在数组中，每一个元素都是有索引的，很容易就可以按照顺序将对应的值拿出来。而对于对象，没有对应的索引值，难以判定什么时候遍历完，所以遍历对象的时候，需要获取对象的某些属性规定顺序，从而可以完整遍历。