一、for … in、for…of区别

1.for … in

for…in 循环一般用于对象的遍历，不适用于遍历数组。

遍历数组的缺点：数组的下标 index 值是数字，for-in遍历的 index值"0",“1”,"2"等是字符串。存在一个转换过程，降低性能

任何对象都继承了Object对象，继承的类的属性是默认不可遍历的，for… in 循环遍历的时候会跳过，但是这个属性是可以更改为可以遍历的，那么就会造成遍历到不属于自身的属性。 可以用hasOwnProperty() 方法，在循环内部判断一下，某个属性是否为对象自身的属性。

2. for…of

for…of 循环不仅支持数组，还支持大多数类数组对象，也支持字符串遍历。 for…of 它可以正确响应 break、continue 和 return 语句。

3.区别

for in 一般常用来遍历对象或json，不适用于遍历数组。 for of数组对象都可以遍历，遍历对象需要通过和Object.keys() for in循环出的是key，for of循环出的是value 遍历对象时，for in，包括原型链上的属性，需要用hasOwnProperty()判断；for of + Object.keys()得到的是自身可枚举属性

二、转为ES5代码

ES6代码

let arr = [1,2,3,4]

for(let item of arr){
	console.log(item)
}

for(let index in arr){
	console.log(arr[index])
}

let obj = {
	name:"小强",
    age:23
}
for(let item of Object.keys(obj)){
	console.log(obj[item])
}

for(let index in obj){
	console.log(obj[index])
}

转为ES5:

"use strict";

var arr = [1, 2, 3, 4];

for (var _i = 0, _arr = arr; _i < _arr.length; _i++) {
  var item = _arr[_i];
  console.log(item);
}

for (var index in arr) {
  console.log(arr[index]);
}

var obj = {
  name: "小强",
  age: 23
};

for (var _i2 = 0, _Object$keys = Object.keys(obj); _i2 < _Object$keys.length; _i2++) {
  var _item = _Object$keys[_i2];
  console.log(obj[_item]);
}

for (var _index in obj) {
  console.log(obj[_index]);
}

可以看到转成ES5代码后， for…of 就是用for实现的。

三、性能比较

let arr = new Array();
for(let i = 0, len = 1000000;i < len; i++){
	arr.push(i);
}
 
function foradd(my_arr){
	let sum = 0;
	for(let i = 0; i < my_arr.length; i++){
		sum += my_arr[i];
	}
}
 
function forinadd(my_arr){
	let sum = 0;
	for(let key in my_arr){
		sum += my_arr[key];
	}
}
 
function forofadd(my_arr){
	let sum = 0;
	for(let val of my_arr){
		sum += val;
	}
}
 
function timeTest(func,my_arr,str) {
	var start_time = null;
	var end_time = null;
	start_time = new Date().getTime();
	func(my_arr);
	end_time = new Date().getTime();
	console.log(str,(end_time - start_time).toString());
}
 
timeTest(foradd,arr,foradd);
timeTest(forinadd,arr,forinadd);
timeTest(forofadd,arr,forofadd);

// foradd 6
// forinadd 294
// forofadd 20

for > for…of > for…in

for循环的i是Number类型，开销较小 for…in需要穷举对象的所有属性，包括自定义的添加的属性也能遍历到 且for…in的key是String类型，有转换过程，开销比较大