乐趣区

关于javascript:JS中的forin和forof循环语句有什么区别

for…infor…of 语句都能够用来遍历一个变量,上面别离应用 for…infor…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 来遍历一个数组时,返回的后果是数组的元素值;

参考资料

  • https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Loops_and_iteration
退出移动版