js中如何使用for..of来遍历对象？

for …of是ES6新增的遍历方式，用于遍历数组和对象的。
for…of是允许遍历一个含有Iterator接口的数据结构（对象、数组等）并且返回各项值。普通对象是无法遍历的。

1、需要遍历的对象是类数组对象，将类数组转为数组，再遍历；

const obj = {0: 1, 1: 2, 2: 3, 3: 4, length: 4};
const arr = Array.from(obj);
for (let value of arr){
    console.log(value);// 1 2 3 4
}
1
2
3
4
5

2、需要遍历的对象不是类数组，给对象添加一个Symbol.iterator属性，并指向迭代器

iterator遍历的过程：

1. 创建一个指针对象，指向当前数据结构的起始位置

2. 第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员

3. 第二次调用针对象的next方法，指针就指向数据结构的第二个成员

4. 不断调用指针对象的next方法，直到它指向数据结构的结束位置

   每一次调用next方法，都会返回数据结构的当前成员的信息，返回的是一个包含value和done两个属性的对象。

   value:当前成员的值；
   done:是一个布尔值，表示遍历是否结束

const person = {
    name: "张三",
    age: 18,
    height: 180,
    weight: 120,
    sex: "男"
}
person[Symbol.iterator] = function () {
    //1、拿到对象中的所有key值
    let key = Object.keys(this);//谁调用这个函数，this执行谁
    console.log(key);//[ 'name', 'age', 'height', 'weight', 'sex' ]
    //2、定义数组的下标值
    let index=0;
    return {
        next() {
            if(index<key.length){
                return {value:person[key[index++]], done:false}
            }else {
                return {value:undefined, done:true}
            }
        }
    }
}
for (let value of person){
    console.log(value);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27