• 遍历语法for...in for...of iterator


    1.Javascript最常见的遍历语法是for循环

      缺点:写法较为麻烦

    for (let index = 0; index < array.length; index++) {
                const element = array[index];
                
            }

    2. 数组给我们提供了forEach循环语句

        缺点:无法中途跳出forEach循环,break命令或return命令都不能奏效

        array.forEach(element => {
              console.log(element);
          });

    3.for...in 循环可以遍历数组的键名

                for in 一般用于对象的遍历,会遍历对象本身的所有可枚举属性同时也会遍历对象从构造函数原型中继承来的属性,因此我们常常配合hasOwnProperty

      缺点:1>当for in 用于遍历数组的时候,数组的键名是数字,但是for...in循环是以字符串作为键名“0”、“1”、“2”等等

         2>for...in循环不仅遍历数字键名,还会遍历手动添加的其他键,甚至包括原型链上的键。

         3>某些情况下,for...in循环会以任意顺序遍历键名。

            Object.prototype.z = 100;
           
            let obj = {x: 1, y: 2};
         //继承构造函数原型中的属性
            for ( let k in obj ) {
                console.log( k ); //x y z
            }

          //hasOwnProperty 继承的属性不显示
          for (const k in obj) {
     
            if (obj.hasOwnProperty(k)) {
              console.log(k); //x y
            }
          }

    4.for...of 循环

      for...of循环提供了遍历所有数据结构的统一操作接口iterator,解决了上面的所有缺憾

      ES6中的有些数据结构原生具备Iterator接口(如数组),便可以直接使用for...of,有些不具备(如object),需要自己申明Symbol.iterator属性

      

      原生具备 Iterator 接口的数据结构如下。

    • Array
    • Map
    • Set
    • String
    • TypedArray
    • 函数的 arguments 对象
    • NodeList 对象

      

            let obj = { x: 1, y: 2 };
    
            obj[Symbol.iterator] = function () {
                let keys = Object.keys(obj);
                let length = keys.length;
                let n = 0;
                return {
                    next() {
                        return n < length ? { value: keys[n++] } : { done: true }
                    }
                }
            }
    
            for (const v of obj) {
                console.log(v);
            }   
  • 相关阅读:
    win10 自定义开机启动项
    面试题(武汉)医疗实施工程师sql
    App逆向相关 | App逆向
    openid 客户端认证方法(Client Authentication methods)简介
    Delphi 连接 Oracle 客户端配置
    转载:VS code【尝试在目标目录创建文件时发生一个错误】解决方案
    转载:Cesium SuperMap问题调研汇总
    转载:通过显式渲染提高Cesium性能
    转载:配置fastjson_safemode
    转载:SuperMap在拥抱开源路上所做的努力
  • 原文地址:https://www.cnblogs.com/yinping/p/10691556.html
Copyright © 2020-2023  润新知