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() 方法获取对象键值组成的数组,这个数组不包含原型的属性和方法。