美文网首页
如何让对象支持 for...of 遍历

如何让对象支持 for...of 遍历

作者: 莫帆海氵 | 来源:发表于2021-01-18 22:30 被阅读0次

    假如给定下面的对象,如何让它支持使用 for...of 遍历获取它的每个属性的值。

    let a = {
        a1: 1,
        a2: 2,
        a3: 3,
    }
    

    参照 Set.prototype.values 可遍历性

    // new Set().values()
    
    [[Entries]]
      No properties
    __proto__: Set Iterator
      next: ƒ next()
      Symbol(Symbol.toStringTag): "Set Iterator"
      __proto__:
        Symbol(Symbol.iterator): ƒ [Symbol.iterator]()
    __proto__: Object
    [[IteratorHasMore]]: false
    [[IteratorIndex]]: 0
    [[IteratorKind]]: "values"
    

    包含有 [Symbol.iterator] 的属性且 Iterator 的 next 方法的返回值

    // new Set().values().next()
    
    {value: undefined, done: true}
    

    参照上面的只要定义实现 Iterator 接口

    {
        [Symbol.iterator]: function() {
            return {
                next: () => {
                    return {
                        value: undefined,
                        done: true
                    }
                }
            }
        }
    }
    

    完整示例如下

    let a = {
      a1: 1,
      a2: 2,
      a3: 3,
      [Symbol.iterator]: function(e) {
        let idx = 1
        return {
          next: () => {
            let v = this[`a${idx}`]
            idx += 1
            
            if (v) {
              return {
                value: v,
                done: false
              }
            }
            
            return {
              value: undefined,
              done: true
            }
          }
        }
      }
    }
    

    for...of 的输出结果如下

    for (var iterator of a) {
        console.log(iterator)
    }
    
    // 输出
    1
    2
    3
    
    

    相关文章

      网友评论

          本文标题:如何让对象支持 for...of 遍历

          本文链接:https://www.haomeiwen.com/subject/oqsfzktx.html