JS中 for.. in.和 for of 的区别

普通的for循环的基本格式为:

for(int i ; i < 10 ; i++){
    ...
}

在 js 中则存在另外的 for 循环格式.  for ..in   和  for...of ,接下来将介绍一下这两个的区别

for in是ES5标准，遍历key. 
for of是ES6标准，遍历value.

 

for ... in  : 遍历的是对象的属性，类似于键值对里的键key，当它遍历array的时候遍历的是array的索引，

var a = ['A', 'B', 'C'];
for (var i in a) {
 alert(i); // '0', '1', '2'
 alert(a[i]); // 'A', 'B', 'C'
}

for … of  :  循环是ES6引入的新的语法(但是有很多浏览器并不支持, 甚至报错,.)

用for … of循环遍历集合，用法如下：

var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of a) { // 遍历Array
 alert(x);//'A', 'B', 'C'
}
for (var x of s) { // 遍历Set
 alert(x);//'A', 'B', 'C'
}
for (var x of m) { // 遍历Map
 alert(x[0] + '=' + x[1]);//1='x',2='y',3='z'
}

用两种循环来解析 json 数据时:

//for in 循环
for(var d in data){
	html+="<tr><td>"+ data[d].id + " </td> <td>"+ data[d].name +" </td> <td>" 
             + data[d].password+"</td> </tr>";
}

//for of 循环
for(var d of data){
	html+="<tr><td>"+ d['id'] + " </td> <td>"+ d['name'] +" </td> <td>" + d['password']
               +" </td> </tr>"
}