前端各种循环的区别for of 等等

迷南。 2022-05-19 06:05 179阅读 0赞

## 看了很多例子没有自己满意的总结一个 ##

**先上总结：**

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th align="center">适用范围</th> 
   <th align="right">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>for… in</td> 
   <td align="center">Array和Object</td> 
   <td align="right">获取可枚举的实例和原型属性名</td> 
  </tr> 
  <tr> 
   <td>Object.keys()</td> 
   <td align="center">Array和Object</td> 
   <td align="right">返回可枚举的实例属性名组成的数组</td> 
  </tr> 
  <tr> 
   <td>Object.getPropertyNames()</td> 
   <td align="center">Array和Object</td> 
   <td align="right">返回除原型属性以外的所有属性（包括不可枚举的属性）名组成的数组</td> 
  </tr> 
  <tr> 
   <td>for..of</td> 
   <td align="center">可迭代对象(Array, Map, Set, arguments等)</td> 
   <td align="right">返回属性值</td> 
  </tr> 
  <tr> 
   <td>foreach</td> 
   <td align="center">可迭代对象(Array, Map, Set, arguments等)</td> 
   <td align="right">返回属性值</td> 
  </tr> 
 </tbody> 
</table>

## for in ##

for (var i in colors) {
      typeof i; // string
    }

*  for in是ES5标准
 *  for..in主要获取对象的属性名。
 *  返回的是所有能够通过对象访问的、可枚举的属性，既包括存在于实例中的属性，也包括存在于原型中的实例
 *  返回的属性因各个浏览器厂商遵循的标准不一致导致对象属性遍历的顺序有可能不是当初构建时的顺序
 *  主要用于遍历对象的属性，但同样也可以用来遍历数组元素。
 *  上面的代码可以知道i是String类型，普通的循环中的是number
 *  为啥是字符串？我们从对象的视角来看待数组的话，实际上它是一个key为下标，value为数组元素值的对象
 *  对于不存在的项是不会被枚举出来的，不存在的元素没有在调试工具中显示出来，但是它在内存中是存在的，我们仍然可以删除这些元素。
 *  使用in操作符来判断某个key值(数组中的索引)是否存在对应的元素。
 *  主要目的就是遍历对象的属性，如果只需要获取对象的实例属性，可以使用hasOwnProperty()进行过滤。

## for of ##

var colors = ['red', 'green', 'blue'];
    colors.length = 5;
    colors.push('yellow');
    
    for (var i in colors) {
      console.log(colors[i]); // red green blue yellow
    }
    
    for (var j of colors) {
      console.log(j); // red green blue undefined undefined yellow
    }

*  for of是ES6标准
 *  主要来遍历可迭代的对象（包括Array, Map, Set, arguments等），它主要用来获取对象的属性值
 *  可以避免所有 for-in 循环的陷阱
 *  .不同于 forEach()，可以使用 break, continue 和 return
 *  for-of 循环不仅仅支持数组的遍历。同样适用于很多类似数组的对象
 *  它也支持字符串的遍历
 *  for-of 并不适用于处理原有的原生对象
 *  for…of循环可以自动遍历 Generator 函数时生成的Iterator对象，且此时不再需要调用next方法。

## for each ##

*  foreach 方法没办法使用 break 语句跳出循环，或者使用return从函数体内返回
 *  forEach（）无法在所有元素都传递给调用的函数之前终止遍历。也就是说，没有像for循环中使用的相应的break语句。如果要提前终止，必须把forEach（）方法放在一个try块中，并能抛出一个异常。如果forEach（）调用的函数抛出foreach.break异常，循环会提前终止：

function foreach（a,f,t）{ 
    
        try { a.forEach（f,t）; }
    
        catch（e）{
    
            if（e === foreach.break）return;
    
            else throw e;
    
        }
    
    }
    
    
    
    foreach.break = new Error（"StopIteration"）;

## Object.keys ##

*  为ES5上的方法
 *  对于ES5以下的环境需要进行polyfill
 *  用于获取对象自身所有的可枚举的属性值，但不包括原型中的属性，然后返回一个由属性名组成的数组。注意它同for..in一样不能保证属性按对象原来的顺序输出。
 *  注意在 ES5 环境，如果传入的参数不是一个对象，而是一个字符串，那么它会报 TypeError。在 ES6 环境，如果传入的是一个非对象参数，内部会对参数作一次强制对象转换，如果转换不成功会抛出 TypeError。

## Object.getOwnPropertyNames ##

*  返回对象的所有自身属性的属性名（包括不可枚举的属性）组成的数组，但不会获取原型链上的属性。
 *  \-

--------------------

**查看一个属性 的特性**：propertyIsEnumberable()：Object.getOwnPropertyDescriptor()  
**定义一个属性**：Object.defineProperty()

// 安全使用hasOwnProperty方法
    var hasOwn = Object.prototype.hasOwnProperty;
    for (var i in colors) {
      if (hasOwn.call(colors, i)) {
        console.log(i); // 输出：0 1 2
      }
    }