for...in 和 for...of 区别
原因:
工作中用过for...in,但是没有实际研究过,通过延伸知识点,又发现了一些好玩的东西,因此深入了解一些,加深印象
for...in
对象时候,枚举属性,可遍历对象键值
let obj = {
a:1,
b:2
}
for(let key in obj){
console.log(key)
}
//输出
//a
//b
数组时,枚举下标
var arr = ['ONE', 'TWO', 'THREE'];
for (var i in arr) {
console.log(i);
}
//输出
//0
//1
//2
且可以输出索引和值
var arr = [1, 2, 3];
for (var i in arr) {
console.log(i, arr[i]);
}
// 结果是:
// 0 1
// 1 2
// 2 3
for...of 遍历数组,字符串等有可迭代的数据结构,不支持对象
var arr = [1, 2, 3];
for (let value of arr) {
console.log(value);
if (value == 2) {
break;
}
}
// 结果是:
// 1
// 3
//迭代字符串
let str = 'wht';
for (let value of str) {
console.log(value);
}
// 结果是:
// "w"
// "h"
// "t"
//迭代类数组
//节点对象通常是用[].slice.call(),for...of也可以
let elements = document.querySelectorAll('body');
for (let element of elements) {
console.log(element.tagName);
}
总结:
for in 和for of 区别
1、for...of无法遍历对象
2、for...in是遍历的索引,for...of遍历的是值
3、for...of支持类数组和字符串遍历且支持break,contain,return