- 推薦在循環(huán)對象屬性的時候挽铁，使用
for in,在遍歷數(shù)組的時候的時候使用for of。 -
for in循環(huán)出的是key懒熙，for of循環(huán)出的是value - 注意龟糕，
for of是ES6新引入的特性肥败。修復(fù)了ES5引入的for in的不足 -
for of不能循環(huán)普通的對象，需要通過和Object.keys()搭配使用
假設(shè)我們要遍歷一個數(shù)組的 var arr= ['1',2,{a:'1',b:'2'}]
使用 for in 循環(huán)：
var arr = ['1',2,{a:'1',b:'2'}];
for(let key in arr ){
console.log(`${arr[key]}`);
// 1
// 2
// [object Object]
}
使用 for of 循環(huán)：
var arr = ['1',2,{a:'1',b:'2'}];
for(var value of arr){
console.log(value);
// 1
// 2
// {a: "1", b: "2"}
}
咋一看好像好像只是寫法不一樣而已困乒，那為什么說 for of 修復(fù)了 for in 的缺陷和不足踏兜。
假設(shè)我們往數(shù)組添加一個屬性 name : arr.name = 'demo' ,再分別查看上面寫的兩個循環(huán)：
使用 for in 循環(huán)：
var arr = ['1',2,{a:'1',b:'2'}];
arr.name = 'demo';
for(let key in arr){
console.log(`${arr[key]}`); //Notice!!arr.name也被循環(huán)出來了
// 1
// 2
// [object Object]
// demo
}
使用 for of 循環(huán)：
var arr = ['1',2,{a:'1',b:'2'}];
arr.name = 'demo';
for(var value of arr){
console.log(value);
// 1
// 2
// {a: "1", b: "2"}
}
所以說，作用于數(shù)組的 for in 循環(huán)除了遍歷數(shù)組元素以外,還會遍歷自定義屬性炸裆。
for of 循環(huán)不會循環(huán)對象的 key垃它，只會循環(huán)出數(shù)組的 value，因此 for of 不能循環(huán)遍歷普通對象,對普通對象的屬性遍歷推薦使用 for in
如果實在想用 for of 來遍歷普通對象的屬性的話烹看，可以通過和 Object.keys() 搭配使用国拇，先獲取對象的所有 key 的數(shù)組
然后遍歷：
var obj = {
name : '小明',
age : 9,
locate : {
country : 'china',
city : 'xiamen'
}
}
for(var key of Object.keys(obj)){
//使用Object.keys()方法獲取對象key的數(shù)組
console.log(key+": "+obj[key]);
// name: 小明
// age: 9
// locate: [object Object]
}
再簡單點說，for in 是遍歷鍵名惯殊，for of 是遍歷鍵值酱吝。
例如：
let arr = ["a","b"];
// for in 的方式
for (a in arr) {
console.log(a);//1,2
}
// for of 的方式
for (a of arr) {
console.log(a);//a,b
}
// 由于for of的這個特性，他還可以實現(xiàn)對iterator對象的遍歷土思，而for in就是簡單的遍歷了务热。
用兩種做一個小練習(xí), 尋找兩個有序數(shù)組a,b中最小相同元素
使用 for in 的方式
var a = [3, 4, 6, 8, 10, 15, 25];
var b = [1, 2, 10, 15, 25, 26, 27, 28];
var c = [];
for(let x in a){
for(let y in b){
if(a[x] == b[y]){
c.push(a[x]);
}
}
}
console.log(`數(shù)組A,B最小的相同元素是：${c[0]}`);// 10
使用 for of 的方式
var a = [3, 4, 6, 8, 10, 15, 25];
var b = [1, 2, 10, 15, 25, 26, 27, 28];
var c = [];
for(let x of a){
for(let y of b){
if(x == y){
c.push(x);
}
}
}
console.log(`數(shù)組A,B最小的相同元素是：${c[0]}`);// 10
