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

for…in 语句

for…in 语句用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）;

遍历数组：

 var arr = [25,58,65,15,48,78,98,23,19];
 for(let i in arr){
    console.log(i)
 }
 
 //输出：
 // 0
 // 1
 // 2
 // 3
 // 4
 // 5
 // 6
 // 7
 // 8

遍历结果是key,数组下标。
得到了下标，也就可以遍历数组了：

 var arr = [25,58,65,15,48,78,98,23,19];
 for(let i in arr){
    console.log(arr[i])
 }
 
 //输出：
 // 25
 // 58
 // 65
 // 15
 // 48
 // 78
 // 98
 // 23
 // 19

遍历对象：

 var arr = [
     {id:1,name:"kfc"},
     {id:2,name:"mvp"},
     {id:3,name:"vip"}
     ];
 for(let i in arr){
     console.log(arr[i].name);
 }
 // 输出：
 // kfc
 // mvp
 // vip

---

for…of 语句

for…of 是 ES6 新引入的循环，用于替代 for…in 和 forEach() ，并且支持新的迭代协议。它可用于迭代常规的数据类型，如 Array 、 String 、 Map 和 Set 等等。

遍历Array :

 var arr = [25,58,65,15,48,78,98,23,19];
 for(let i of arr){
    console.log(i)
 }
 //输出：
 // 25
 // 58
 // 65
 // 15
 // 48
 // 78
 // 98
 // 23
 // 19

遍历结果是value,数组值。

遍历String :

 var str = "world";
 for(let i of str){
    console.log(i)
 };
 // 输出：
 // w
 // o
 // r
 // l
 // d

遍历Map :

let myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");
myMap.set(2, "two");
 
// 遍历 key 和 value
for (let [key, value] of myMap) {
  console.log(key + " = " + value);
}
for (let [key, value] of myMap.entries()) {
  console.log(key + " = " + value);
}
 
// 只遍历 key
for (let key of myMap.keys()) {
  console.log(key);
}
 
// 只遍历 value
for (let value of myMap.values()) {
  console.log(value);
}

// 输出：
// 0 = zero
// 1 = one
// 2 = two

// 0 = zero
// 1 = one
// 2 = two

// 0
// 1
// 2

// zero
// one
// two

遍历Set :

let mySet = new Set();
mySet.add("zero");
mySet.add("one");
mySet.add("two");
 
// 遍历整个 set
for (let item of mySet) {
  console.log(item);
}
 
// 只遍历 key 值
for (let key of mySet.keys()) {
  console.log(key);
}
 
// 只遍历 value
for (let value of mySet.values()) {
  console.log(value);
}
 
// 遍历 key 和 value ，两者会相等
for (let [key, value] of mySet.entries()) {
  console.log(key + " = " + value);
}

//输出：
 
 // zero
 // one
 // two
 
 // zero
 // one
 // two
 
 // zero
 // one
 // two
 
 // zero = zero
 // one = one
 // two = two