for..in 与 for..of 的可使用范围

for 的常见使用方式

前言

数组原生具备iterator接口（即默认部署了Symbol.iterator属性），for…of循环本质上就是调用这个接口产生的遍历器:

const arr = ['apple', 'watermelon', 'grape'];

for(v of arr) {
  console.log(v); // apple watermelon grape
}

const obj = {};
obj[Symbol.iterator] = arr[Symbol.iterator].bind(arr);

for(v of obj) {
  console.log(v); // apple watermelon grape
}

概括

• for…of循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象（比如arguments对象、DOM NodeList 对象）、 Generator 对象，以及字符串。

• JavaScript 原有的for...in循环，只能获得对象的键名，不能直接获取键值。ES6 提供for...of循环，允许遍历获得键值。（如1、2）

示例

• let 是用于声明块级作用域的变量，在 for...in 循环的每一次迭代中都是一个独立的块级作用域变量。

• 这与 var 不同，var 会将变量提升到函数或全局作用域。

1. for…in 遍历数字数组

   let arr = [9,8,7,1,2,3,4,5,6,7,8];
   
   for(key in arr) {
       console.log(key)
   }
   // console
   "0"
   "1"
   "2"
   "3"
   "4"
   "5"
   "6"
   "7"
   "8"
   

2. for…of 遍历数字数组

   let arr = [9,8,7,1,2,3,4,5,6,7,8];
   
   for(value of arr) {
       console.log(value)
   }
   // console
   9
   8
   7
   1
   2
   3
   4
   5
   6
   7
   8
   

3. for…of遍历对象数组

    let arr2 = [
        {name: 'zs', age: 18},
        {name: 'ls', age: 12},
        {name: 'ww', age: 13},
        {name: 'zl', age: 14},
        {name: 'qy', age: 22},
    ]
   
    for(value of arr2) {
        console.log(value)
    }
    // console
    {
        age: 18,
        name: "zs"
    }
    {
        age: 12,
        name: "ls"
    }
    {
        age: 13,
        name: "ww"
    }
    {
        age: 14,
        name: "zl"
    }
    {
        age: 22,
        name: "qy"
    }
   

4. for…in遍历对象

   for...in 循环用于遍历对象的可枚举属性（包括从原型链继承的属性）。

   let obj = {a:1,b:2,c:3}
   
   for(item in obj) {
       console.log(item)
   }
   // console
   "a"
   "b"
   "c"
   

5. for…in遍历对象

   for...in 循环用于遍历对象的可枚举属性（包括从原型链继承的属性）。

   let obj2 = {
       a: {x:1,s:2},
       b: {x:11,s:22},
       c: {x:111,s:222},
   }
   
   for(key in obj2) {
       console.log(key,obj2[key])
   }
   // console
   "a", { s: 2, x: 1 }
   "b", { s: 22, x: 11 }
   "c", { s: 222, x: 111 }
   

6. for…in遍历字符串

   let str = 'Hello JavaScript'
   
   for(s in str) {
       console.log(s)
   }
   // console
   "0"
   "1"
   "2"
   "3"
   "4"
   "5"
   "6"
   "7"
   "8"
   "9"
   "10"
   "11"
   "12"
   "13"
   "14"
   "15"
   

7. for…of遍历字符串

   let str = 'Hello JavaScript'
   
   for(s of str) {
       console.log(s)
   }
   // console
   "H"
   "e"
   "l"
   "l"
   "o"
   " "
   "J"
   "a"
   "v"
   "a"
   "S"
   "c"
   "r"
   "i"
   "p"
   "t"
   

8. for…of遍历键值对

   let map = new Map([
       ['a', 1],
       ['b', 2],
       ['c', 3]
   ])
   
   for(m of map) {
       console.log(m)
   }
   // console
   ["a", 1]
   ["b", 2]
   ["c", 3]
   
   // 返回键名的遍历器
   for(k of map.keys()) {
       console.log(k)
   }
   // console
   "a"
   "b"
   "c"
   
   // 返回键值的遍历器
   for(v of map.values()) {
       console.log(v)
   }
   // console
   1
   2
   3
   
   
   // 返回所有成员的遍历器
   for([key,value] of map.entries()) {
       console.log(key,value)
   }
   // 等同于
   for([key,value] of map) {
       console.log(key,value)
   }
   // console
   "a", 1
   "b", 2
   "c", 3
   

9. for…of遍历数据结构 Set

   const set = new Set([1, 2, 3, 4, 4]);
   
   for(value of set) {
       console.log(value)
   }
   // console
   1
   2
   3
   4
   

---

完