zoukankan      html  css  js  c++  java
  • 遍历语法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);
            }   
  • 相关阅读:
    luogu1117 优秀的拆分 (后缀数组)
    hdu5238 calculator (线段树+crt)
    [模板]中国剩余定理/扩展中国剩余定理
    [模板]欧几里得算法/扩展欧几里得
    cf1088E Ehab and a component choosing problem (树形dp)
    cf1088D Ehab and another another xor problem (构造)
    cf1088C Ehab and a 2-operation task (构造)
    luogu3292 幸运数字 (点分治+线性基)
    2017-03-10<Git版本回退>
    2017-03-09<AS目录结构>
  • 原文地址:https://www.cnblogs.com/yinping/p/10691556.html
Copyright © 2011-2022 走看看