zoukankan      html  css  js  c++  java
  • [ES6] The Iterator Protocol

    The iterator protocol is used to define a standard way that an object produces a sequence of values. What that really means is you now have a process for defining how an object will iterate. This is done through implementing the .next()method.

    How it Works

    An object becomes an iterator when it implements the .next() method. The .next() method is a zero arguments function that returns an object with two properties:

    1. value : the data representing the next value in the sequence of values within the object
    2. done : a boolean representing if the iterator is done going through the sequence of values
      • If done is true, then the iterator has reached the end of its sequence of values.
      • If done is false, then the iterator is able to produce another value in its sequence of values.

    Here’s the example from earlier, but instead we are using the array’s default iterator to step through the each value in the array.

    const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
    const arrayIterator = digits[Symbol.iterator]();
    
    console.log(arrayIterator.next());
    console.log(arrayIterator.next());
    console.log(arrayIterator.next());
    
    /*
    Object {value: 0, done: false}
    Object {value: 1, done: false}
    Object {value: 2, done: false}
    */
    /*
     * Programming Quiz: Make An Iterable Object
     *
     * Turn the `james` object into an iterable object.
     *
     * Each call to iterator.next should log out an object with the following info:
     *   - key: the key from the `james` object
     *   - value: the value of the key from the `james` object
     *   - done: true or false if there are more keys/values
     *
     * For clarification, look at the example console.logs at the bottom of the code.
     *
     * Hints:
     *   - Use `Object.keys()` to store the object's properties in an array.
     *   - Each call to `iterator.next()` should use this array to know which property to return.
     *   - You can access the original object using `this`.
     *   - To access the values of the original object, use `this` and the key from the `Object.keys()` array.
     */
    
    const james = {
        name: 'James',
        height: `5'10"`,
        weight: 185
    };
    
    james[Symbol.iterator] = function() {
        var keys = Object.keys(james);
        var nextIndex = 0;
        return {
            next: function() {
                var key = keys[nextIndex];
                var obj = {
                    key: key,
                    value: james[key],
                    done: nextIndex === keys.length-1 ?
                            true:
                            false
                };
                nextIndex++;
                return obj;
            }
        }
    }
    
    
     const iterator = james[Symbol.iterator]();
    //
     console.log(iterator.next().value); // 'James'
     console.log(iterator.next().value); // `5'10`/ 
     console.log(iterator.next().value); // 185
  • 相关阅读:
    java知识学习17-API、String、StringBuilder
    java知识学习16-构造方法
    java知识学习15-封装
    定位在input输入框上的图片变模糊的问题
    查看echarts的版本
    vue-cli3项目解决npm run dev在浏览器打开两次的问题
    ElementUI的日期组件禁止选择过去的时间
    二维数组的使用
    实现在线预览文档
    vue-cli3项目在ie浏览器下白屏问题
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7873331.html
Copyright © 2011-2022 走看看