for-in for-of

# for-in for-of

var obj={name:"ay",sex:"none"};
for(let i in obj){
	console.log(i)
	//name sex
}

// for(let i of obj){
// 	console.log(i)
// 	//obj is not iterable
// }

# for...in 的特点

for...in循环返回的值都是数据结构的键值名。遍历对象返回的对象的key值；遍历数组返回的数组的下标(key)。

for...in循环不仅可以遍历数据键名,还会遍历原型上的key值和手动添加的其他键；

function F(){
	this.a=3
	this.b=50
}

F.prototype.sss=111
const f=new F()
f.demo=function(){
	console.log(9)
}

for (let key in f){
	console.log(key)
}

// a
// b
// demo
// sss

特别情况下, for...in循环会以任意的顺序遍历键名

obj = {
    string: 'good',
    zero: 0,
    '2': 'a', 
    '1': 'b',
};
for (let key in obj) {console.log(key)}
// 1
// 2
// string
// zero

总结一句: for...in 循环特别适合遍历对象。

 const arr3 = ['a', 'b'];
  arr3.name = 'c';
  for (let i in arr3) {
    console.log(i) // 0, 1, name
  }

# for...of 特点

这是 ES6 新增的一种循环语句，当要遍历一个可迭代对象时，会先通过它的Symbol.iterator 属性得到默认迭代器，再调用迭代器的 next()方法，读取 IteratorResult 的 value 属性的值并赋给 for-of 语句中声明的变量，如此反复，直到 done 属性为 ture 时才终止遍历。

而和其他循环语句一样，for-of 循环也能通过跳转语句 return、break 和 continue 提前终止。

for...of 循环用来获取一对键值对中的值

一个数据结构只要部署了 Symbol.iterator 属性, 就被视为具有 iterator接口, 就可以使用 for of循环。

有了for-in，为什么还要设计for-of呢?

let arr = "abc";
for( var char of arr){
    console.log(char);
}
//a 
//b
//c

此时，可以将a,b,c输出，但是for-in是无能为力的。其中for-of不仅能对数组和字符串进行遍历。还可以适用以下的集合：

Map
Set
NodeList

其中Map，Set是ES6新增的特性。NodeList是DOM对象集合。

var arr =new Array();
arr.length=1000000;
arr.fill(10,0,1000000)
let s=arr.length;
console.log(arr)
let a,b;
for(let i in arr){
	
	if(i==0){
		
		a= Date.now()
	}
	if(i==s-1){
		b= Date.now()
	}
}


// for(let i=0;i<s;i++){
// 	if(i==0){
// 		a= Date.now()
// 	}
// 	if(i==s-1){
// 		b= Date.now()
// 	}
// }

//arr.forEach((el,i)=>{
//	if(i==0){
//		a= Date.now()
//	}
//	if(i==s-1){
//		b= Date.now()
//	}
//})
console.log(b-a)

# for...of 和 Object.entries()

如果想要直接使用对象的key和value，可以借助for...of和Object.entries()方法。for...of此时返回的是键值对数组。

const obj = {a:1,b:2,c:3};
const object = Object.entries(obj);
console.warn(object)
/*
[['a',1],['b',2],['c',3]]
*/
for(const [k,v] of object){
	console.log(k,v)
}

TIP

for循环相对于forin来说，快一些。for循环百万数据需要10ms左右，而forin则是30-50ms,forEach也比较慢20ms左右; for循环可遍历数组，而for in循环可以遍历数组和对象使用for in循环会将Array当成对象遍历，而Array的存取速度明显比Object要快。所以使用for循环遍历数组比for in循环遍历快。

for循环遍历的是索引数组，通过索引来调用，i的返回值是number类型而for in循环遍历的是关联数组，通过key来调用，i的返回值是 string 类型

← string js兼容 →