例1
const obj = {
a: 1,
b: 2,
c: 3
}
for (let i in obj) {
console.log(i)
// a
// b
// c
}
for (let i of obj) {
console.log(i)
// Uncaught TypeError: obj is not iterable 报错了
}
以上代码通过 for in 和 for of 对一个obj对象进行遍历,for in 正常的获取了对象的 key值,分别打印 a、b、c,而 for of却报错了
以上是遍历对象,下面再看一个遍历数组的例子。
例2
const arr = ['a', 'b', 'c']
// for in 循环
for (let i in arr) {
console.log(i)
// 0
// 1
// 2
}
// for of
for (let i of arr) {
console.log(i)
// a
// b
// c
}
以上代码是对一个数组进行遍历, for in 返回的值为 0、1、2,这不是数组的下标吗? 而 for of 返回的是 a、b、c,这一次没有报错,为什么呢?
1.for in 的特点
例3:
const arr = ['a', 'b']
// 手动给 arr数组添加一个属性
arr.name = 'qiqingfu'
// for in 循环可以遍历出 name 这个键名
for (let i in arr) {
console.log(i)
// a
// b
// name
}
结合上例总结出的 for in 特点：
-
for ... in 循环返回的值都是数据结构的 键值名。
遍历对象返回的对象的key值,遍历数组返回的数组的下标(key)。 -
for ... in 循环不仅可以遍历数字键名,还会遍历原型上的值和手动添加的其他键。
-
特别情况下, for ... in 循环会以任意的顺序遍历键名
总结一句: for in 循环特别适合遍历对象 （字面量对象结构的对象：{ a : 1, ... , b : 2 }） 。
2.for of 的特点
-
for of 循环用来获取一对键值对中的
值,而 for in 获取的是键名 -
一个数据结构只要部署了
Symbol.iterator属性, 就被视为具有iterator接口, 就可以使用 for of循环。
例1这个对象,没有 Symbol.iterator这个属性,所以使用for of会报obj is not iterable -
for of 不同与 forEach, 它可以与
break、continue和return配合使用,也就是说 for of 循环可以随时退出循环。 -
提供了遍历所有数据结构的统一接口
只要有 iterator 接口的数据结构,都可以使用 for of循环。
- 数组 Array
- Map
- Set
- String
- arguments对象
- Nodelist对象, 就是获取的dom列表集合
以上这些都可以直接使用 for of 循环。 凡是部署了 iterator 接口的数据结构也都可以使用数组的 扩展运算符(...)、和解构赋值等操作。
3. 我也想让对象可以使用 for of循环怎么办?
3 .1 使用 Object.keys() 获取对象的 key值集合后,再使用 for of
const obj = {
a: 1,
b: 2,
c: 3
}
for (let i of Object.keys(obj)) {
console.log(i)
// 1
// 2
// 3
}
3 .2 Symbol.iterator 为每一个对象定义了默认的迭代器。该迭代器可以被 for...of 循环使用。
const iterableOBJ = {};
iterableOBJ [Symbol.iterator] = function* () {
yield 1;
yield 2;
yield 3;
};
console.log([...iterableOBJ ]);// Expected output: Array [1, 2, 3]
const foo = function*() {
yield 'a';
yield 'b';
yield 'c';
};
let str = '';
for (const val of foo()) {
str = str + val;
}
console.log(str);
// Expected output: "abc"
4. 注意：
-
function* 这种声明方式(function关键字后跟一个星号）会定义一个生成器函数(generator function)，
-
它返回一个 Generator 对象。
