js中for语句和for...of和for...in语句区别

js中for语句和for…of和for…in语句区别`

<p>for可以用来循环数组，或者类似于数组的对象(比如：字符串)。但for语句不能[直接]循环对象，因为对象没有迭代器，但可以间接使用Object.keys()返回对象的属性名称所组成的迭代器。</p>
<p>for...in...专门用来循环对象的语句。一般不用来循环数组，但并不表示不能循环数组。</p>
<p>for...of...专门用来循环数组（ES6），也可以用来循环带有迭代器的对象，不能直接循环对象，循环对象时，要使用Object.keys(obj)返回键的迭代器，再去循环。</p>

<script>
    var person = {
        name: '张三',
        age: 20,
        sex: true
    }

    // key指person对象的属性名称， for...in...语句专门用来循环对象。
    for (const key in person) {
        // console.log(key);
        // 当对象的属性名称是变量时，访问对象的值需要加[]，称为索引访问，不能打点调用。
        console.log(person[key]);
    }

    console.log('--------------');

    // for...in...也可以循环数组。
    var arr = ['a', 'b', 'c'];
    for (const key in arr) {
        // console.log(key);
        console.log(arr[key]);
    }

    console.log('--------------');

    // for...of专门用来循环数组。
    for (const iterator of arr) {
        console.log(iterator);
    }

    console.log('--------------');

    // for...of不能直接循环对象，但可以间接。
    // Object.keys()返回对象的属性名称。
    for (const iterator of Object.keys(person)) {
        // console.log(iterator);
        console.log(person[iterator]);
    }

    // for语句不能直接循环对象，但可以间接。使用Object.keys()返回对象的属性名称的迭代器
    var keys =  Object.keys(person);
    for (var i = 0; i < keys.length; i++) {
        // console.log(i);
        // console.log(keys);
        // console.log(keys[i]); // 得到属性名称
        console.log(person[keys[i]]); // 得到属性值。
    }

</script>