v-for 循环中 in 与 of 区别，以及 ES5 for in 与 ES6 for of 区别

const arr = ['张三','李四','王五']
const obj = [{ name:'张三' },{ name:'李四' }]

 v-for="(item,index) in ( arr || obj )"  :key="index"
 v-for="(item,index) of ( arr || obj )"  :key="index"
 
// 遍历 数组或数组对象 时，item 为数组或数组对象的值, index 为数组的索引。使用 in 或 of  两者是没有区别的

// -----------------------------------  分割线 --------------------------------------------------------------------

const arr = ['张三','李四','王五']

 for ( let key in arr ) {
 console.log('111',key); // 输出 0 1 2
} 

// 结论： 使用 forin 遍历 数组 时，得到的变量是 索引值


for ( let key of arr ) {
 console.log('111',key); // 输出 张三 李四 王五
}

// 结论：使用 forof 遍历 数组 时，得到的变量是 数组内的每一个值 


// ----------------------------------------------------------------------------------------------------------------------


const obj = { name:'张三',age: 18, money: 0 }
const objList = [{name: "张三"},{name: "李四"},{name: "王五"}],

for ( let key in obj) {
 console.log('111',key); // 输出 name age money
}

// 结论：使用 forin 遍历 对象 时，得到的变量是 对象的 key 值



for ( let key in objList ) {
 console.log('111',key); // 输出 0 1 2
}

// 结论：使用 forin 遍历 数组对象 时，得到的变量是该数组对应对象的索引


for ( let key of obj) {
 console.log('111',key); 
 // 报错 Error in created hook: "TypeError:Invalid attempt to iterate non-iterable instance. In order to be iterable, non-array objects must have a [Symbol.iterator]() method."
}

// 结论：不能 使用 forof 遍历对象，如需使用 forof 遍历对象，可以尝试为 Object 添加一个迭代器（Symbol.iterator）
// 迭代器对象可以是任意具有.next()方法的对象；for-of循环将重复调用这个方法，每次循环调用一次

        obj[Symbol.iterator] = function () {
            var keys = Object.keys(this);
            var count = 0;
            return {
                next() {
                    if (count < keys.length) {
                        return { value: obj[keys[count++]], done: false };
                    } else {
                        return { value: undefined, done: true };
                    }
                }
            }
        };
        for (const key of obj) {
            console.log('111',key); // 张三 18 0
        }



for ( let key of objList ) {
 console.log('111',key); // 输出 {name: "张三"},{name: "李四"},{name: "王五"}
}

// 结论：使用 forof 遍历 数组对象 时，得到的变量是 整个对象

总结：

for of

适用遍历 数组、数组对象、字符串、map、set等拥有迭代器对象的集合，有序遍历，但是不能遍历对象，因为没有迭代器对象，与forEach() 不同的是（ forEach 可以使用 return 退出循环 ），它可以正确响应 break、continue 和 return语句。

for in

适用遍历 对象，且它是无序遍历，不按照顺序来，原型上的属性或方法也会被遍历出来 ，对于对象来说，可以使用对象的hasOwnProperty() 方法来判断是否为自身实例属性，可以只对自身属性遍历，或者使用 Object.keys() 方法获取对象键值组成的数组，这个数组不包含原型的属性和方法。