for...in 和 for...of 语句都可以用来遍历一个变量,下面分别使用 for...in 和 for...of 来遍历一个普通对象和数组,结合具体的示例代码来进行比较两者之间的异同点。
1、for...in 语句
(1)使用 for...in 来循环遍历一个普通对象
for...in 语句可以用来循环一个对象所有可枚举的属性,下面的代码是用来打印 obj 对象所有的属性字段和属性值:
let obj = {type: 1, keyword: "js"};
for (let key in obj) {
console.log(key, obj[key])
}
输出结果如下:
type 1
keyword js
(2)使用 for...in 来循环遍历一个数组
如果使用 for...in 语句来遍历一个数组,它遍历的结果是数组的下标,具体测试代码如下:
let obj = ['type', 'keyword']
for (let key in obj) {
console.log(key, obj[key])
}
此时的 obj 是一个数组对象,输出结果如下:
0 type
1 keyword
因此可以得出以下的结论:
- 如果使用 for...in 来遍历一个对象,返回的结果是对象的属性名称;
- 如果使用 for...in 来遍历一个数组,返回的结果是数组的下标;
2、for...of 语句
(1)使用 for...in 来循环遍历一个普通对象
for...of 语句主要用来循环一个可迭代对象的属性,要成为可迭代对象, 一个对象必须实现 @@iterator 方法,这意味着对象(或者它原型链上的某个对象)必须有一个键为 @@iterator 的属性,可通过常量 Symbol.iterator 访问该属性。
对于普通的对象,其实并不是可迭代对象,如果直接使用 for...of 遍历的话,会报错的,下面来测试一下:
let obj = {type: 1, keyword: "js"};
for (let key of obj) {
console.log(key, obj[key])
}
运行后,出现下面的错误,直接提示 obj 不是可迭代对象,如下:
那么如何使用 for...of 来遍历对象属性呢,首先需要做的就是将 obj 对象转换成一个可迭代对象,这里可以借助 Object.keys() 方法,调整后的代码如下:
let obj = {type: 1, keyword: "js"};
for (let key of Object.keys(obj)) {
console.log(key, obj[key])
}
输出结果如下:
type 1
keyword js
(2)使用 for...in 来循环遍历一个数组
如果使用 for...in 语句来遍历一个数组,它遍历的结果是数组的元素值,具体测试代码如下:
let obj = ['type', 'keyword']
for (let key of obj) {
console.log(key)
}
输出的结果如下:
type
keyword
因此可以得出以下的结论:
- 不能使用 for...of 语句来直接遍历一个普通对象,只能用来遍历一个可迭代的对象
- 如果使用 for...of 来遍历一个数组,返回的结果是数组的元素值;
3、for...in 和 for...of 的异同点
(1)相同点
- for...in 和 for...of 都可以用来遍历一个可迭代对象,比如Array、Map、Set、arguments 等;
(2)不同点
- for...in 可以用来直接遍历一个普通对象,而 for...of 不能;
- 当使用 for...in 来遍历一个数组时,返回的结果是数组的下标;而当使用 for...of 来遍历一个数组时,返回的结果是数组的元素值;
参考资料