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
}

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);
}

js中如何使用for..of来遍历对象?_第1张图片

你可能感兴趣的:(前端面试题,JavaScript,javascript,前端,开发语言)