zoukankan      html  css  js  c++  java
  • 533 js迭代器

    2.10. 迭代器

    遍历器(Iterator)就是一种机制。它是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口,就可以完成遍历操作。

    Iterator 接口:对象的属性,属性名:Symbol.iterator ,属性值:函数。】

    1. ES6 创造了一种新的遍历命令 for...of 循环,Iterator 接口主要供 for...of 消费

    2. 原生具备 iterator 接口的数据(可用 for of 遍历)

    a) Array

    b) Arguments

    c) Set

    d) Map

    e) String

    f) TypedArray

    g) NodeList

    1. 工作原理

    a) 创建一个指针对象,指向当前数据结构的起始位置 【由Symbol.iterator对应的函数创建】

    b) 第一次调用【返回的】对象的 next 方法,指针自动指向数据结构的第一个成员

    c) 接下来不断调用 next 方法,指针一直往后移动,直到指向最后一个成员

    d) 每调用 next 方法返回一个包含 value 和 done 属性的对象

    注: 需要自定义遍历数据的时候,要想到迭代器


    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>迭代器</title>
    </head>
    
    <body>
      <script>
        const xiyou = ['唐僧', '孙悟空', '猪八戒', '沙僧'];
    
        // 使用 for...of 遍历数组
        for (let v of xiyou) {
          console.log(v);
        }
    
        let iterator = xiyou[Symbol.iterator]();
        // 原型对象上有next方法、Symbol(Symbol.toStringTag): "Array Iterator"
        console.log(iterator); 
    
        // 调用对象的next方法
        console.log(iterator.next()); // {value: "唐僧", done: false}
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next()); // {value: undefined, done: true}
      </script>
    </body>
    
    </html>
    

    迭代器自定义遍历对象

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>自定义遍历数据</title>
    </head>
    
    <body>
      <script>
        //声明一个对象
        const banji = {
          name: "哈哈",
          stus: [
            'xiaoming',
            'xiaoning',
            'xiaotian',
            'knight'
          ],
          [Symbol.iterator]() {
            let index = 0; // 索引变量
            let _this = this;
            return {
              next: function () {
                if (index < _this.stus.length) {
                  const result = { value: _this.stus[index], done: false };
                  index++; // 下标自增
                  return result; // 返回结果
                } else {
                  return { value: undefined, done: true };
                }
              }
            };
          }
        }
    
        for (let v of banji) {
          console.log(v);
        }
      </script>
    </body>
    
    </html>
    
  • 相关阅读:
    linux系统分析工具续-SystemTap和火焰图(Flame Graph)
    如何使用strace+pstack利器分析程序性能
    MySQL数据类型-decimal详解
    服务器端数据合法性验证:签名sign和口令token原理
    linux系统下php通过php_oci8扩展连接oracle数据库 Nginx
    redis开启远程访问
    cURL函数库错误码说明之PHP curl_errno函数
    权限控制相关模块
    otool
    路由器
  • 原文地址:https://www.cnblogs.com/jianjie/p/13679967.html
Copyright © 2011-2022 走看看