码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-04-11 19:31:22      阅读:135      评论:0      收藏:0      [点我收藏+]

标签:one   手动   操作   javascrip   使用   for循环   set   字符串   解决   

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);
        }   

 

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

标签:one   手动   操作   javascrip   使用   for循环   set   字符串   解决   

原文地址:https://www.cnblogs.com/yinping/p/10691556.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!