es6-15 Iterator and for of loop

Iterator

What is the Iterator interface

JS represents a collection of objects mainly Array, Set, Object, Map, in the past, traversing they need to use two different methods, and now, JS proposed Iterator mechanism to provide a unified traversal methods to different data structures, that is, for ... of. In other words, only the deployment of a data Iterator to use for ... of traversal.

Iterator traversal is this:

1. Create a pointer to an object, points to the start position of the current data structure. That is, on the object nature walker, is a pointer to the object.
2. First call object pointer nextmethod, the first pointer to a data structure member.
3. The second call object pointer nextmethod, the pointer points to a data structure of the second member.
4. Frequently called object pointer nextmethod, the end position until it points to the data structure.

Each call nextmethod, will return information about the current members of the data structure. Specifically, it is a return contains valueand donethe object two properties. Where valueproperty is the value of the current member, doneis a Boolean value that indicates whether the end of the traverse.

As long as the deployment of a data structure Iterator interface, we'd be such a data structure "to traverse" (Iterable). ES6 specified, the default Iterator interface deployed in Symbol.iterator attribute data structure, or that a data structure as long as Symbol.iterator data, can be considered to be "traversed" (iterable).

{
    let arr = ['hello', 'world']
    let map = arr[Symbol.iterator]()
    console.log(map.next()) // {value: "hello", done: false}
    console.log(map.next()) // {value: "world", done: false}
    console.log(map.next()) // {value: undefined, done: true}
}

Native data structure can provide for ... of consumption

• Array
• Map
• Set
• String
• The TypedArray (a common fixed-length buffer type, allowing binary data read buffer)
• Function in the arguments object
• NodeList object

You can see above the native data structure and no object (Object), why?
That is because the order of traversal object properties is uncertain, developers need to manually specify. Essentially, the walker is a linear process, for any non-linear data structure, the deployment interface is equivalent to traversing the deployment of a linear transformation .
Do the following treatment, the target for for ... of consumption:

{
     // Custom Object iterator interfaces 
    the let obj = { 
        Start: [ . 1, 2,. 3 ], 
        End: [ . 4,. 5,. 6 ], 
        [Symbol.iterator] () { 
            the let that = the this 
            the let index = 0 
            the let ARR that.start.concat = (that.end) // arrays into 
            the let len = arr.length
             return { 
                Next () { 
                    // traversal 
                    IF (index < len) {
                         return  {
                            value: ARR [index ++ ], 
                            DONE: to false  // continue to loop 
                        } 
                    } the else {
                         return { 
                            value: ARR [index ++ ], 
                            DONE: to true  // terminate the loop 
                        } 
                    } 
                } 
            } 
        } 
    } 
    // for verification of a the cycle can 
    for (Key of the let obj) { 
        the console.log (Key) // . 1 2. 5. 4. 3. 6 
    } 
}

Did not use a custom iterator Object Interface for of the loop is being given

{
    let obj = {
        start: [1, 2, 3],
        end: [4, 5, 6],
    }
    for (let value of obj) {
        console.log(value) // TypeError: obj is not iterable
    }
}

Occasions call Iterator interface

Deconstruction assignment

{
    let set = new Set().add('a').add('b').add('c');
    let [x,y] = set;
    console.log(set) // Set(3) {"a", "b", "c"}
    console.log(x) // a
    console.log(y) // b
    let [first, ...rest] = set;
    console.log(first) // a
    console.log(rest) // ['b','c']
}

Extended operator

{
    // 例一
    var str = 'hello';
    console.log([...str]) // ['h','e','l','l','o']
    // 例二
    let arr = ['b', 'c'];
    console.log(['a', ...arr, 'd']) // ['a', 'b', 'c', 'd']
}