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

Posted 2021-02-16 yinping

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